SVG란 무엇인가? 벡터 형식을 알기 쉽게 설명합니다

1. SVG란 무엇인가요?

SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로, XML을 기반으로 W3C가 표준화한 개방형 벡터 그래픽 형식입니다. PNG와 JPG가 이미지를 픽셀 격자로 기록하는 것과 달리, SVG는 수학 공식으로 도형을 묘사합니다. 직선, 원, 베지어 곡선 같은 도형이 좌표와 경로 명령으로 파일 안에 기록되는 방식입니다.

이것이 바로 SVG가 확대해도 흐려지지 않는 이유입니다. 브라우저가 픽셀을 늘리는 대신 새 크기로 공식을 다시 그리기 때문입니다. 이것이 “벡터”라는 말의 의미입니다.

2. SVG와 PNG / JPG 비교

항목	SVG	PNG / JPG
이미지를 저장하는 방식	수학적 경로(벡터)	픽셀 격자(비트맵)
확대했을 때	무한히 확대해도 왜곡 없음	계단 현상과 흐림
파일 크기	단순 그래픽은 매우 작음(수 KB)	해상도에 비례해 증가
편집 가능성	텍스트를 고치고 색을 바꾸고 애니메이션 가능	이미지 편집 소프트웨어 필요
적합한 용도	아이콘, 로고, 일러스트, 차트	사진과 복잡한 조명

3. SVG는 주로 어디에 쓰이나요

• 웹사이트 아이콘과 로고: 하나의 SVG가 모든 화면 해상도에 맞고 레티나 화면에서도 선명합니다;
• 일러스트와 차트: ECharts, Recharts 같은 데이터 시각화 라이브러리는 기본적으로 SVG를 출력합니다;
• 인쇄와 각인: 레이저 각인기, 비닐 커터, UV 프린터는 SVG 경로를 널리 지원합니다;
• 애니메이션: SVG 경로는 CSS / SMIL / JavaScript로 직접 제어할 수 있어 획 그리기 효과 등을 만들 수 있습니다.

4. SVG는 어떻게 열고 편집하나요?

최신 브라우저(Chrome / Edge / Firefox / Safari)는 SVG 파일을 바로 열 수 있고, Illustrator, Figma, Inkscape(무료) 같은 디자인 소프트웨어에서 편집할 수도 있습니다. 색만 바꾸거나 배경을 제거하거나 일부를 지우는 용도라면 PolySVG 온라인 SVG 편집기를 쓰면 됩니다. 설치할 소프트웨어가 없습니다.

5. PNG / JPG를 어떻게 SVG로 바꾸나요?

PolySVG 이미지 → SVG 도구를 사용하세요. 비트맵을 올리면 자체 모델이 색상 양자화, 윤곽 추적, 곡선 피팅을 자동으로 처리해 몇 초 만에 편집 가능한 SVG를 만들고, 한 번의 클릭으로 배경을 제거해 줍니다. 전체 과정은 무료이며 가입도 필요 없습니다.

요약: SVG는 “공식으로 그리는” 형식이라 아이콘·로고처럼 크기가 달라져야 하는 콘텐츠에 잘 맞고, 사진 콘텐츠는 여전히 JPG / WEBP가 더 적합합니다.