SVG 출력이 실제 벡터 파일이 되나요?

이 도구는 래스터 이미지를 추적하여 벡터 경로를 생성합니다. 결과는 단순한 그래픽, 로고 및 라인 아트에서 가장 잘 나타납니다. 사진은 복잡한 경로를 생성하므로 예상한 대로 보이지 않을 수 있습니다.

SVG가 다른 이미지 형식과 다른 점은 무엇입니까?

SVG는 벡터 형식입니다. 이미지는 픽셀이 아닌 수학적 모양으로 설명됩니다. 즉, SVG 파일은 품질 저하 없이 어떤 크기로든 확장할 수 있으며 일반적으로 로고 및 아이콘과 같은 그래픽용 래스터 이미지보다 훨씬 작습니다.

알아야 할 제한 사항이 있나요?

최대 50MB의 파일이 지원됩니다. 매우 크거나 복잡한 파일은 처리하는 데 시간이 더 오래 걸릴 수 있습니다. 모든 변환은 브라우저에서 이루어지므로 처리 속도는 장치에 따라 다릅니다.

변환 중에 내 이미지는 비공개로 유지되나요?

예. PNG 파일은 Canvas API 및 JavaScript를 사용하여 브라우저 내에서 완전히 처리됩니다. 아무 서버에도 업로드되지 않습니다. 파일은 장치에서 변환기로 직접 이동한 다음 다시 장치로 돌아옵니다.

Illustrator 또는 Inkscape에서 추적을 편집할 수 있습니까?

예. 출력은 경로 요소가 포함된 표준 SVG입니다. Illustrator와 Inkscape 모두 기본적으로 열리며 경로를 편집하고, 색상을 변경하고, 결과를 다듬을 수 있습니다.

내 PNG가 서버에 업로드됩니까?

아니요. 추적은 imagetracerjs를 사용하여 브라우저에서 발생합니다. 파일은 장치를 떠나지 않습니다.

내 SVG 파일이 왜 큰가요?

일반적으로 원본 이미지에 색상이 너무 많거나 미세한 디테일이 너무 많기 때문입니다. 색상 수를 줄이거나, 경로 단순화를 늘리거나, 더 깔끔한 형상을 가진 다른 소스 이미지를 사용해 보십시오.

투명도를 사용하여 PNG를 추적할 수 있나요?

예. 투명한 픽셀은 SVG에서 경로가 없는 영역이 됩니다. SVG가 배경색으로 렌더링되면 투명한 배경이 유지됩니다.

PNG로 SVG 벡터라이저

이 도구에 대하여

PNG를 SVG로 변환하는 것은 기본적으로 형식 변경이 아닌 추적 작업입니다. PNG는 픽셀을 저장합니다. SVG는 기하학적 기본 요소를 저장합니다. 픽셀 그리드에서 확장 가능한 벡터 경로로 이동하려면 비트맵을 해석하고 비슷한 색상의 영역 주위에 대략적인 모양을 그려야 합니다. 결과는 실제로 확장 가능합니다. 픽셀화 없이 자유롭게 크기를 조정할 수 있지만 소스를 완벽하게 재현하지는 않습니다. 모든 픽셀 수준의 색상 변화가 모양이 되어 목적에 맞지 않는 거대한 SVG를 생성하기 때문에 사진 콘텐츠는 제대로 추적되지 않습니다. 로고, 아이콘, 라인 아트 및 고대비 그래픽은 경계가 잘 정의된 소수의 색상 영역을 포함하므로 깔끔하게 추적됩니다.

이 변환기는 potrace와 유사한 벡터 추적 알고리즘의 JavaScript 포트인 imagetracerjs 라이브러리를 사용합니다. PNG는 RGBA 비트맵으로 디코딩되고, 비트맵은 구성 가능한 팔레트를 사용하여 색상 영역으로 분할되고, 각 영역의 경계는 경로로 추적되고, 경로는 베지어 근사법을 사용하여 단순화되고, 결과 경로는 SVG 경로 요소로 방출됩니다. 전체 파이프라인은 서버 업로드 없이 브라우저에서 실행됩니다.

추적 매개변수는 충실도와 파일 크기 간의 균형을 제어합니다. 더 많은 색상과 더 미세한 세부 묘사는 소스와 더 밀접하게 일치하는 더 큰 SVG를 생성합니다. 더 적은 수의 색상과 더 거친 추적은 더 스타일화된 느낌을 지닌 더 작은 SVG를 생성합니다. 기본값은 로고와 아이콘에 맞게 조정됩니다. 복잡한 이미지는 설정이 조정된 추적 패스의 이점을 누릴 수도 있고 단순히 벡터화에 적합한 후보가 아닐 수도 있습니다.

PNG를 SVG로 변환하는 이유

