SVG 파일이란? 벡터 이미지 포맷의 모든 것
SVG 파일이란 무엇인가
SVG(Scalable Vector Graphics) 파일은 XML 기반의 벡터 그래픽 포맷으로, 이미지를 픽셀이 아닌 수학적 공식과 좌표로 저장합니다. 크기를 조정해도 품질 손실이 없으며, MIME 타입은 image/svg+xml로 정의됩니다.
벡터 포맷의 특성상 SVG는 로고, 아이콘, 일러스트레이션, 인포그래픽 등 선명한 선과 도형이 필요한 작업에 적합합니다. JPG나 PNG 같은 래스터 이미지와 달리 확대 시 계단 현상이나 흐릿함이 발생하지 않습니다. 또한 텍스트 기반 포맷이므로 파일 크기가 작고, 코드 에디터로 직접 편집할 수 있습니다.
SVG 파일의 출처와 생성 방법
SVG 파일은 주로 그래픽 디자인 소프트웨어에서 생성됩니다. Adobe Illustrator, Inkscape, Sketch, Figma 같은 벡터 그래픽 도구가 SVG를 기본 내보내기 포맷으로 지원합니다. 웹 디자이너와 개발자가 아이콘 라이브러리나 UI 요소를 만들 때 자주 사용하는 포맷입니다.
온라인 아이콘 저장소(Font Awesome, Flaticon, Noun Project 등)에서 다운로드하는 파일도 대부분 SVG 형식입니다. 일부 도구는 PNG나 JPG를 SVG로 변환하는 기능을 제공하지만, 이는 래스터를 벡터로 추적(trace)하는 과정이므로 원본이 벡터 그래픽이 아니라면 결과물의 품질이 제한적입니다.
코드로 직접 작성하는 경우도 있습니다. SVG는 XML 문법을 따르므로 <svg>, <circle>, <path> 같은 태그로 도형과 경로를 정의할 수 있습니다. 간단한 로고나 아이콘은 텍스트 에디터에서 손수 작성하거나 수정하기도 합니다.
SVG 파일 여는 방법
SVG 파일은 대부분의 최신 웹 브라우저에서 바로 열립니다. Chrome, Firefox, Safari, Edge 모두 SVG를 기본 지원하므로 파일을 브라우저 창에 드래그하면 렌더링된 이미지를 볼 수 있습니다. 이는 웹 표준으로 채택된 포맷이기 때문입니다.
그래픽 편집 소프트웨어에서도 열 수 있습니다. Adobe Illustrator, Inkscape, CorelDRAW, Affinity Designer 같은 벡터 편집 도구는 SVG를 완전히 지원하며, 경로와 객체를 편집할 수 있습니다. 텍스트 에디터(VS Code, Sublime Text, 메모장 등)로 열면 XML 코드 형태로 내용을 확인하고 수정할 수 있습니다.
Windows 사진 뷰어나 macOS Preview 같은 기본 이미지 뷰어도 SVG를 표시하는 경우가 많지만, 운영체제 버전에 따라 지원 여부가 다를 수 있습니다. Microsoft Office 최신 버전(Word, PowerPoint 등)도 SVG 삽입을 지원합니다.
SVG를 다른 포맷으로 변환하는 이유와 방법
SVG는 웹과 디지털 환경에서 이상적이지만, 특정 상황에서는 다른 포맷으로 변환이 필요합니다. 가장 흔한 변환 대상은 PNG입니다. 일부 구형 시스템이나 소프트웨어가 SVG를 지원하지 않거나, 이메일 서명이나 문서에 고정된 크기의 이미지가 필요할 때 PNG로 변환합니다. PNG는 투명 배경을 유지하면서 래스터 이미지로 변환할 수 있습니다.
JPG 변환은 사진 같은 복잡한 이미지를 더 작은 파일 크기로 저장해야 할 때 선택됩니다. 다만 JPG는 투명 배경을 지원하지 않으므로 배경이 흰색이나 다른 색으로 채워집니다. PDF 변환은 인쇄용 문서나 벡터 품질을 유지하면서 범용적으로 공유해야 할 때 유용합니다.
변환 방법은 여러 가지입니다. Adobe Illustrator나 Inkscape에서 "다른 이름으로 저장" 또는 "내보내기"를 통해 원하는 포맷을 선택할 수 있습니다. 온라인 변환 도구나 파일 관리 서비스를 사용하면 소프트웨어 설치 없이 빠르게 변환할 수 있습니다. 명령줄 도구(ImageMagick, Inkscape CLI 등)를 사용하는 방법도 있습니다.
SVG 파일 사용 시 흔한 문제
SVG 파일이 제대로 표시되지 않는 경우가 있습니다. 가장 흔한 원인은 외부 폰트나 이미지 참조입니다. SVG 내부에서 외부 파일을 참조하는 경우, 해당 파일이 없으면 렌더링이 깨질 수 있습니다. 해결책은 폰트를 아웃라인으로 변환하거나 이미지를 인라인 데이터로 포함시키는 것입니다.
일부 SVG 파일이 특정 프로그램에서만 열리는 문제도 있습니다. 이는 비표준 기능이나 특정 소프트웨어 전용 확장을 사용했기 때문입니다. Adobe Illustrator의 일부 효과는 표준 SVG 뷰어에서 제대로 표시되지 않을 수 있습니다. 최대한 표준 SVG 기능만 사용하거나, 내보내기 시 "웹용 최적화" 옵션을 선택하면 호환성이 개선됩니다.
파일 크기가 예상보다 큰 경우도 있습니다. SVG는 벡터 포맷이므로 보통 작지만, 불필요한 메타데이터, 숨겨진 레이어, 중복된 경로가 포함되면 용량이 커집니다. SVGO 같은 최적화 도구로 불필요한 데이터를 제거하면 파일 크기를 크게 줄일 수 있습니다.
브라우저에서 SVG가 흐릿하게 보이는 경우는 CSS나 HTML에서 크기 지정 방식 때문일 수 있습니다. SVG는 벡터이므로 이론적으로 선명해야 하지만, 앤티앨리어싱 설정이나 부적절한 스케일링으로 흐릿해질 수 있습니다. viewBox 속성을 올바르게 설정하고 CSS에서 이미지 렌더링 방식을 조정하면 개선됩니다.
자주 묻는 질문
SVG 파일은 무손실 포맷인가요? SVG는 벡터 그래픽 포맷으로 수학적 데이터를 저장하므로 무손실입니다. 크기를 조정하거나 저장을 반복해도 품질이 저하되지 않습니다.
SVG를 워드나 파워포인트에 삽입할 수 있나요? Microsoft Office 2016 이후 버전은 SVG 삽입을 지원합니다. 파일을 직접 드래그하거나 "그림 삽입" 메뉴에서 선택할 수 있습니다. 구버전에서는 PNG로 변환 후 삽입해야 합니다.
SVG 파일을 편집하려면 어떤 프로그램이 필요한가요? Adobe Illustrator나 Inkscape(무료) 같은 벡터 편집 도구가 필요합니다. 간단한 수정은 텍스트 에디터로도 가능하지만, 복잡한 그래픽은 전문 도구가 편리합니다.
결론
SVG는 현대 웹과 디지털 디자인에서 필수적인 벡터 이미지 포맷입니다. 확장성과 작은 파일 크기, 편집 가능성 덕분에 로고와 아이콘 제작에 널리 사용됩니다. 대부분의 최신 소프트웨어와 브라우저가 지원하지만, 특정 환경에서는 PNG나 JPG로 변환이 필요할 수 있습니다. SVG 파일 작업에 대한 더 자세한 정보는 SVG 포맷 페이지에서 확인할 수 있습니다.