PNG를 SVG로 변환.
PNG, JPG, WebP 이미지의 형태를 벡터 경로로 따라 그려 SVG를 만듭니다. 남길 색의 수와 가장자리를 얼마나 바짝 따라갈지 고르고, 원본과 비교한 뒤 SVG 코드를 복사하거나 파일을 내려받으세요. 로고, 아이콘, 평면 일러스트에 가장 잘 맞고, 브라우저 안에서 동작하므로 이미지가 업로드되지 않습니다.
로고, 아이콘, 평면 일러스트에 가장 잘 맞습니다. 사진은 작은 도형이 아주 많아지고 파일이 커집니다.
브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.
SVG를 PNG로 변환하기PNG를 SVG로 변환하는 방법
- 이미지를 고르거나 위의 상자에 끌어다 놓으세요. PNG, JPG, WebP를 지원합니다.
- 색 수를 정하세요. 2부터 24까지이며 기본값은 8입니다. 두 가지 색의 로고라면 2~3이면 충분합니다. 색이 많을수록 명암이 살지만 도형도 늘어납니다.
- 세밀도를 고르세요. '세밀하게'는 가장자리를 바짝 따라가고, '균형'은 대부분의 로고에 맞으며, '부드럽게'는 곡선이 둥글고 도형이 줄어듭니다.
- 변환한 뒤 SVG를 원본과 비교하고, 코드를 복사하거나
.svg파일을 내려받으세요.
알아 둘 점:
- 로고와 아이콘에 가장 잘 맞습니다. 따라 그리기는 단색 영역을 도형으로 바꿉니다. 사진은 수천 개의 작은 도형과 큰 파일이 되므로, 사진은 WebP나 JPG로 두세요.
- 큰 이미지. 따라 그리기 전에 긴 변을 1,000픽셀로 줄입니다. 로고에는 충분하고, SVG도 작게 유지됩니다.
- 원본이 아니라 따라 그린 결과입니다. 디자이너에게 로고의 SVG, AI, Figma 파일이 있다면 거기서 내보내는 편이 낫습니다. 따라 그리기는 비트맵밖에 없을 때 쓰세요.
Codex로 SVG 다듬기
따라 그린 SVG는 그대로 써도 되지만, Codex에게 맡기면 프로젝트에서 쓰기 더 편해집니다. 점을 줄이고, CSS로 바꿀 수 있는 한 가지 색으로 만들거나, 가져다 쓸 수 있는 컴포넌트로 만들 수 있습니다.
따라 그린 SVG 다듬기
이 SVG는 우리 로고를 따라 그린 것입니다. 모양은 그대로 두고 경로를 단순하게 만들고, [2px]보다 작은 도형은 지우고, 주 색상을 currentColor로 바꿔 CSS로 바꿀 수 있게 하고, 스크린 리더용 title을 추가해 주세요. 그런 다음 size 속성이 있는 [Logo]라는 [React] 컴포넌트로 만들어 주세요.
자주 묻는 질문
PNG SVG 변환기는 무료인가요?
네. 가입도, 워터마크도, 하루 사용 제한도 없습니다.
이미지가 업로드되나요?
아니요. 브라우저가 여러분의 기기에서 이미지를 따라 그리고 SVG를 만듭니다. 사이트는 도구가 사용되었다는 사실만 세고, 넣은 내용은 기록하지 않습니다.
SVG 파일이 왜 이렇게 큰가요?
사진이나 그라데이션처럼 색이 많거나 질감이 촘촘한 이미지일 가능성이 큽니다. 색 수를 줄이고 '부드럽게'를 고르면 결과 아래에 표시되는 도형 수가 줄어듭니다. 사진은 SVG 변환에 맞지 않으니 WebP를 쓰세요.
만든 SVG를 나중에 편집할 수 있나요?
네. 결과는 채워진 경로로 이루어진 평범한 SVG로, 도형마다 경로가 하나씩입니다. Figma, Illustrator, Inkscape에서 열거나 코드를 직접 고칠 수 있습니다.