SVG(Scalable Vector Graphics)는 픽셀 기반 이미지(JPG, PNG)와 근본적으로 다른 방식으로 작동한다. 언제 SVG를 쓰는 게 유리한지 알아보자.
SVG의 핵심 특징
SVG는 점, 선, 도형을 수학적 공식으로 표현한다. 그 결과:
아무리 확대해도 깨지지 않는다: 로고를 명함 크기로 쓰다가 현수막 크기로 늘려도 선명하다. 파일 크기가 작다: 복잡한 일러스트가 아니라면 JPG보다 훨씬 작다. 코드로 편집 가능: 텍스트 파일이라 메모장으로도 수정 가능. CSS와 JavaScript로 제어 가능: 웹에서 애니메이션, 인터랙션 구현 가능.
SVG를 쓰면 좋은 경우
로고, 아이콘: 다양한 크기로 사용하는 것들 지도, 다이어그램: 선과 도형으로 구성된 것들 웹사이트 일러스트: CSS 애니메이션을 적용할 것들 QR 코드, 바코드: 선명도가 중요한 것들
SVG를 피해야 하는 경우
사진: 픽셀 기반이라 SVG로 표현하면 파일 크기가 폭발적으로 커진다. 복잡한 일러스트: 그라디언트와 효과가 많으면 SVG도 용량이 커진다.
SVG 기본 구조
SVG는 XML 기반이라 태그로 요소를 정의한다.
circle: 원 rect: 사각형 path: 복잡한 선과 곡선 text: 텍스트
ToolZip 도구 바로가기
SVG 편집기 바로가기 → 바로가기www.toolzip.app/tools/svg-preview
SVG 코드를 편집하면 오른쪽에 실시간으로 미리보기가 반영된다. 별도 프로그램 없이 브라우저에서 바로 사용 가능하다.
주요 기능:
코드 수정 즉시 미리보기 반영
SVG 파일 업로드 지원
파싱 오류 즉시 표시
배경 모드: 흰색/어두운/체크보드/투명
확대·축소 (25300%)
스니펫 삽입 버튼 (circle, rect, text, line, path)
예제 SVG 기본 제공
PNG/JPG 내보내기 (641024px)
정리
- ✅ 설치 없이 브라우저에서 바로 사용
- ✅ 파일이 서버로 전송되지 않음
- ✅ 완전 무료
관련 도구: 그라디언트 생성기 · Favicon 생성기 · 그림판