SVG 파일이란? 여는 법부터 활용과 이미지 변환 방법까지

SVG(Scalable Vector Graphics) 파일은 고정된 픽셀 격자만이 아니라 XML과 벡터 도형으로 표현한 이미지입니다. 그림을 도형, 경로, 텍스트, 채우기로 저장할 수 있어 이러한 벡터 요소는 크기를 바꿔도 선명합니다. 파일 크기는 요소의 수와 복잡도, 래스터 콘텐츠를 삽입했는지에 따라 달라집니다. W3C SVG 2 표준을 참고하세요.

SVG를 처음 접한 분을 위해 SVG의 정체, 파일 안의 내용, 잘하는 일과 못하는 일, 여는 방법, 이미 가지고 있는 이미지로 만드는 방법을 쉽게 설명합니다. 웹 개발 배경지식은 필요하지 않습니다.

핵심만 살펴보기

• SVG는 픽셀이 아니라 코드로 표현한 도형으로 이미지를 저장하므로, 어떤 크기로 확대해도 흐려지지 않습니다.
• 로고, 아이콘, 단순한 일러스트, Cricut이나 인쇄 작업에 적합합니다. 사진에는 잘 맞지 않습니다.
• 웹 브라우저, 디자인 앱(Illustrator, Inkscape, Figma, Canva), 일반 텍스트 편집기에서도 열 수 있습니다.
• 벡터 소프트웨어에서 디자인하거나 가지고 있는 이미지를 변환해 SVG를 만들 수 있습니다.

SVG와 일반 이미지(PNG 또는 JPG)의 차이

PNG나 JPG는 래스터 이미지입니다. 모자이크처럼 색상 픽셀이 고정된 격자로 배열되어 있습니다. 충분히 확대하면 사각형이 보이므로, PNG로 저장한 로고는 크게 확대할 때 흐려집니다.

SVG는 벡터 이미지입니다. "여기에 원을 그리고 주황색으로 채운 뒤 저기에 이 곡선을 그린다" 같은 지침의 집합입니다. 매번 그 지침을 바탕으로 다시 그리므로 어떤 크기에서도 선명합니다. 이 차이가 SVG의 핵심 매력입니다. 각각 언제 사용해야 하는지 자세히 알아보려면 PNG와 SVG 비교를 참고하세요.

SVG 파일 안에는 무엇이 있나요?

의외라고 느낄 수 있지만 SVG는 텍스트입니다. 메모장이나 코드 편집기로 열면 읽을 수 있습니다. 내부 형식은 태그를 쓰는 텍스트 형식인 XML이며, 각 도형을 코드로 표현합니다. 주황색 원 하나의 간단한 SVG는 다음과 같습니다.

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

이것이 파일 전체입니다. circle은 도형을 그리고, cx/cy는 위치를, r은 반지름을, fill은 색상을 정합니다. SVG는 텍스트 기반 XML이므로 내부를 검사할 수 있고, 이처럼 단순한 파일은 속성 하나를 편집해 색상을 바꿀 수 있습니다. SVG는 현대 브라우저에 구현된 공개 W3C 표준입니다. W3C SVG 소개를 읽어 보세요.

.svgz 확장자의 파일을 받았다면 SVGZ와 SVG 비교에서 마크업을 복원하고 편집이나 웹 배포에 적합한 형식을 선택하는 방법을 설명합니다.

SVG의 용도

SVG는 다양한 크기에서 그래픽이 선명해야 하거나 도형으로 편집해야 하는 곳에서 강점을 보입니다.

• 로고. 크기별로 파일을 따로 만들지 않고 하나의 SVG를 명함과 배너에 모두 사용할 수 있습니다.
• 웹사이트 아이콘과 그래픽. 버튼, 화살표, 단순한 일러스트가 서로 다른 화면 밀도에서도 선명합니다. 성능은 여전히 파일 복잡도와 자산 전달 방식에 따라 달라집니다.
• Cricut과 커팅기. SVG는 표준 커팅 파일 형식입니다. 기계가 경로를 따라 비닐, 종이, 열전사 비닐을 자릅니다. Cricut용 SVG 파일 준비에서 전체 과정을 설명합니다.
• 인쇄와 간판. 벡터는 픽셀이 드러나지 않고 어떤 실제 크기로도 확대할 수 있습니다.

SVG에 적합하지 않은 용도

SVG는 평면 그래픽 작품을 위한 형식이므로 사진에는 적합하지 않습니다. 사진에는 평평한 색상 영역 없이 수백만 가지 색이 미묘하게 섞여 있습니다. 이를 도형으로 억지로 만들면 포스터처럼 단순화된 그림이나 크고 복잡한 파일이 됩니다. 사진 벡터화를 생각하고 있다면 먼저 사진을 SVG로 변환하면 실제로 일어나는 일을 읽어 보세요. 실제 사진의 디테일이 필요하면 JPG나 PNG를 유지하세요.

SVG 파일을 여는 방법

목적에 따라 쉬운 선택지가 세 가지 있습니다.

• 보기만 하려면: 웹 브라우저로 파일을 끌어다 놓으세요. 별도 소프트웨어 없이 바로 표시됩니다.
• 시각적으로 편집하려면: Inkscape(무료), Illustrator, Figma, Canva 같은 디자인 앱에서 여세요. SVG 편집 방법에서 색상과 형태를 바꾸는 과정을 설명합니다.
• 코드를 보거나 수정하려면: 메모장이나 VS Code 같은 일반 텍스트 편집기에서 여세요.

파일을 열었는데 캔버스가 비어 있다면 다시 저장하기 전에 빈 SVG 점검표를 사용하세요. 경로가 캔버스 밖에 있거나, 보이지 않거나, 잘려 있거나, 해당 앱에서만 지원되지 않을 수 있습니다.

SVG를 만드는 방법

두 가지 경로가 있으며, 무엇에서 시작하느냐에 따라 적합한 방법이 달라집니다.

처음부터 디자인합니다. 벡터 소프트웨어(Inkscape, Illustrator, Figma, Canva)에서 로고, 아이콘, 일러스트를 그리고 SVG로 내보냅니다. 처음부터 벡터였으므로 가장 깔끔한 결과를 얻습니다.

가지고 있는 이미지를 변환합니다. 대부분의 사람이 실제로 필요한 방법입니다. 로고나 작품이 PNG나 JPG로만 있다면, 픽셀을 편집 가능한 도형으로 다시 그리는 벡터화로 SVG를 만들 수 있습니다. 이미지 벡터화의 의미에서 과정을 설명합니다.

PerfectVector 사용 예

PNG나 JPG가 있고 실제 SVG가 필요하다면 변환 경로를 사용하면 됩니다. PerfectVector는 적합한 로고, 아이콘, 평면 일러스트를 편집 가능한 SVG 경로와 색상 도형으로 재구성합니다. 이미지를 SVG로 바꾸고, 무료 미리보기를 원본과 비교하며 경로를 검사한 뒤, 크레딧 1개로 완성된 파일을 잠금 해제하세요.

SVG 자체가 잘하는 평면 그래픽 작품과 로고에서 가장 잘 작동합니다. 세밀한 사진이라면 어떤 변환기도 실제 사진 같은 벡터를 제공할 수 없습니다. 가능한 척하기보다 그 점을 분명히 안내합니다.

간단한 안전 안내

SVG에는 <script> 요소를 포함한 능동적 콘텐츠가 들어갈 수 있으므로, 신뢰할 수 없는 SVG를 이미지 형식이라는 이유만으로 안전하다고 간주해서는 안 됩니다. MDN은 SVG 스크립팅을 직접 설명합니다. 웹사이트 업로드 절차에서는 파일 형식과 내용을 검증하고, 저장한 업로드의 이름을 바꾸고, 크기를 제한하며, 최소 권한으로 파일을 제공하세요. OWASP는 신뢰할 수 없는 업로드에 이런 심층 방어 방식을 권장합니다. OWASP 파일 업로드 치트 시트를 참고하세요.

