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

# SVG 파일 편집 방법: 도형을 수정할 때와 코드를 바꿀 때

> 시각적 편집기로 SVG 도형을 수정하거나 코드를 변경하는 방법을 알아보세요. 그룹, 패스, 삽입 이미지를 구분하고 색상, 캔버스 크기, 저장 결과를 확인합니다.

Source: https://perfectvector.com/ko/blog/how-to-edit-an-svg

Language: ko
Author: Irene Kim
Published: 2026-05-30T08:00:00+09:00
Updated: 2026-10-08T08:00:00+09:00

SVG 파일을 편집하려면 복사본을 **시각적 편집기**에서 열어 도형, 색상, 곡선을 바꾸거나 **텍스트 편집기**에서 열어 마크업을 조금 수정하세요. SVG로 저장한 뒤 저장된 파일을 다시 열어 결과를 확인합니다. 적합한 방법은 필요한 수정과 파일 안의 객체에 따라 달라집니다.

구조를 크게 바꾸는 명령을 사용하기 전에 선택한 대상이 무엇인지 확인하세요. 그룹, 여러 부분을 포함하는 하나의 패스, 삽입된 PNG는 모두 캔버스에서 하나의 객체처럼 보일 수 있지만 각각 다른 조치가 필요합니다.

> **편집 방법 선택하기**
>
> * **색상, 크기, 이동, 곡선:** Inkscape, Illustrator 또는 호환되는 브라우저 벡터 편집기를 사용하세요.
> * **ID, 클래스, 16진수 색상, 캔버스:** SVG 코드 복사본을 수정하고 렌더링을 확인하세요.
> * **모든 요소가 함께 선택됨:** 객체 유형을 확인하세요. 실제 그룹에만 그룹 해제를 사용합니다.
> * **래스터 이미지밖에 없음:** 원본을 벡터화하고 미리보기를 비교한 다음, PerfectVector 결과의 잠금을 해제하고 편집·내보내기를 진행하세요.

## 복사본을 준비하고 SVG 객체를 구분하기

SVG 파일, 작업용 복사본, 편집기, SVG 지원 뷰어가 필요합니다. 내보낸 복사본의 확인을 마칠 때까지 원본을 보관하세요.

