PNG를 SVG로
온라인 벡터라이저를 사용하여 PNG를 SVG로 변환
PNG 로고, 아이콘, 일러스트레이션 및 라인 아트를 확장 가능한 SVG 경로로 추적합니다. 투명한 영역은 깨끗하게 유지되며 세부 사항 및 노이즈 감소를 조정하기 전에 풀 컬러 또는 흑백 추적을 선택할 수 있습니다.
새 파일의 기본값을 편집하고 있습니다
미리보기
미리보기가 없습니다. 파일을 추가하고 선택하면 결과가 표시됩니다.
아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.
PNG란?
PNG(Portable Network Graphics)는 알파 채널로 완전한 투명도를 지원하는 무손실 래스터 이미지 형식입니다. 투명 PNG는 아이콘, 스크린샷, 일러스트처럼 또렷한 경계나 투명한 배경이 필요한 이미지에 가장 적합합니다.
SVG란?
SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.
SVG는 웹 표준 벡터 형식입니다. 모든 최신 브라우저가 기본적으로 지원하며 CSS로 스타일을 지정하거나 JavaScript 또는 SMIL로 애니메이션을 적용할 수 있습니다. 로고, 아이콘, 일러스트레이션에는 대체로 효율적이지만 복잡한 SVG는 파일이 커질 수 있습니다.
SVG와 래스터 형식 비교
벡터 이미지(SVG)와 래스터 이미지(PNG, JPG)는 쓰임새가 다릅니다. 이미지를 어디에 쓸지에 따라 알맞은 형식이 정해집니다.
| 항목 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 확대/축소 | 해상도에 구애받지 않음 | 확대하면 흐려짐 | 고정 크기로 미리 렌더링 |
| 파일 크기 | 도형과 아이콘은 작음 | 해상도에 따라 커짐 | 크기별 이미지의 묶음 |
| 편집 | 텍스트나 벡터 도구로 편집 가능 | 픽셀 단위 편집만 가능 | 크기마다 편집 후 다시 묶음 |
| 애니메이션 | CSS, SMIL, JavaScript | 제한적 (APNG / GIF) | 지원 안 함 |
| 투명도 | 지원 | PNG 지원, JPG 미지원 | 지원 (PNG 기반) |
PNG를 SVG로 변환해야 하는 경우
로고, 아이콘, 일러스트를 어떤 크기에서도 깔끔하게 확대해야 한다면 PNG를 SVG로 변환하세요. PNG를 벡터화하면 인쇄 해상도에서도 고DPI 디스플레이에서도 또렷한 출력이 나오고, 색을 바꾸고 크기를 조정하고 애니메이션을 적용할 수 있는 편집 가능한 파일이 됩니다. 색이 단순하고 경계가 또렷한 PNG에서 가장 좋은 결과가 나옵니다. 복잡한 사진도 트레이싱할 수 있지만 SVG가 커집니다.
PNG에서 SVG로: 파일 크기와 품질의 균형
파일 크기
SVG 파일 크기는 PNG의 픽셀 크기뿐만 아니라 경로의 수와 복잡성에 따라 달라집니다. 평면 로고나 아이콘은 종종 컴팩트한 SVG가 되는 반면, 사진은 수천 개의 모양과 소스보다 큰 파일을 생성할 수 있습니다. 일반적으로 색상 수가 적고 노이즈 감소가 강력하며 경로가 단순할수록 출력 크기가 줄어듭니다.
SVG가 원본 PNG보다 나은 경우
에셋을 여러 크기로 보여 줘야 할 때(파비콘, 레티나 대응 아이콘, 인쇄 품질 로고)나 색을 바꾸거나 애니메이션을 적용하고 싶을 때는 SVG를 쓰세요. SVG는 텍스트로 편집할 수 있어서 디자인 시스템에 넘기는 것도 벡터 형식입니다.
원본 PNG를 그대로 써야 하는 경우
사진, 스크린샷, 안티앨리어싱이 적용된 UI 캡처는 PNG로 두세요. 픽셀 단위로 정확한 내용을 벡터화하면 원본 PNG보다 훨씬 큰 SVG가 되고, 트레이서는 노이즈와 미세한 그라데이션, 섬세한 안티앨리어싱을 뭉툭한 색 영역으로 뭉쳐 버립니다.
품질 절충
PNG는 무손실입니다. 모든 픽셀은 정확히 그려진 것과 같습니다. 벡터화는 대략적입니다. 추적기는 곡선을 색상 영역에 맞추므로 매우 얇은 획, 사진 그라데이션 및 디더링된 패턴을 부드럽게 하거나 단순화할 수 있습니다. 로고, 아이콘 및 라인 아트는 일반적으로 밀접하게 추적됩니다. 사진은 좀 더 양식화되거나 포스터화되어 보이는 경향이 있습니다.
PNG를 SVG로 온라인에서 변환하는 방법
- 1
파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
- 2
출력 설정(크기, DPI, 배경, 품질, 트레이싱 세부)을 지정하면 미리보기가 그 자리에서 갱신됩니다.
- 3
'모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.
개인정보: 파일은 브라우저를 벗어나지 않습니다
변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.
로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.
자주 묻는 질문
PNG를 벡터화하면 투명도가 유지되나요?
SVG 출력에서 투명한 영역은 깨끗하게 유지될 수 있으므로 PNG는 단색 배경이 없는 로고 및 아이콘에 유용한 소스가 됩니다. 추적은 여전히 근사치이므로 미리보기에서 부드럽거나 반투명한 가장자리를 검사하세요.
어떤 PNG가 벡터화에 잘 맞나요?
색이 단순하고 경계가 또렷하며 색 수가 적은 PNG(로고, 아이콘, 선화, 스티커)는 작고 깔끔한 SVG가 됩니다. 세밀한 사진도 처리되지만 파일이 커집니다. 그럴 때는 노이즈 제거를 높이고 색상 정밀도를 낮춰 SVG를 다루기 쉽게 유지하세요.
컬러 모드와 흑백 중 무엇을 써야 하나요?
로고, 일러스트, 여러 채우기가 있는 것에는 컬러를 고르세요. 선화, 스캔한 그림, 서명처럼 깔끔한 단색 실루엣으로 만들고 싶은 것에는 흑백을 고르세요. 흑백 임계값 슬라이더로 검정과 흰색의 경계를 조절할 수 있습니다.