Scalable Vector Graphics

SVG 파일 형식 완벽 가이드

SVG란 무엇인가?

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식입니다. 래스터 이미지(픽셀 기반)와 달리 SVG는 수학적 공식과 좌표를 사용하여 도형, 선, 곡선, 텍스트 등을 정의하기 때문에 어떤 크기로 확대하거나 축소해도 이미지 품질이 전혀 손상되지 않는다는 것이 가장 큰 특징입니다.

SVG 형식은 1999년 W3C(World Wide Web Consortium)가 웹에서 벡터 그래픽을 표준화하기 위해 개발하였습니다. 초기 버전인 SVG 1.0은 2001년에 공식 권고안으로 채택되었고, 이후 SVG 1.1이 2003년에 발표되어 현재까지 가장 널리 사용되는 버전으로 자리 잡았습니다. 2011년에는 SVG 1.1 2판이 발표되며 명세가 더욱 정비되었습니다. 이후 SVG 2.0 개발이 진행 중이며, CSS 및 HTML5와의 통합을 더욱 강화하는 방향으로 나아가고 있습니다.

현재 SVG는 웹 디자인, 로고 제작, 아이콘 시스템, 데이터 시각화 등 다양한 분야에서 핵심적인 역할을 담당하고 있으며, 모든 주요 웹 브라우저에서 기본적으로 지원됩니다.

SVG의 기술적 사양

SVG 파일의 핵심적인 기술 특성을 이해하면 이 형식을 언제, 어떻게 활용할지 더욱 명확하게 판단할 수 있습니다.

파일 구조: SVG는 XML(Extensible Markup Language) 기반으로 작성되며, 일반 텍스트 편집기로도 파일 내용을 읽고 편집할 수 있습니다.
해상도 독립성: 픽셀이 아닌 수학적 벡터 경로로 정의되어 있어, 스마트폰 화면부터 대형 빌보드까지 어떤 해상도에서도 선명하게 표시됩니다.
색상 지원: RGB, RGBA, HSL, HSLA, 16진수 색상 코드 등 CSS에서 사용하는 모든 색상 표현 방식을 지원하며, 선형 그라디언트와 방사형 그라디언트도 기본적으로 포함됩니다.
압축: SVG 파일은 GZIP 압축을 적용한 SVGZ 형식으로 저장할 수 있으며, 이 경우 파일 크기를 원본의 20~50% 수준으로 줄일 수 있습니다.
애니메이션: SMIL(Synchronized Multimedia Integration Language) 또는 CSS 애니메이션, JavaScript를 통해 파일 내에서 직접 애니메이션을 구현할 수 있습니다.
스크립팅 및 상호작용: SVG 요소는 DOM(Document Object Model)의 일부로 취급되므로, JavaScript를 통해 동적으로 조작하거나 이벤트를 처리할 수 있습니다.
텍스트 지원: SVG 내의 텍스트는 실제 텍스트로 처리되므로 검색 엔진이 인식할 수 있고, 접근성 측면에서도 유리합니다.
내장 이미지: SVG 파일 내부에 래스터 이미지(PNG, JPEG 등)를 Base64로 인코딩하여 포함시킬 수 있습니다.

SVG의 주요 활용 사례

SVG 형식은 다양한 분야에서 폭넓게 활용되고 있습니다.

웹 아이콘 및 UI 요소: 레티나 디스플레이를 포함한 모든 화면 해상도에서 선명하게 표시되기 때문에, 아이콘 폰트를 대체하는 SVG 아이콘 시스템이 널리 사용됩니다.
로고 및 브랜드 아이덴티티: 기업 로고는 명함부터 대형 간판까지 다양한 크기로 사용되므로 품질 저하가 없는 SVG가 최적의 선택입니다.
데이터 시각화: D3.js와 같은 라이브러리가 SVG를 기반으로 차트, 그래프, 지도 등을 동적으로 생성하는 데 활용됩니다.
일러스트레이션: 플랫 디자인 스타일의 일러스트나 인포그래픽 제작에 적합하며, 웹사이트에 직접 삽입할 수 있습니다.
애니메이션 그래픽: CSS나 JavaScript와 결합하여 인터랙티브 애니메이션, 로딩 스피너, 전환 효과 등을 구현하는 데 사용됩니다.
인쇄 및 출판: 고해상도 인쇄물 제작 시에도 벡터 기반의 특성 덕분에 품질을 완벽하게 유지할 수 있습니다.

SVG의 장단점 비교