[SVG는 Scalable Vector Graphics의 약자입니다](https://www.w3.org/TR/SVG2/). XML 마크업으로 벡터 도형과 패스를 표현하지만 이미지를 삽입할 수도 있습니다. **패스**는 선이나 도형을 나타내고, **노드**는 벡터 편집기에서 수정할 수 있는 패스 위의 점입니다. SVG 확장자만으로는 화면의 그림에 편집 가능한 점이 있는지 알 수 없습니다.

복사본을 열고 레이어 또는 객체 패널에서 선택한 객체를 살펴보세요. 필요하면 텍스트 편집기로 마크업도 확인합니다. 구조를 바꾸기 전에 유형을 대조하세요.

| 선택한 내용             | 확인할 항목                         | 첫 조치                                    |
| ------------------ | ------------------------------ | --------------------------------------- |
| 그룹                 | 그룹 컨테이너. 코드에서는 보통 `<g>`        | 그룹 안으로 들어가거나 한 번 해제합니다. 중첩 그룹일 때만 반복합니다 |
| 떨어진 부분이나 구멍이 있는 패스 | 여러 하위 패스를 포함하는 하나의 패스          | 노드를 수정합니다. 부분 분리가 필요할 때만 복제본을 분해합니다     |
| 연속된 하나의 패스         | 윤곽을 따라 있는 편집 가능한 노드            | 노드 또는 직접 선택 도구를 사용합니다                   |
| 클리핑 또는 마스크가 적용된 그림 | 클립이나 마스크와 그 내용                 | 경계를 해제하기 전에 내용을 살펴봅니다                   |
| 삽입된 PNG 또는 JPEG    | 래스터 데이터를 참조하는 `<image>` 이미지 객체 | 래스터 원본을 수정하거나, 패스가 필요하면 벡터화합니다          |

[`<image>` 요소는 PNG나 JPEG를 참조할 수 있습니다](https://www.w3.org/TR/SVG2/embedded.html). 바깥 파일 이름이 `.svg`로 끝난다고 픽셀이 패스로 바뀌지는 않습니다. 확대했을 때 각진 가장자리는 단서지만, 객체 패널과 원본 참조를 확인하면 더 정확히 판단할 수 있습니다. 일부 편집기는 정상적인 벡터 SVG도 하나의 그래픽 객체로 삽입하므로, 한 번에 선택된다는 사실만으로는 알 수 있는 것이 거의 없습니다.

복합 패스는 “O”의 중앙처럼 구멍을 유지할 수 있습니다. 분해하면 구멍이 바뀔 수 있습니다. 그룹 해제가 없거나 효과가 없을 때는 [SVG 객체 유형 진단](https://perfectvector.com/ko/blog/svg-wont-ungroup)을 참고하세요.

## 시각적 편집기와 코드 중 선택하기

| 수정할 내용            | 유용한 방법                      | 수정 후 확인할 사항                    |
| ----------------- | --------------------------- | ------------------------------ |
| 도형의 색상이나 위치 변경    | 시각적 편집기                     | 의도한 객체만 바뀌었는지                  |
| 윤곽 모양 변경          | 노드 또는 직접 선택 도구              | 곡선, 모서리, 구멍이 디자인과 일치하는지        |
| 알고 있는 채우기 값 하나 변경 | 텍스트 편집기                     | 화면의 색이 바뀌었는지, 다른 스타일이 덮어쓰지 않는지 |
| CSS나 애니메이션 연결 유지  | 텍스트 편집기                     | 필요한 ID와 클래스가 저장된 마크업에 남아 있는지   |
| 캔버스 여백 제거         | 페이지·아트보드를 맞추거나 `viewBox` 조정 | 그림, 선, 효과가 잘리지 않는지             |
| 개별 커팅 레이어 준비      | 사용 앱에 맞는 작업 과정              | 커팅 앱에서 형상과 가져온 레이어가 작동하는지      |

[Inkscape는 무료 오픈 소스 프로그램](https://inkscape.org/about/)으로 macOS, Windows, Linux에서 실행되며 SVG를 기본 형식으로 사용합니다. 평소 Illustrator를 사용한다면 그것도 선택지입니다. Figma는 SVG로 디자인 도구 사이에 에셋을 옮길 수 있지만, [가져오기 안내는 SVG의 marker와 pattern 요소를 제외합니다](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools). 복잡한 파일은 편집기를 정하기 전에 가져오기 결과를 확인하세요.

Canva가 안내하는 [SVG 편집 과정](https://www.canva.com/features/svg-editor/)은 기본적인 색상과 레이아웃 수정을 다룹니다. 작은 작업에는 브라우저 편집기도 적합할 수 있습니다. 파일의 채우기, 선, 텍스트, 효과 지원과 현재 내보내기 조건을 확인하세요. 지원되는 단색 채우기를 정확한 색상별로 나누고 정렬이 유지된 파일을 만드는 작업에는 [SVG 색상 분리기](https://perfectvector.com/ko/svg-color-separator)를 사용합니다. 패스 모양을 바꾸려면 벡터 편집기를 쓰세요.

## 도형을 시각적으로 편집하고 내보내기 확인하기

명령 이름은 편집기마다 다르지만 다음 순서로 진행합니다.

1. **작업용 복사본을 엽니다.** 가져온 디자인을 원본과 비교하세요. 글자, 패턴, 효과가 이미 달라졌다면 멈춥니다.
2. **수정할 객체를 선택합니다.** 패널에서 실제 그룹임을 확인한 경우에만 그룹 안으로 들어가거나 해제합니다. 패스라면 노드 또는 직접 선택 도구로 전환하세요.
3. **한 가지를 수정합니다.** 채우기를 바꾸거나, 부분을 이동하거나, 몇 개의 노드를 조정합니다. 일부러 늘이는 경우가 아니라면 크기를 바꿀 때 가로세로 비율을 유지하세요.
4. **바뀐 부분을 확인합니다.** 곡선과 작은 틈을 가까이서 살펴본 다음, 사용할 크기로 전체 디자인을 봅니다.
5. **새 SVG로 저장하거나 내보냅니다.** 뷰어와 실제로 사용할 앱에서 다시 여세요. 수정한 부분, 전체 치수, 필요한 객체를 선택할 수 있는지 확인합니다.

색상을 바꿀 때는 도형 내부의 **채우기**와 윤곽을 따라 칠하는 **선**을 구분하세요. 하나의 보이는 색상이 여러 객체에 걸쳐 있을 수 있습니다. 같은 채우기 선택 기능은 유용하지만 바꾸기 전에 선택 범위를 확인해야 합니다. 다른 부분도 같은 색일 수 있습니다. [SVG 색상 편집 가이드](https://perfectvector.com/ko/blog/how-to-change-svg-color)는 상속된 스타일과 바뀌지 않는 색상을 다룹니다.

편집기가 고유 형식이나 추가 메타데이터를 사용한다면 편집 가능한 작업 원본을 보관하세요. Adobe의 [SVG 저장 옵션](https://helpx.adobe.com/illustrator/using/saving-artwork.html)에는 글꼴, CSS 속성, 래스터 이미지, Illustrator 편집 데이터 설정이 있습니다. 내보낸 파일이 제대로 보이더라도 마크업이 달라지거나 내용이 래스터화될 수 있습니다. 이미지뿐 아니라 필요한 객체와 연결용 속성도 비교하세요.

## 작은 변경을 SVG 코드로 제어하기

SVG 복사본을 VS Code나 다른 일반 텍스트 편집기에서 여세요. 네임스페이스, 요소 이름, 따옴표를 유지합니다. 한 가지를 바꾼 뒤 렌더링하고 나서 다음 변경을 진행하세요.

### 패스를 바꾸지 않고 채우기 변경하기

이 예제를 `triangle.svg`로 저장하고 SVG 지원 뷰어에서 엽니다.

```svg
<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>
```

1. 패스의 `fill` 속성에서 `#3b82f6`를 `#f97316`으로 바꿉니다.
2. 저장한 뒤 파일을 다시 열거나 새로고침합니다.
3. 삼각형이 주황색이 되고 윤곽은 그대로인지 확인합니다. `d` 패스 데이터, `id`, `class`는 원본과 같아야 합니다.

색상이 바뀌지 않으면 화면을 제어할 수 있는 `style` 속성, 클래스 규칙, 상속된 색상, 선을 살펴보세요. 파일 전체에서 색상의 모든 등장을 바꾸는 대신 해당 색상을 결정하는 규칙을 수정합니다.

검증 방법: 이 예제를 채우기 변경 전후에 SVG 렌더러로 렌더링하고 결과 픽셀을 확인했습니다. 삼각형의 색상이 바뀌었지만 패스 데이터, ID, 클래스는 그대로였습니다. 이 작은 예제는 복잡한 SVG를 디자인 앱에서 가져오고 내보내는 동작을 검증하지 않습니다.

### `viewBox`로 빈 여백 제거하기

루트의 [`viewBox`에는 최소 x, 최소 y, 너비, 높이의 네 숫자가 있습니다](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute). SVG 좌표 공간에서 표시 뷰포트에 매핑되는 사각형을 정의합니다.

예제의 삼각형은 x=8부터 40, y=8부터 40까지 차지합니다. 패스 데이터는 그대로 두고 `viewBox="0 0 48 48"`을 `viewBox="8 8 32 32"`로 바꾸세요. 저장하고 다시 렌더링하면 빈 여백이 없어져 같은 48×48 뷰포트에서 삼각형이 더 크게 보입니다.

이 수정은 캔버스 매핑을 바꾸며 패스 형상이나 루트 `width`와 `height`는 바꾸지 않습니다. 실제 그림에서는 선과 효과를 위한 공간을 확보하세요. 형상에 딱 맞는 상자는 이들을 잘라낼 수 있습니다. 시각적 편집기에서 페이지나 아트보드를 그림에 맞추고 내보낸 복사본을 살펴보는 편이 더 안전한 경우가 많습니다. 가져온 물리 크기가 잘못되었다면 [SVG 치수와 `viewBox` 가이드](https://perfectvector.com/ko/blog/svg-imports-wrong-size)를 따르세요.

그림이 사라지거나 잘리거나 늘어나면 원래 `viewBox`로 복원하고 네 값과 가로세로 비율을 확인합니다. 캔버스 문제를 고치려고 모든 노드를 이동하지 마세요.

## 트레이싱한 SVG에 정리가 필요한 경우

래스터 이미지는 격자에 픽셀을 저장합니다. **벡터화**는 픽셀에서 형상을 다시 구성하므로, 트레이싱된 파일은 색상과 윤곽이 원래 디자인과 다르게 정리될 수 있습니다.

하나로 보이는 부분이 여러 작은 패스로 흩어질 수 있습니다. 하나의 색상도 서로 떨어진 여러 영역에 걸칠 수 있습니다. 빽빽한 노드, 작은 점, 배경 도형, 겹친 윤곽은 간단한 편집도 느리게 만듭니다. 특정 확대율에서 선명해 보이는지만 판단하지 말고 이러한 속성을 직접 확인하세요.

**잘게 나뉜 구조**

![촘촘한 앵커 포인트와 잘게 나뉜 벡터 도형을 보여 주는 설명 그림](https://perfectvector.com/blog/how-to-edit-an-svg/messy-svg-editing.webp)

*설명 그림: 작은 조각과 촘촘한 노드가 많으면 직접 선택과 모양 수정이 어려워집니다.*

**단순한 구조**

![앵커 포인트가 적고 큰 벡터 도형을 보여 주는 설명 그림](https://perfectvector.com/blog/how-to-edit-an-svg/clean-svg-editing.webp)

*설명 그림: 큰 도형과 필요한 만큼의 노드로 구성된 형태는 확인하고 편집하기 쉽습니다.*

이 그림은 편집에 드는 노력을 설명합니다. 변환 샘플이나 측정한 제품 비교가 아닙니다. 트레이싱을 유지할 가치가 있다면 문제 부분을 고치고 윤곽이 정확히 유지되는 곳만 단순화하세요. 래스터 이미지에서 만든 것이며 정리가 너무 많이 필요하다면 원본을 다시 벡터화해 보세요. 사용할 수 있는 원래 벡터 형상이 있다면 그것을 유지하고 스크린샷을 트레이싱하지 않습니다.

## PerfectVector를 사용하는 경우

PerfectVector는 원본 PNG나 JPEG, SVG 안의 래스터 이미지처럼 래스터에서 패스를 만들어야 하는 경우에 적합합니다. 보존하려는 기존 벡터 그림은 위의 일반 편집기 방법으로 수정하세요.

자신의 변환 작업은 다음 순서로 진행합니다.

1. **래스터 원본을 업로드하고 벡터 미리보기를 비교합니다.** 빠진 세부 사항, 원하지 않는 영역, 원본과 다른 윤곽을 살펴보세요.
2. **편집과 내보내기 전에 결과의 잠금을 해제합니다.** 변환과 미리보기는 횟수 제한 없이 무료입니다. [현재 공개 가격 정책](https://perfectvector.com/pricing.md)에 따르면 고유한 결과 하나를 잠금 해제하는 데 1크레딧이 들며, 해제한 결과의 재다운로드는 무료입니다.
3. **잠금 해제한 형상을 확인하고 편집합니다.** 필요한 도형과 노드를 확인하고 필요한 경우 팔레트를 조정한 뒤 사용할 크기에서 결과를 비교하세요.
4. **내보내고 다음 앱에서 확인합니다.** SVG를 다시 열고 필요한 부분을 선택해 치수와 작은 세부 사항을 확인합니다. 미리보기만으로 모든 편집기, 프린터, 커터에서 사용할 준비가 되었음을 입증할 수는 없습니다.

래스터 글자는 형상으로 재구성되므로 입력 가능한 텍스트가 된다고 기대하지 마세요. 중요한 글자, 곡선, 작은 틈이 트레이싱에서 보존되지 않는다면 수동 수정이나 다시 그리는 방법도 고려합니다.

## 자주 묻는 질문

**SVG를 무료로 편집하려면 어떻게 하나요?**
시각적 편집에는 Inkscape를, 마크업 변경에는 일반 텍스트 편집기를 사용하세요. 브라우저 도구에도 무료 기능이 있을 수 있습니다. 현재 내보내기 조건과 파일이 쓰는 SVG 기능의 지원 여부를 확인하세요.

**VS Code에서 SVG를 편집할 수 있나요?**
네. XML 마크업을 수정해 작은 채우기 변경, 치수, viewBox, 필요한 ID와 클래스를 바꿀 수 있습니다. 복사본을 저장하고 렌더링으로 확인하세요. 곡선 형태 수정에는 시각적 편집기를 사용합니다.

**SVG의 도형을 개별 선택할 수 없는 이유는 무엇인가요?**
객체 유형을 확인하세요. 그룹, 여러 하위 패스가 있는 하나의 패스, 클리핑된 그림, 삽입 이미지일 수 있습니다. 실제 그룹은 내부에 들어가거나 해제하고, 형상은 패스 노드를 편집합니다. 래스터 내용은 패스가 필요할 때만 벡터화하세요.

**Canva에서 SVG를 편집할 수 있나요?**
Canva의 안내 과정은 기본적인 색상과 레이아웃 수정을 다룹니다. 가져온 파일과 현재 SVG 다운로드 조건을 확인하세요. 정밀한 윤곽 변경이나 ID·클래스 제어에는 벡터 편집기 또는 마크업을 사용합니다.

**PerfectVector 결과는 잠금 해제 전에 편집할 수 있나요?**
자신의 변환에서는 먼저 미리보기를 비교하고 결과를 잠금 해제한 다음 편집과 내보내기 기능을 사용합니다. 내보낸 SVG는 실제 사용할 앱에서도 확인하세요.

## 참고 자료

1. [W3C — Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/) — SVG 문서, 도형, 패스, 스타일 모델.
2. [W3C — SVG 삽입 콘텐츠](https://www.w3.org/TR/SVG2/embedded.html) — SVG 문서 안에 유지될 수 있는 래스터 이미지.
3. [W3C — SVG 좌표계, 변환, 단위](https://www.w3.org/TR/SVG2/coords.html) — viewBox 매핑과 형상·뷰포트 치수의 차이.
4. [Inkscape — 소개](https://inkscape.org/about/) — 공식 플랫폼, SVG 형식, 오픈 소스 정보.
5. [Adobe — Illustrator에서 아트워크 저장](https://helpx.adobe.com/illustrator/using/saving-artwork.html) — SVG 내보내기 설정과 보존되는 Illustrator 편집 데이터.
6. [Figma — 디자인 도구 간 에셋 복사](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools) — SVG 전송 과정과 marker·pattern 가져오기 제한.
7. [Canva — SVG 편집기](https://www.canva.com/features/svg-editor/) — 기본 색상, 크기, 레이아웃 작업 안내.
8. [PerfectVector — 가격 정책](https://perfectvector.com/pricing.md) — 현재 미리보기, 결과 잠금 해제, 재다운로드 조건.

***

사용할 수 있는 SVG가 있다면 기존 형상을 편집하세요. 원본이 래스터이거나 트레이싱을 교체해야 한다면 [PerfectVector에서 원본 이미지를 시험해 보세요](https://perfectvector.com/ko/image-to-vector). 원본과 미리보기를 비교한 뒤 편집 전에 잠금을 해제하고, 다음 앱에서 내보낸 도형과 치수를 확인합니다.

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/how-to-edit-an-svg)
- [SVG 바운딩 박스: 올바른 좌표로 측정하기](https://perfectvector.com/ko/blog/svg-bounding-box.md)
- [SVG 패턴 단위: 반복 모티프의 올바른 크기 유지하기](https://perfectvector.com/ko/blog/svg-pattern-units.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)