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 파일 업로드 지원
파싱 오류 즉시 표시
배경 모드: 흰색/어두운/체크보드/투명
확대·축소 (25 ~ 300%)
스니펫 삽입 버튼 (circle, rect, text, line, path)
예제 SVG 기본 제공
PNG/JPG 내보내기 (64~1024px)
정리
- ✅ 설치 없이 브라우저에서 바로 사용
- ✅ 파일이 서버로 전송되지 않음
- ✅ 완전 무료
관련 도구: 그라디언트 생성기 · Favicon 생성기 · 그림판
'ToolZip' 카테고리의 다른 글
| SQL 코드가 읽기 어려운 이유 — 무료 온라인 SQL 포맷터 (0) | 2026.10.08 |
|---|---|
| ZIP 압축은 어떻게 파일을 줄이나 — 무료 온라인 ZIP 압축·해제 도구 (0) | 2026.10.07 |
| 세계 33개 도시 실시간 시계 — 서머타임 자동 반영 세계 시계 (0) | 2026.10.06 |
| 동영상 방향이 잘못 찍혔을 때 — 온라인 동영상 회전·반전 도구 (0) | 2026.10.05 |
| UUID가 무엇인지 아는가 — 무료 온라인 UUID 생성기 (0) | 2026.10.04 |