SVG는 Scalable Vector Graphics의 약자입니다. 픽셀 단위가 아닌 명령어로 설명되는 그림을 위한 W3C의 개방형 표준입니다. 여기에는 원을 그려라, 이 곡선을 따라라, 이 도형을 이 색으로 채워라, 이 단어를 저 글꼴로 표시하라 같은 지시가 들어 있습니다. 그림이 일련의 지시로 이루어져 있기 때문에, 흐릿해지거나 계단 현상이 생기지 않고 어떤 크기로든 그릴 수 있습니다. 그래서 로고, 아이콘, 지도, 차트에 SVG가 자주 사용됩니다.
SVG가 이미지를 저장하는 방식
SVG 파일은 XML입니다. 어떤 편집기에서나 열 수 있는 읽기 가능한 텍스트입니다. <path> 요소는 압축된 형태의 그리기 명령 문자열을 담고 있으며, <rect>, <circle>, <polygon> 요소는 이름에서 알 수 있는 모양을 그립니다. <text> 요소는 실제로 선택 가능한 텍스트를 담고, <g> 요소는 여러 요소를 그룹으로 묶어 함께 이동하거나 스타일을 지정할 수 있게 합니다. viewBox 속성은 좌표계를 정의하며, 이것 덕분에 전체 그림이 깨끗하게 확대·축소됩니다.
SVG는 텍스트이기 때문에 압축 효율이 매우 좋습니다. gzip으로 압축한 SVG(확장자로 .svgz를 쓰는 경우도 있음)는 원래 크기의 일부에 불과한 경우가 많습니다. 텍스트라는 점은 SVG를 CSS로 스타일링하고, 애니메이션을 적용하고, 스크립트로 제어할 수 있다는 의미이기도 합니다. 브라우저는 SVG를 불투명한 이미지가 아닌 문서의 일부로 취급합니다.
이 마지막 기능에는 알아둘 만한 보안상의 측면이 있습니다. SVG에는 <script> 요소를 포함할 수 있습니다. 사용자 업로드로 SVG를 받는 곳이라면 어디든, 실행되지 않도록 SVG를 정제(sanitize)하거나 그런 방식으로 제공해야 합니다. 이런 이유로, 모든 래스터 형식을 받으면서도 SVG는 거부하는 사이트들이 있습니다.
SVG는 사진을 담기에는 적합하지 않습니다. SVG 안에 래스터 이미지를 포함할 수는 있지만, 그렇게 하면 XML로 감싼 픽셀 이미지가 될 뿐이며, SVG가 주는 확장성의 장점을 활용하지 못합니다.
SVG에 포함된 메타데이터
SVG에는 전용 <metadata> 요소가 있으며, 표준이 그 안에 무엇을 넣어야 하는지 엄격히 규정하지 않기 때문에, 편집기들은 다양한 정보를 여기에 담습니다. 가장 일반적으로는 더블린 코어 용어를 사용하는 RDF가 들어갑니다. 예를 들어 dc:title, dc:creator, dc:date, dc:description, dc:rights 및 라이선스 URI가 있습니다. <title> 및 <desc> 요소는 루트나 개별 도형에 둘 수 있으며, 화면 읽기 프로그램을 위한 접근성 텍스트 역할도 겸합니다.
여기에 편집기 자체의 관리 정보가 추가되는데, 보통 이 부분이 가장 큽니다. Inkscape는 자체 네임스페이스 전체를 기록합니다. 문서 창의 위치와 크기, 마지막으로 저장했을 때의 확대 비율과 커서 위치, 가이드라인, 그리드 설정, 레이어 이름과 표시 여부, 그리고 inkscape:version 문자열 등이 그 예입니다. Illustrator는 자체 문서 식별자와 히스토리가 들어 있는 XMP 패킷을 포함합니다. 이 정보들은 어떤 것도 화면에 실제로 그리지 않습니다.
여기에서 두 가지 실용적인 점을 알 수 있습니다. 편집기 데이터가 파일 대부분을 차지하는 경우가 많기 때문에, SVG를 게시 전에 최적화 도구로 처리하면 크기가 절반 정도로 줄어드는 일이 흔합니다. 또한 레이어 이름은 사용자가 직접 쓴 텍스트입니다. <g inkscape:label="client logo v3 REJECTED"> 같은 이름은 그림에서는 보이지 않지만, 파일 안에서는 그대로 노출됩니다.
SVG를 언제 사용해야 할까요
사진이 아니라 그린 요소에는 모두 SVG를 사용하세요. 로고, 아이콘, 다이어그램, 차트, 일러스트레이션, 지도 등이 여기에 해당합니다. SVG는 하나의 파일로 모든 화면 해상도를 지원해야 하는 웹에도, 어떤 크기로든 인쇄해야 하는 출력물에도 적합한 선택입니다.
사진이나 톤이 연속적인 이미지는 PNG 또는 JPG로 사용하세요. SVG를 열 수 없을 정도로 오래되었거나 기능이 제한된 소프트웨어에서 열 수 있는 이미지가 필요하다면 평면 래스터 복사본도 함께 내보내세요. 그리고 게시 전에 편집기 메타데이터를 제거해 파일 크기를 줄이고, 대개 공개용이 아닌 레이어 이름이 노출되지 않도록 하세요.