장점	단점
무한 확대·축소 시에도 화질 유지	복잡한 사진이나 세밀한 래스터 이미지 표현에 부적합
텍스트 기반 파일로 용량이 작고 편집 용이	복잡한 SVG는 파일 크기가 커지고 렌더링 속도가 느려질 수 있음
CSS와 JavaScript로 스타일링 및 동적 조작 가능	오래된 브라우저 또는 일부 환경에서 호환성 문제 발생 가능
검색 엔진 최적화(SEO)에 유리한 텍스트 요소 지원	악성 스크립트 삽입 등 보안 취약점에 노출될 수 있음
애니메이션 및 인터랙티브 기능 내장 지원	복잡한 그라디언트나 필터 효과는 렌더링 부하가 증가
접근성 향상을 위한 title, desc 태그 지원	비전문가가 직접 작성하거나 수정하기 어려울 수 있음

SVG 파일을 열고 보는 방법

SVG 파일은 다양한 소프트웨어와 플랫폼에서 열 수 있습니다.

웹 브라우저: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari 등 모든 현대적인 웹 브라우저에서 SVG 파일을 직접 열어볼 수 있습니다.
Adobe Illustrator: 전문적인 벡터 그래픽 편집 소프트웨어로, SVG 파일을 가져오고 내보내는 기능을 완벽하게 지원합니다.
Inkscape: 무료 오픈소스 벡터 그래픽 편집기로, SVG를 기본 파일 형식으로 사용합니다. 초보자부터 전문가까지 폭넓게 활용됩니다.
Figma / Sketch / Adobe XD: UI/UX 디자인 툴로, SVG 파일의 가져오기 및 내보내기를 지원합니다.
Affinity Designer: Adobe Illustrator의 대안으로 사용되는 전문 벡터 편집 툴입니다.
CorelDRAW: 벡터 그래픽 디자인에 특화된 소프트웨어로 SVG를 완벽하게 지원합니다.
텍스트 편집기: VS Code, Sublime Text, Notepad++ 등 텍스트 편집기로 SVG의 XML 코드를 직접 확인하고 편집할 수 있습니다.

SVG 파일 온라인으로 변환하는 방법

SVG 파일을 PNG, JPG, PDF, WebP 등 다른 형식으로 변환하거나, 반대로 다른 이미지 파일을 SVG로 변환해야 할 때가 있습니다. 예를 들어, SVG를 지원하지 않는 플랫폼에 업로드하거나, 이메일에 첨부하거나, 특정 인쇄 작업에 활용할 때 형식 변환이 필요합니다.

Metric Converter(metric-converter.com)는 별도의 소프트웨어 설치 없이 웹 브라우저에서 바로 SVG 파일을 다양한 형식으로 변환할 수 있는 무료 온라인 도구입니다. 사용 방법은 간단합니다. 파일을 업로드하고 원하는 출력 형식을 선택한 다음 변환 버튼을 클릭하면 됩니다. 변환된 파일은 즉시 다운로드할 수 있으며, 개인 정보 보호를 위해 처리 후 서버에서 파일이 자동으로 삭제됩니다.

자주 묻는 질문 (FAQ)

SVG 파일이 다른 이미지 형식(PNG, JPG)과 다른 이유는 무엇인가요?

PNG와 JPG는 픽셀 데이터를 저장하는 래스터 이미지 형식입니다. 이미지를 확대하면 픽셀이 보여 화질이 저하됩니다. 반면 SVG는 수학적 경로와 좌표를 XML 텍스트로 저장하는 벡터 형식이기 때문에, 어떤 크기로 확대해도 항상 선명하게 표시됩니다. 로고, 아이콘, 일러스트레이션처럼 선명도가 중요한 그래픽에는 SVG가, 사진처럼 세밀한 색상 정보가 많은 이미지에는 PNG나 JPG가 적합합니다.

SVG 파일은 웹사이트에서 어떻게 사용할 수 있나요?

SVG를 웹사이트에서 사용하는 방법은 크게 세 가지입니다. 첫째, <img> 태그의 src 속성에 SVG 파일 경로를 지정하는 방법입니다. 둘째, CSS의 background-image 속성에 SVG를 배경으로 사용하는 방법입니다. 셋째, SVG 코드를 HTML 파일에 직접 인라인으로 삽입하는 방법으로, 이 방식은 CSS와 JavaScript를 통한 동적 조작 및 스타일링이 가장 자유롭습니다.

SVG 파일의 보안 위험이 있나요?

SVG는 XML 기반이기 때문에 내부에 JavaScript 코드를 포함