PNG를 SVG로

PNG를 SVG로 변환: 래스터 이미지를 벡터화

PNG 로고, 아이콘, 선화를 투명 배경을 유지한 채 해상도에 구애받지 않는 SVG 패스로 바꿉니다. 색이 단순하고 경계가 또렷한 이미지에 가장 적합합니다. 사진풍 PNG라면 노이즈 제거를 높이세요.

여기에 파일을 놓으세요

새 파일의 기본값을 편집하고 있습니다

프리셋

컬러 모드컬러흑백

미리보기

원본 보기

미리보기가 없습니다. 파일을 추가하고 선택하면 결과가 표시됩니다.

아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.

PNG란?

PNG(Portable Network Graphics)는 알파 채널로 완전한 투명도를 지원하는 무손실 래스터 이미지 형식입니다. 투명 PNG는 아이콘, 스크린샷, 일러스트처럼 또렷한 경계나 투명한 배경이 필요한 이미지에 가장 적합합니다.

SVG란?

SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.

SVG는 웹의 표준 벡터 형식입니다. 최신 브라우저가 모두 기본으로 지원하고, CSS로 스타일을 지정할 수 있으며, JavaScript나 SMIL로 애니메이션도 적용할 수 있습니다. 같은 내용의 래스터 이미지에 비해 파일 크기도 대체로 훨씬 작습니다.

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로: 파일 크기와 품질의 균형

파일 크기

단순한 PNG 로고(32×32~512×512)는 보통 5~30 KB이고, 벡터화하면 어떤 크기로도 확대되는 2~15 KB의 SVG가 됩니다. 사진풍 PNG(4000×3000에 4~8 MB)는 대략 50~300 KB의 SVG가 되어 원본보다 작아지지만 세부는 다듬어집니다. PNG에 단색 면이 많을수록 효과가 큽니다.

SVG가 원본 PNG보다 나은 경우

에셋을 여러 크기로 보여 줘야 할 때(파비콘, 레티나 대응 아이콘, 인쇄 품질 로고)나 색을 바꾸거나 애니메이션을 적용하고 싶을 때는 SVG를 쓰세요. SVG는 텍스트로 편집할 수 있어서 디자인 시스템에 넘기는 것도 벡터 형식입니다.

원본 PNG를 그대로 써야 하는 경우

사진, 스크린샷, 안티앨리어싱이 적용된 UI 캡처는 PNG로 두세요. 픽셀 단위로 정확한 내용을 벡터화하면 원본 PNG보다 훨씬 큰 SVG가 되고, 트레이서는 노이즈와 미세한 그라데이션, 섬세한 안티앨리어싱을 뭉툭한 색 영역으로 뭉쳐 버립니다.

품질 절충

PNG는 무손실이라 모든 픽셀이 그린 그대로입니다. 벡터화는 근사입니다. 트레이서가 색 영역에 곡선을 맞추기 때문에 아주 가는 선, 사진의 그라데이션, 디더 패턴은 다듬어지거나 계단처럼 됩니다. 로고, 아이콘, 선화라면 보기에 거의 같지만 사진은 포스터처럼 양식화된 느낌이 됩니다.

PNG를 SVG로 온라인에서 변환하는 방법

파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
출력 설정(크기, DPI, 배경, 품질, 트레이싱 세부)을 지정하면 미리보기가 그 자리에서 갱신됩니다.
'모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.

개인정보: 파일은 브라우저를 벗어나지 않습니다

파일이 기기 밖으로 나가는 일은 없습니다. 변환은 JavaScript와 WebAssembly를 이용해 전부 브라우저 안에서 실행됩니다. 업로드도 서버 처리도 없으므로 파일에 관한 정보가 어디로도 전송되지 않습니다.

아무것도 업로드되지 않으므로 대외비 로고, 사내 문서, 공개 전 고객 작업물에도 안심하고 쓸 수 있습니다. 사용하는 동안 기기에 캐시되므로 첫 방문 이후에는 네트워크 연결이 없어도 동작합니다.

자주 묻는 질문

PNG를 벡터화하면 투명도가 유지되나요?

네. PNG의 투명도는 트레이싱 중에도 유지됩니다. 원본의 투명한 부분은 SVG 출력에서도 투명하게 남으므로 벡터 로고나 아이콘이 어떤 배경 위에도 깔끔하게 얹힙니다.

어떤 PNG가 벡터화에 잘 맞나요?

색이 단순하고 경계가 또렷하며 색 수가 적은 PNG(로고, 아이콘, 선화, 스티커)는 작고 깔끔한 SVG가 됩니다. 세밀한 사진도 처리되지만 파일이 커집니다. 그럴 때는 노이즈 제거를 높이고 색상 정밀도를 낮춰 SVG를 다루기 쉽게 유지하세요.

컬러 모드와 흑백 중 무엇을 써야 하나요?

로고, 일러스트, 여러 채우기가 있는 것에는 컬러를 고르세요. 선화, 스캔한 그림, 서명처럼 깔끔한 단색 실루엣으로 만들고 싶은 것에는 흑백을 고르세요. 흑백 임계값 슬라이더로 검정과 흰색의 경계를 조절할 수 있습니다.