PNG를 벡터화하는 것은 원래 해상도 이상으로 이미지 크기를 조정해야 할 때 가장 유용합니다. 특히 로고는 적당한 크기의 PNG로 도착하는 경우가 많으며 광고판, 레티나 디스플레이 및 대형 인쇄물에 또렷하게 표시되어야 합니다. 벡터 트레이스는 품질 손실 없이 확장되는 SVG를 생성합니다. 트레이드오프는 원본 픽셀에 대한 충실도입니다.

또한 SVG는 색상이 적고 평평한 영역이 넓은 그래픽의 경우 PNG보다 훨씬 더 컴팩트합니다. 256×256 크기의 PNG 아이콘은 8KB일 수 있습니다. 2개 또는 3개 색상을 포함하는 해당 SVG는 1KB 미만인 경우가 많습니다. 웹 프런트엔드에 제공되는 UI 아이콘 라이브러리의 경우 벡터 버전은 번들 크기를 줄이고 모든 디스플레이 밀도의 선명도를 향상시킵니다.

사용 방법

PNG를 삭제하고, 추적 설정을 선택하고, SVG를 생성하세요.

PNG 업로드: 파일을 업로드 영역으로 드래그하거나 클릭하여 찾아보세요. 로고, 아이콘, 라인아트, 간단한 일러스트레이션 등 가장자리가 선명하고 고유한 색상이 적은 PNG에서 최상의 결과를 얻을 수 있습니다. 사진은 제대로 추적되지 않고 거대한 SVG를 생성합니다.
필요한 경우 추적 옵션을 조정하세요.: 색상 수는 출력에 나타나는 고유 색상 수를 제어합니다. 경로 단순화(ltres 또는 qtres라고도 함)는 알고리즘이 모서리를 얼마나 적극적으로 매끄럽게 하는지 제어합니다. 정밀도가 높을수록 소스에 더 가까운 SVG가 생성되지만 더 많은 경로 데이터가 포함됩니다.
추적 및 미리보기: imagetracerjs 알고리즘은 색상 양자화, 가장자리 감지, 윤곽선 추적 및 베지어 피팅을 통해 실행됩니다. 추적 시간은 이미지 크기와 색상 수에 따라 달라집니다. 4가지 색상의 256×256 로고가 1초 이내에 추적됩니다. 16개 색상의 1024×1024 이미지는 몇 초가 걸릴 수 있습니다.
SVG 다운로드: SVG를 장치에 저장하십시오. 파일에는 경로 요소가 포함된 XML 마크업이 포함되어 있습니다. 텍스트 편집기에서 열어서 결과를 검사하거나 직접 조정할 수 있습니다.

일반적인 사용 사례

저해상도 PNG에서 로고 다시 만들기 — 로고의 원본 벡터 소스가 손실된 경우 고품질 PNG에서 추적하면 추가 손실 없이 확장 가능한 사용 가능한 벡터 마스터가 생성됩니다.
확장 가능한 UI 아이콘 생성 — PNG 마스터에서 추적된 아이콘은 다중 해상도 PNG 스프라이트 시트를 대체하여 모든 크기로 깔끔하게 표시되는 단일 SVG로 제공될 수 있습니다.
레이저 절단 또는 CNC용 작품 준비 — 이러한 머신은 벡터 경로를 사용합니다. PNG 그림을 추적하면 기계 컨트롤러가 기대하는 SVG 경로 데이터가 생성됩니다.
절단 가능한 비닐 디자인 만들기 — 스티커 및 비닐 절단기는 벡터 윤곽선에서 작동합니다. 추적은 PNG 모형을 절단 경로로 변환합니다.
Illustrator 또는 Inkscape에서 편집하기 위해 라인 아트 벡터화 — SVG로 가져온 트레이스는 모든 벡터 편집기에서 모양을 변경하거나 색상을 변경하거나 분할할 수 있는 편집 가능한 경로가 됩니다.

기술적인 세부사항

imagetracerjs는 다단계 파이프라인을 구현합니다. 색상 양자화는 k-평균 클러스터링 또는 중앙값 절단을 사용하여 비트맵을 고정된 색상 수로 줄입니다. 가장자리 감지는 영역 간의 픽셀 경계를 식별합니다. 등고선 추적은 경계를 따라 닫힌 다각형을 생성합니다. 선 및 곡선 피팅은 경로 데이터를 줄이기 위해 베지어 곡선으로 다각형을 근사화합니다.

가장 중요한 알고리즘 매개변수는 색상 수(일반적으로 4~32개), pathomit(이 픽셀 수보다 짧은 경로는 노이즈로 폐기됨), ltres(선 허용 오차 - 새 세그먼트로 분할되기 전에 가장자리가 벗어날 수 있는 거리) 및 qtres(2차 곡선 허용 오차 - 곡선이 얼마나 적극적으로 부드럽게 처리되는지)입니다. 기본값은 로고에 적합합니다. 복잡한 이미지는 이미지별 조정을 통해 이점을 얻을 수 있습니다.

