PNG를 SVG로 변환하기

소개

PNG는 로고, 아이콘, 배지, UI 그래픽을 저장할 때 자주 사용되기 때문에 SVG 변환의 대표적인 원본 포맷입니다. 윤곽이 선명하고 배경이 투명하며 색상이 많지 않은 PNG는 유용한 SVG로 변환될 가능성이 높습니다.

하지만 PNG에서 SVG로 변환하는 작업도 결국 트레이싱입니다. 생성된 SVG는 원본 디자인 파일이 아니라 PNG 픽셀을 벡터로 해석한 결과입니다. 따라서 결과 품질은 원본 이미지의 품질과 단순함에 크게 좌우됩니다.

PNG 에셋을 SVG로 바꾸는 것이 더 나은 웹 에셋을 만드는지 판단할 때 이 문서를 활용하세요.

PNG 트레이싱의 작동 방식

PNG는 픽셀을 저장하고 SVG는 도형을 저장합니다. PNG에 단순한 마크가 들어 있다면 트레이싱 과정에서 색상 영역을 찾아 벡터 경로로 변환할 수 있습니다. 반대로 질감, 안티앨리어싱, 그림자, 사진 디테일이 포함되어 있다면 각각의 픽셀이 수많은 작은 경로로 바뀔 수 있습니다.

투명 PNG는 대체로 좋은 원본이지만 투명 배경만으로 깔끔한 SVG를 보장할 수는 없습니다. 투명 배경의 로고도 가장자리의 부드러운 픽셀이 노이즈가 많은 벡터 도형으로 바뀔 수 있습니다. 가장 좋은 원본은 중요한 형태가 분명할 만큼 해상도가 충분하면서도 시각적으로 단순한 PNG입니다.

어떤 PNG가 잘 변환될까요?

파일 확장자가 아니라 이미지 내용이 중요합니다. 단순한 로고 PNG는 좋은 SVG 원본이 될 수 있지만 PNG로 저장된 사진은 여전히 사진입니다.

실제 변환 사례: 투명 스티커 PNG

아래 결과는 2026년 7월 26일 SVGKIT의 기본 Color 모드와 원본 배경 유지 설정으로 측정했습니다. 투명 배경은 잘 유지됐지만, 내부 색상과 윤곽선이 많은 일러스트라 단순한 로고보다 경로 수가 크게 늘었습니다.

원본 투명 PNG

SVGKIT 변환 결과

원본

220,647B

결과

98,014B

경로

594개

처리 시간

약 0.4초

투명 배경은 변환에 유리한 조건 중 하나일 뿐입니다. 내부 디테일이 많다면 파일 크기가 줄어도 경로가 복잡해질 수 있으므로, 확대가 꼭 필요한 자산인지 먼저 판단하세요.

흔히 하는 실수

너무 작은 PNG를 원본으로 사용하기

작은 PNG에는 깨끗한 트레이싱에 필요한 형태 정보가 부족할 수 있습니다. 이미지를 확대해도 사라진 정보를 되살릴 수는 없습니다. 가능한 한 품질이 높은 원본을 사용하세요.

투명 배경이면 결과도 깔끔할 것이라고 생각하기

투명 배경은 도움이 되지만 부드러운 가장자리와 안티앨리어싱은 추가 경로를 만들 수 있습니다. 변환 후 가장자리를 확대해 확인하세요.

PNG라는 이유로 스크린샷을 변환하기

스크린샷은 대체로 SVG에 적합하지 않습니다. 글자 렌더링, 그림자, 테두리, 압축된 UI 디테일이 복잡한 마크업으로 바뀔 수 있습니다.

변환 후 최적화를 생략하기

생성된 SVG는 중간 결과로 생각해야 합니다. 배포하기 전에 최적화하세요.

권장 사항

• -가능하면 원본 로고나 아이콘 내보내기 파일을 사용합니다.
• -윤곽이 선명하고 색상이 적은 PNG를 선택합니다.
• -변환 전에 불필요한 여백을 자릅니다.
• -트레이싱 전에 노이즈가 많은 배경을 제거합니다.
• -매우 단순한 경우가 아니라면 스크린샷을 변환하지 않습니다.
• -작은 크기와 큰 크기에서 결과를 확인합니다.
• -변환한 SVG를 최적화합니다.
• -비교와 대체 사용을 위해 PNG 원본을 보관합니다.

실무 작업 순서

1. 1
   PNG 내용이 도형 중심인지 먼저 판단합니다.
2. 2
   여백을 자르고 배경 노이즈를 제거합니다.
3. 3
   먼저 색상을 유지하는 트레이스 모드로 PNG를 변환합니다.
4. 4
   가장자리, 내부 빈 영역, 투명도, 색상 경계를 확인합니다.
5. 5
   생성된 SVG를 최적화합니다.
6. 6
   원본 PNG와 파일 크기 및 시각 품질을 비교합니다.

생성된 SVG가 PNG보다 크거나 부정확하거나 유지보수하기 어렵다면 래스터 파일을 그대로 사용하세요. PNG에서 SVG로 변환하는 작업은 벡터 결과가 실제로 더 사용하기 쉬울 때만 의미가 있습니다.

SVGKIT 팁

SVGKIT 인사이트

자주 묻는 질문

모든 PNG를 SVG로 변환할 수 있나요?

기술적으로는 많은 PNG를 트레이스할 수 있지만 모든 결과가 유용한 것은 아닙니다. 로고, 아이콘, 단순 그래픽이 가장 적합하며 사진과 스크린샷은 대체로 좋지 않은 결과를 만듭니다.

PNG의 투명 영역도 SVG에서 투명하게 유지되나요?

투명한 부분은 개념적으로 유지할 수 있지만 변환된 SVG는 도형으로 구성됩니다. 변환 후에도 가장자리와 투명 영역을 직접 확인해야 합니다.

PNG를 SVG로 바꾸면 항상 파일이 작아지나요?

아닙니다. 단순한 아이콘은 더 작아질 수 있지만 복잡한 PNG는 트레이싱 후 훨씬 커질 수 있습니다.

PNG에 포함된 글자를 SVG로 변환해야 하나요?

글자가 로고나 그래픽의 일부이고 편집할 필요가 없을 때만 고려하세요. 선택, 접근성, 번역이 필요한 글자라면 HTML의 실제 텍스트를 사용하는 것이 좋습니다.

다음에는 어떤 문서를 읽어야 하나요?

래스터와 벡터의 차이를 이해하려면 '래스터와 벡터'를 읽고, 생성된 파일을 정리하려면 'SVG 최적화'를 확인하세요.