자주 묻는 질문

SVG 파일은 어디에 쓰나요? 로고, 웹사이트 아이콘, 버튼, 단순한 일러스트, Cricut 같은 기계의 커팅 파일에 사용합니다. 그래픽이 다양한 크기에서도 선명해야 하거나 도형으로 편집되어야 한다면 SVG가 좋은 선택입니다. 파일이 작고 품질 손실 없이 확대할 수 있어 웹에서 널리 쓰입니다.

SVG 파일은 어떻게 여나요? 보려면 현대 웹 브라우저에 끌어다 놓고, 시각적으로 편집하려면 Inkscape, Illustrator, Figma, Canva 같은 호환 디자인 앱에서 여세요. XML을 검사하려면 메모장 같은 텍스트 편집기로 엽니다. 운영체제의 썸네일이 없다는 것만으로 파일이 손상되었다고 볼 수는 없습니다. 호환 뷰어에서 열어 확인하세요.

SVG 파일은 어떻게 만드나요? 벡터 소프트웨어(Inkscape, Illustrator, Figma, Canva)에서 디자인하고 SVG로 내보내거나, PNG 또는 JPG 로고처럼 가지고 있는 이미지를 벡터화해 SVG로 변환합니다. 처음부터 디자인하면 가장 깔끔한 결과를 얻고, 래스터 파일만 있다면 변환이 빠른 경로입니다.

SVG 파일은 벡터 파일인가요? 네. SVG는 Scalable Vector Graphics의 약자로, 픽셀 대신 벡터 도형으로 이미지를 저장합니다. 그래서 어떤 크기로 확대해도 품질을 잃지 않습니다.

SVG와 PNG 또는 JPG의 차이는 무엇인가요? PNG나 JPG는 픽셀로 이루어져 해상도 이상으로 확대하면 흐려집니다. SVG는 도형으로 이루어져 어떤 크기에서도 선명합니다. 사진에는 PNG와 JPG가, 로고, 아이콘, 그래픽에는 SVG가 더 적합합니다.

Microsoft Word나 Office에서 SVG 파일을 열 수 있나요? 네. 지원하는 Microsoft 365 및 Office 버전에서 가능합니다. Microsoft는 SVG 파일을 삽입하고 그래픽 서식 설정으로 색상이나 스타일을 바꾸는 방법을 안내합니다. 사용 가능한 설정은 앱과 버전에 따라 다릅니다. Microsoft SVG 편집 안내를 참고하세요.

출처

1. W3C: Scalable Vector Graphics (SVG) 2: SVG 요소, 도형, 렌더링, XML 구문의 규범적 정의입니다.
2. W3C: SVG 삽입 콘텐츠: SVG에 삽입된 래스터 이미지와 기타 콘텐츠의 표준 동작입니다.
3. MDN: SVG의 <script>: SVG에 실행 가능한 스크립트가 포함될 수 있음을 보여 주는 참조입니다.
4. OWASP: 파일 업로드 치트 시트: 신뢰할 수 없는 업로드 파일을 받아 제공할 때 필요한 보안 제어입니다.
5. Microsoft 지원: Microsoft 365에서 SVG 이미지 편집: SVG 그래픽의 공식 Office 지원 및 편집 절차입니다.

---

SVG는 고정된 픽셀 격자 대신 경로로 작품을 표현할 수 있습니다. 벡터에 적합한 평면 작품이 PNG나 JPG로만 있다면 PerfectVector로 추적하고, 미리보기에서 도형을 검사한 뒤, 잠금 해제한 SVG를 편집, 인쇄, 커팅에 사용할 도구에서 시험하세요.