출력은 경로 요소가 포함된 표준 SVG 1.1입니다. 각 색상 영역은 채우기 속성이 있는 하나의 경로가 됩니다. 결과 파일은 모든 브라우저, 벡터 편집기 또는 SVG 인식 디자인 도구에서 열립니다. 파일 크기는 주로 경로 수와 노드 밀도에 따라 달라집니다. 일반적인 추적 로고는 1~10KB입니다.

모범 사례

가지고 있는 최고 품질의 PNG로 시작하세요. — 추적은 모든 소스 아티팩트를 확대합니다. 깨끗한 1024×1024 PNG는 256×256 손실이 있는 업스케일보다 훨씬 더 나은 추적을 생성합니다.
사진 추적 방지 — 사진 콘텐츠에는 수천 개의 작은 경로가 있는 SVG를 생성하는 수천 개의 미묘한 색상 변형이 있습니다. 결과는 엄청나고 유용하지 않습니다. 사진에는 다른 형식을 사용하십시오.
프로덕션 로고 결과를 수동으로 조정 — 추적 출력은 거의 완벽하지 않습니다. Illustrator 또는 Inkscape에서 SVG를 열고, 경로를 단순화하고, 모서리를 정렬하고, 최종 자산으로 사용하기 전에 아티팩트를 정리하세요.
추적 매개변수 반복 — 기본 트레이스에 노이즈가 너무 많으면 색상 수를 줄이고 스무딩을 늘리세요. 디테일이 손실되면 색상 수를 늘리고 스무딩을 줄이세요. 커밋하기 전에 결과를 비교하세요.

자주 묻는 질문

SVG 출력이 실제 벡터 파일이 되나요?: 이 도구는 래스터 이미지를 추적하여 벡터 경로를 생성합니다. 결과는 단순한 그래픽, 로고 및 라인 아트에서 가장 잘 나타납니다. 사진은 복잡한 경로를 생성하므로 예상한 대로 보이지 않을 수 있습니다.
SVG가 다른 이미지 형식과 다른 점은 무엇입니까?: SVG는 벡터 형식입니다. 이미지는 픽셀이 아닌 수학적 모양으로 설명됩니다. 즉, SVG 파일은 품질 저하 없이 어떤 크기로든 확장할 수 있으며 일반적으로 로고 및 아이콘과 같은 그래픽용 래스터 이미지보다 훨씬 작습니다.
알아야 할 제한 사항이 있나요?: 최대 50MB의 파일이 지원됩니다. 매우 크거나 복잡한 파일은 처리하는 데 시간이 더 오래 걸릴 수 있습니다. 모든 변환은 브라우저에서 이루어지므로 처리 속도는 장치에 따라 다릅니다.
변환 중에 내 이미지는 비공개로 유지되나요?: 예. PNG 파일은 Canvas API 및 JavaScript를 사용하여 브라우저 내에서 완전히 처리됩니다. 아무 서버에도 업로드되지 않습니다. 파일은 장치에서 변환기로 직접 이동한 다음 다시 장치로 돌아옵니다.
Illustrator 또는 Inkscape에서 추적을 편집할 수 있습니까?: 예. 출력은 경로 요소가 포함된 표준 SVG입니다. Illustrator와 Inkscape 모두 기본적으로 열리며 경로를 편집하고, 색상을 변경하고, 결과를 다듬을 수 있습니다.
내 PNG가 서버에 업로드됩니까?: 아니요. 추적은 imagetracerjs를 사용하여 브라우저에서 발생합니다. 파일은 장치를 떠나지 않습니다.
내 SVG 파일이 왜 큰가요?: 일반적으로 원본 이미지에 색상이 너무 많거나 미세한 디테일이 너무 많기 때문입니다. 색상 수를 줄이거나, 경로 단순화를 늘리거나, 더 깔끔한 형상을 가진 다른 소스 이미지를 사용해 보십시오.
투명도를 사용하여 PNG를 추적할 수 있나요?: 예. 투명한 픽셀은 SVG에서 경로가 없는 영역이 됩니다. SVG가 배경색으로 렌더링되면 투명한 배경이 유지됩니다.

PNG로 SVG 벡터라이저

여기에 PNG/JPG를 드래그 앤 드롭하세요.

관련 도구

SVG에서 PNG로 변환기

PDF를 PNG로 변환기

PNG를 PDF로 변환기

JPG를 PNG로 변환기

이 도구에 대하여

PNG를 SVG로 변환하는 이유

사용 방법

일반적인 사용 사례

기술적인 세부사항

모범 사례

자주 묻는 질문

Related Articles

Image Format Guide: JPG vs PNG vs WebP vs SVG Explained

The Complete Guide to PDF Conversion: Methods, Tools, and Best Practices

Document Formats Explained: Word, PDF, TXT, and When to Use Each

Audio and Video Formats Explained: MP3, MP4, WAV, WebM, and Beyond

How to Convert Files Online Safely: Privacy and Security Guide

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk