SVG란?
SVG(Scalable Vector Graphics)는 품질 손실 없이 어떤 크기로도 확대 가능한 XML 기반 벡터 이미지 형식입니다. SVG의 정의, 작동 원리, 사용 사례를 알아보세요.
SVG는 2D 벡터 그래픽을 설명하기 위한 XML 기반 마크업 언어입니다. 이미지를 픽셀 그리드로 저장하는 래스터 형식(PNG, JPG)과 달리, SVG는 수학적으로 도형을 설명합니다 — 패스, 원, 사각형, 베지어 곡선을 사용하여. 따라서 SVG 이미지는 16×16 파비콘부터 4K 배경화면까지 어떤 크기로도 품질 손실 없이 확대할 수 있습니다.
SVG 작동 원리
SVG 파일은 XML 마크업이 있는 텍스트 파일입니다: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="#FF5733" /> <text x="50" y="55" text-anchor="middle" fill="white">안녕</text> </svg> 이 SVG는 '안녕'이 쓰인 빨간 원을 그립니다. 브라우저가 XML을 읽고 어떤 해상도에서도 선명한 그래픽으로 렌더링합니다.
SVG의 장점
• 해상도 독립적 — 어떤 크기에서도 완벽하며, 픽셀화 없음 • 작은 파일 크기 — 단순한 그래픽은 동일한 PNG보다 훨씬 작음 • 텍스트 편집기나 디자인 도구(Figma, Illustrator)로 편집 가능 • 애니메이션 가능 — CSS와 JavaScript로 SVG 요소에 애니메이션 적용 가능 • 접근성 — SVG의 텍스트는 실제 텍스트로 스크린 리더와 검색 엔진이 읽을 수 있음 • CSS로 스타일 가능 — 파일 수정 없이 색상과 스타일 변경 • HTML에 직접 인라인으로 삽입 가능
SVG를 사용해야 할 때
SVG에 이상적인 경우: • 로고 및 브랜드 아이콘 — 모든 크기에서 선명해야 할 때 • UI 아이콘과 일러스트레이션 • 차트 및 데이터 시각화 • 인터랙티브 그래픽과 애니메이션 • 파비콘 (현대 브라우저는 SVG 파비콘 지원) • 단순한 기하학적 그래픽 SVG를 사용하지 말아야 할 경우: • 사진 — 래스터 형식(JPG/WebP)이 훨씬 효율적 • 복잡한 사실적 이미지 • 색상과 그라데이션이 많은 이미지 — 파일 크기가 커짐
Try it yourself
SVG로 파비콘 생성하기SVG에 대하여
SVG는 W3C가 개발하여 2001년 W3C 권고사항이 되었습니다. 현재 플러그인 없이 모든 현대 브라우저가 네이티브로 지원합니다. SVG는 아이콘 폰트와 스프라이트 시트를 대체하며 웹 아이콘과 로고의 표준이 되었습니다. SVG 2.0 사양은 개선된 텍스트 처리, 새로운 색상 함수, CSS 및 HTML과의 더 나은 통합을 추가했습니다.
FAQ
- SVG는 무엇의 약자인가요?
- SVG는 Scalable Vector Graphics(확장 가능한 벡터 그래픽)의 약자입니다.
- SVG와 PNG의 차이점은 무엇인가요?
- SVG는 도형의 수학적 설명을 저장하는 벡터 형식으로 품질 손실 없이 무한히 확대할 수 있습니다. PNG는 픽셀을 저장하는 래스터 형식으로 확대하면 흐릿해집니다. SVG는 로고와 아이콘에, PNG는 사진과 복잡한 이미지에 적합합니다.
- 웹사이트에 SVG를 사용할 수 있나요?
- 네. 모든 현대 브라우저가 SVG를 네이티브로 지원합니다. <img> src, CSS background-image로 사용하거나 HTML에 직접 인라인으로 삽입할 수 있습니다. 인라인 SVG는 CSS 스타일링과 JavaScript 상호작용을 가능하게 해서 특히 강력합니다.