> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

> SVG는 픽셀만이 아닌 코드로 표현한 이미지이므로 크기를 바꿔도 선명합니다. SVG의 의미와 용도, 파일을 열고 직접 만드는 방법을 쉽게 설명합니다.

Source: https://perfectvector.com/ko/blog/what-is-an-svg-file

Language: ko
Author: Claire Yoon
Published: 2026-05-25T08:00:00+09:00
Updated: 2026-08-26T08:00:00+09:00

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

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

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

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

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

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

![확대한 로고의 비교. 왼쪽은 픽셀이 보이고 흐릿한 PNG, 오른쪽은 선명한 SVG입니다](https://perfectvector.com/blog/what-is-an-svg-file/raster-vs-svg-zoom.webp)

*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 소개를 읽어 보세요.](https://www.w3.org/TR/SVG2/intro.html)

.svgz 확장자의 파일을 받았다면 [SVGZ와 SVG 비교](https://perfectvector.com/ko/blog/svgz-vs-svg)에서 마크업을 복원하고 편집이나 웹 배포에 적합한 형식을 선택하는 방법을 설명합니다.

![왼쪽의 짧은 SVG 코드와 오른쪽에 렌더링된 주황색 원. SVG가 도형을 설명하는 읽을 수 있는 코드임을 보여 줍니다](https://perfectvector.com/blog/what-is-an-svg-file/svg-anatomy.webp)

*SVG는 텍스트입니다. 이 코드가 오른쪽의 주황색 원을 그립니다.*

## SVG의 용도

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

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

## SVG에 적합하지 않은 용도

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

## SVG 파일을 여는 방법

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

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

파일을 열었는데 캔버스가 비어 있다면 다시 저장하기 전에 [빈 SVG 점검표](https://perfectvector.com/ko/blog/svg-opens-blank)를 사용하세요. 경로가 캔버스 밖에 있거나, 보이지 않거나, 잘려 있거나, 해당 앱에서만 지원되지 않을 수 있습니다.

## SVG를 만드는 방법

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

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

**가지고 있는 이미지를 변환합니다.** 대부분의 사람이 실제로 필요한 방법입니다. 로고나 작품이 PNG나 JPG로만 있다면, 픽셀을 편집 가능한 도형으로 다시 그리는 **벡터화**로 SVG를 만들 수 있습니다. [이미지 벡터화의 의미](https://perfectvector.com/ko/blog/what-is-image-vectorization)에서 과정을 설명합니다.

## PerfectVector 사용 예

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

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

## 간단한 안전 안내

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

## 자주 묻는 질문

**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 편집 안내를 참고하세요.](https://support.microsoft.com/en-us/office/graphics-visuals/edit-svg-images-in-microsoft-365)

## 출처

1. [W3C: Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/): SVG 요소, 도형, 렌더링, XML 구문의 규범적 정의입니다.
2. [W3C: SVG 삽입 콘텐츠](https://www.w3.org/TR/SVG2/embedded.html): SVG에 삽입된 래스터 이미지와 기타 콘텐츠의 표준 동작입니다.
3. [MDN: SVG의 `<script>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/script): SVG에 실행 가능한 스크립트가 포함될 수 있음을 보여 주는 참조입니다.
4. [OWASP: 파일 업로드 치트 시트](https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html): 신뢰할 수 없는 업로드 파일을 받아 제공할 때 필요한 보안 제어입니다.
5. [Microsoft 지원: Microsoft 365에서 SVG 이미지 편집](https://support.microsoft.com/en-us/office/graphics-visuals/edit-svg-images-in-microsoft-365): SVG 그래픽의 공식 Office 지원 및 편집 절차입니다.

***

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

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/what-is-an-svg-file)
- [PDF를 SVG로 변환하기: 내보내기와 추적 선택 방법](https://perfectvector.com/ko/blog/convert-pdf-to-svg.md)
- [iPhone에서 이미지를 SVG로 변환하는 방법(앱 설치 없이)](https://perfectvector.com/ko/blog/image-to-svg-on-iphone.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)