SVG란? 선명한 그래픽을 위한 벡터 포맷

SVG는 Scalable Vector Graphics(확장 가능한 벡터 그래픽)의 약자로, 매일 접하는 이미지 포맷 중에서 유독 성격이 다릅니다. JPEG, PNG, WebP, GIF는 모두 고정된 픽셀 격자를 저장합니다. 하지만 SVG는 전혀 다른 것을 저장합니다. 바로 이미지를 그리는 방법을 담은 명령어의 집합입니다. 이 한 가지 차이 덕분에 SVG 로고는 동일한 파일 하나로 스마트워치에서도, 대형 옥외 광고판에서도 선명하게 보이며, 잘 만든 아이콘 세트가 사진 썸네일 한 장보다 가벼울 수 있습니다.

픽셀이 아닌 수학으로 그린 그림

SVG 파일은 XML로 작성된 순수한 텍스트입니다. 코드 편집기로 열어 보면 도형을 설명하는 읽기 쉬운 태그들이 보입니다 — 중심과 반지름을 가진 <circle>, 곡선을 그리는 <path>, 채움 색을 지정한 <rect> 같은 것들이죠. 브라우저는 이 명령어를 읽어 매번 도형을 새로 그려 냅니다. 화면에 나타나는 그 순간까지는 어떤 것도 픽셀로 저장되지 않습니다.

이것이 바로 "벡터"의 의미입니다. 그림이 고정된 픽셀 격자가 아니라 좌표와 곡선으로 정의되기 때문에 해상도에 독립적입니다. 1000%로 확대하더라도 브라우저는 동일한 곡선을 더 큰 크기로 다시 계산할 뿐입니다. 흐릿해지지도, 대각선 가장자리에 계단 현상이 생기지도, 품질이 떨어지지도 않습니다 — 절대로요. 반면 래스터 이미지는 정해진 수의 픽셀만 담고 있어서, 확대하면 얼마 안 되는 정보를 억지로 늘리게 됩니다. 확대한 PNG가 뭉개지고 각져 보이는 이유가 바로 이것입니다.

SVG가 특히 빛나는 분야

• 로고와 브랜드 마크 — 파일 하나로 파비콘, 헤더, 인쇄용 대형 이미지까지 전혀 흐려지지 않고 소화합니다.
• 아이콘 — UI 아이콘 시스템(메뉴, 검색, 장바구니, 화살표)은 작고 선명하며, 주변 텍스트의 색을 그대로 물려받을 수 있습니다.
• 일러스트와 라인 아트 — 가장자리가 깔끔한 평면, 기하학적, 혹은 손으로 그린 벡터 그림.
• 차트와 다이어그램 — 데이터 시각화는 어떤 배율에서도 또렷하게 읽히며, 마크업의 숫자만 바꿔 업데이트할 수 있습니다.

이런 평면적이고 기하학적인 그래픽에서 SVG 파일은 대개 매우 작습니다. PNG로 30 KB인 로고가 SVG로는 3 KB일 수 있는데, 수만 개의 색 픽셀이 아니라 몇 개의 도형 정의만 저장하기 때문입니다. 바이트가 적다는 것은 곧 더 빠른 페이지를 의미합니다.

편집 가능하고, 스타일링 가능하고, 애니메이션도 되는

SVG는 그저 마크업이기 때문에 그래픽치고는 유난히 유연합니다. 다음과 같은 일을 할 수 있습니다:

• 코드로 편집하기. 텍스트 편집기에서 16진수 색상을 바꾸고, 좌표를 살짝 옮기고, 선 두께를 조정하세요 — 디자인 도구가 전혀 필요 없습니다.
• CSS로 스타일링하기. SVG를 HTML에 인라인으로 삽입하면 그 도형들이 DOM의 일부가 됩니다. 채움과 선 색을 지정하고, 호버 상태를 적용하고, CSS 규칙 한 줄만으로 아이콘 색상을 다크 모드에 맞춰 바꿀 수도 있습니다.
• CSS나 JavaScript로 애니메이션 주기. 패스를 그려 나가고, 도형을 변형하고, 로더를 회전시킬 수 있습니다 — 모두 네이티브로, 동영상 파일이나 무거운 애니메이션 라이브러리 없이요.

인터페이스 디자이너가 SVG를 끊임없이 찾는 이유가 바로 이것입니다. 아이콘은 고정된 그림이 아니라, 다시 칠하고 옮길 수 있는 살아 있는 마크업이니까요.

범용적인 지원

Chrome, Safari, Firefox, Edge 등 모든 현대 브라우저는 10년도 훨씬 전부터 SVG를 네이티브로 렌더링해 왔습니다. SVG를 <img> 태그에 넣거나, CSS의 background-image로 쓰거나, HTML에 직접 인라인으로 삽입할 수 있습니다. 2026년 현재 일반적인 웹 사용에서는 플러그인도, 폴리필도, 호환성 걱정도 필요 없습니다.

SVG가 잘못된 선택인 경우

