SVG

SVG(Scalable Vector Graphics)는 픽셀 대신 수학적 도형으로 이미지를 표현하는 벡터 형식입니다. 같은 파일을 여러 크기로 렌더링해도 선명도를 유지합니다.

Related workflow terms: 이미지 형식.

벡터와 래스터의 차이

SVG와 PNG, JPG, WebP의 가장 큰 차이는 이미지를 저장하는 방식입니다.

래스터 형식은 각 픽셀의 색 값을 격자로 저장합니다. 1000x1000 PNG에는 정확히 100만 개의 픽셀이 있습니다. 이를 2000x2000으로 키우면 기존 픽셀 사이를 추정해 채우므로 흐리게 보일 수 있습니다. 줄이면 픽셀을 버리기 때문에 세부 정보가 사라질 수 있습니다.

SVG는 특정 위치에 원을 그리고 선을 이으며 도형을 색으로 채우라는 명령을 저장합니다. 개별 픽셀 대신 도형의 구조를 설명하므로 필요한 크기에 맞춰 다시 렌더링할 수 있습니다. 단순한 SVG 아이콘은 16픽셀과 1600픽셀로 표시해도 가장자리가 선명합니다. 파일 크기는 도형의 복잡도에 따라 달라집니다.

도형, 글자, 선으로 시작한 아이콘, 로고, 다이어그램, 차트는 SVG에 잘 맞습니다. 사진, 스크린샷, 스캔 문서처럼 캡처된 픽셀로 시작한 콘텐츠는 래스터 형식을 유지해야 합니다.

SVG를 쓰는 곳

• 아이콘과 UI 요소 — 한 파일을 여러 픽셀 밀도에서 선명하게 렌더링해 크기별 PNG 파일을 줄일 수 있습니다.
• 로고와 브랜드 에셋 — 작은 UI부터 큰 인쇄물까지 여러 크기에 같은 도형 데이터를 사용합니다.
• 데이터 시각화 — 차트와 다이어그램을 확대하고 CSS로 꾸미며 JavaScript로 상호작용을 더할 수 있습니다.
• 일러스트와 인포그래픽 — 확대해도 선명하고 CSS 테마를 적용해 별도 파일 없이 다크 모드 표현을 만들 수 있습니다.
• 웹 애니메이션 — SVG와 CSS 또는 JavaScript를 조합해 크기에 맞춰 렌더링되는 동작 그래픽을 만들 수 있습니다.

SVG와 스크린샷

SVG와 스크린샷은 서로 다른 방식의 이미지입니다. 스크린샷은 화면의 픽셀을 기록해 래스터 데이터가 되고, SVG는 벡터 도형을 저장합니다. 원본 구조를 잃은 화면 캡처를 자동으로 완전한 벡터 파일로 바꿀 수는 없습니다.

스크린샷 안에 SVG 아이콘과 로고가 보이더라도 캡처 순간 픽셀로 변환됩니다. 만들어진 PNG나 WebP에는 원래 벡터 데이터가 남지 않습니다.

문서에서 스크린샷과 확장 가능한 다이어그램을 함께 써야 한다면 SVG 에셋을 별도로 유지하고 래스터 캡처 옆에 삽입하는 편이 좋습니다. 래스터 스크린샷과 벡터 오버레이를 한 문서나 프레젠테이션에 함께 넣는 도구도 있습니다.

벡터 기반 주석 도구는 화살표, 상자, 글자를 해상도와 무관한 오버레이로 그릴 수 있습니다. 스크린샷 크기가 바뀌어도 주석을 선명하게 유지하는 데 도움이 됩니다.

스크린샷 중심 작업에서 SVG의 역할

SVG는 캡처 형식이 아니지만 최종 에셋 과정에서 스크린샷과 함께 사용됩니다. 아래 UI 화면은 래스터로 두고 로고, 아이콘, 화살표, 설명 상자는 벡터로 유지할 수 있습니다. 스크린샷을 억지로 벡터화하지 않고도 브랜드 요소를 선명하게 만들 수 있습니다.

흔한 실수

• 복잡한 디자인을 무조건 SVG로 내보냅니다. 경로가 수천 개인 일러스트는 압축된 PNG보다 커질 수 있습니다. 두 형식의 실제 용량과 품질을 비교하세요.
• 사진에 SVG를 씁니다. SVG 안에 래스터 사진을 넣으면 오버헤드만 늘고 벡터 장점은 없습니다.
• SVG를 최적화하지 않습니다. 디자인 도구는 불필요한 메타데이터, 숨은 레이어, 중복 속성을 넣을 수 있습니다. 결과를 확인한 뒤 SVG 최적화 도구로 줄이세요.
• 접근성을 무시합니다. 의미 있는 SVG에는 용도에 맞는 이름과 설명을 제공하고, 장식용 그래픽은 보조 기술에서 제외하세요. SVG title·desc 요소와 ARIA 속성은 삽입 방식에 맞게 사용해야 합니다.