SVG는 래스터 포맷을 무조건 대체하는 만능 포맷이 아니며, 맞지 않는 용도에 쓰면 오히려 크게 역효과를 냅니다. 가장 명확한 예가 사진입니다. 사진은 수백만 개의 픽셀로 이루어져 있고, 각각이 미묘하게 다른 색조를 띠며, 깔끔하게 설명할 만한 기하학적 도형이 없습니다. 사람의 얼굴이나 숲 풍경을 재현할 만한 간결한 곡선 집합이란 존재하지 않습니다. 사진을 억지로 "벡터화"하려 들면 감당할 수 없이 거대한 파일이 나오거나, 실제 디테일을 모두 잃어버린 뭉개지고 포스터화된 만화가 되어 버립니다.

사진을 비롯한 연속 계조 이미지에는 래스터 포맷이 알맞은 도구입니다 — 일반 사진에는 JPEG, 더 나은 압축이 필요하면 WebP/AVIF죠. 사진이 있다면 벡터화하는 게 아니라 래스터화하는 겁니다. SVG의 강점은 평면적이고 기하학적이며 색이 적은 그래픽에 있으며, 이미지가 진짜로 사진의 성격을 띠는 순간부터는 쓸모를 잃습니다.

로고에서 SVG vs PNG, 한눈에 보기

더 자세한 나란한 비교는 SVG vs PNG: 어떤 포맷을 써야 할까를 참고하세요.

알아 둘 만한 보안 이야기

유연함에는 이면이 있습니다. SVG는 실행 가능한 XML이기 때문에, 악의적인 파일은 <script> 태그나 이벤트 핸들러를 심어 이미지가 브라우저에 인라인으로 열릴 때 JavaScript를 실행시킬 수 있습니다. 그래서 신뢰할 수 없는 SVG는 실제 공격 벡터가 됩니다 — 예를 들어 낯선 사람이 업로드한 SVG를 사이트에 인라인으로 렌더링하는 경우죠. 해결책은 간단합니다. 신뢰할 수 없는 출처의 SVG는 정화(sanitize)하거나(스크립트, 이벤트 핸들러, 외부 참조 제거), 사용자가 올린 SVG를 인라인하지 말고 일반 이미지 파일로 제공하세요. 직접 만든 SVG는 완벽하게 안전합니다.

SVG vs 아이콘 폰트

인라인 SVG가 쉬워지기 전에는 많은 사이트가 아이콘을 커스텀 폰트로 배포했습니다(각 글리프가 하나의 아이콘). 아이콘 폰트도 여전히 작동하지만, 대세는 인라인 SVG로 넘어왔습니다. SVG 아이콘은 더 선명하고(폰트는 작은 크기에서 힌팅이 이상하게 걸릴 수 있음), 아이콘 하나에 여러 색을 지원하며, 접근성이 더 좋고, 글리프 하나를 보여 주려고 폰트 파일 전체를 내려받게 하지 않습니다. 새 프로젝트라면 인라인 SVG 아이콘 시스템이 현대적인 기본 선택입니다.

SVG 파일을 가볍게 유지하기

디자인 도구에서 내보낸 SVG는 편집기 메타데이터, 숨겨진 레이어, 과도한 소수점 정밀도, 주석 등으로 비대해져 있는 경우가 많은데, 이 중 어느 것도 이미지가 보이는 모습에는 영향을 주지 않습니다. SVGO 같은 최적화 도구에 파일을 통과시키면 보이는 결과는 그대로 둔 채 크기를 크게 줄일 수 있습니다. 전체 과정은 SVG 최적화 가이드를 읽어 보세요.

PNG나 JPG가 대신 필요할 때

모든 플랫폼이 SVG를 받아 주는 것은 아닙니다. 일부 소셜 네트워크, 마켓플레이스 상품 등록, 이메일 클라이언트, 오래된 콘텐츠 시스템은 래스터 이미지만 받습니다. 이런 경우에는 SVG를 래스터화합니다 — 고정 해상도로 한 번 렌더링해 픽셀 이미지로 내보내는 것이죠. 투명도가 필요할 때(아이콘, 컬러 배경 위의 로고)는 SVG를 PNG로 변환하고, 대상이 불투명 사진만 받고 파일 크기가 중요할 때는 SVG를 JPG로 변환하세요. 둘 다 전적으로 브라우저 안에서 실행되며 — 파일은 절대 기기를 벗어나지 않습니다. 고밀도 화면에서도 래스터가 선명하게 보이도록 표시 크기의 2배나 3배로 내보내세요.

간단한 답: SVG를 써야 할까?

• 로고, 아이콘, 평면 일러스트인가요? → 예, SVG입니다. 어떤 크기에서도 선명하고 아주 작습니다.
• 그래픽의 색을 바꾸거나 애니메이션을 넣어야 하나요? → 예, SVG입니다. 살아 있는 마크업이니까요.
• 사진이거나 디테일이 풍부한 이미지인가요? → 아니오 — JPEG, WebP, AVIF를 쓰세요.
• 신뢰할 수 없는 사용자의 SVG를 표시하나요? → 먼저 정화하세요.
• 플랫폼이 SVG를 받지 않나요? → 2~3배 크기로 PNG나 JPG로 래스터화하세요.