UltKit

WebP SVG 변환

WebP는 픽셀로, SVG는 도형으로 이루어져 있으므로 둘 사이를 손실 없이 바꾸는 방법은 없습니다. 이 페이지는 WebP를 크기 조절, 색 변경, 커팅이 가능한 진짜 벡터 패스로 트레이싱하며, 로고·아이콘·단순한 일러스트에서 가장 잘 작동합니다.

이미지 SVG 변환

또는 JPG, JPEG, JFIF … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력
12

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

  1. 1

    WebP 업로드

    웹사이트에서 저장한 로고, 아이콘, 스티커를 추가하십시오. 파일당 95 MB, 최대 20개까지 가능합니다. 원본 이미지가 크고 깨끗할수록 트레이싱이 잘 됩니다.

  2. 2

    색상 수 정하기

    색상 수는 대부분의 로고에 충분한 12에서 시작합니다. 두 가지 색의 마크라면 줄이고, 단색 커팅 파일이 필요하면 색상 모드를 흑백으로 설정하십시오.

  3. 3

    SVG로 벡터 변환

    SVG로 벡터 변환을 누르고 파일을 다운로드하십시오. Inkscape, Illustrator, Figma, Cricut Design Space에서 열어 도형을 확인하십시오.

답변

WebP를 정말 SVG로 변환할 수 있습니까?

트레이싱으로만 가능합니다. WebP는 픽셀을, SVG는 도형을 저장합니다. 이 도구는 WebP의 색 영역을 벡터 패스로 다시 그립니다. 파일 이름만 바꾸거나 비트맵을 넣기만 하는 방식은 확대하면 여전히 흐려지는 SVG를 만듭니다.

WebP SVG 변환: 트레이싱과 임베딩의 차이

2010년 Google이 공개한 WebP는 래스터 형식으로, 웹에서 빠르게 전송하도록 압축한 색 픽셀의 격자입니다. 2001년부터 W3C 표준인 SVG는 선, 곡선, 채우기를 텍스트로 기술합니다. 앞의 것을 뒤의 것으로 바꾸는 방법은 전혀 다른 두 가지가 있는데, 무료 변환기 대부분은 도움이 되지 않는 쪽을 택합니다.

임베딩은 WebP를 base64 텍스트로 담은 SVG를 만듭니다. base64는 이미지를 약 3분의 1 키우며, 결과는 벡터라는 이름표만 붙은 비트맵입니다. 트레이싱은 이 페이지와 Potrace 알고리즘 기반인 Inkscape의 비트맵 추적 기능이 쓰는 방식으로, 색 영역을 읽어 패스로 기록합니다. 세밀한 디테일은 잃지만 결과는 진짜로 크기 조절과 편집이 가능합니다. 트레이싱 설정은 이미지 SVG 변환 가이드에서 모두 설명합니다.

트레이싱한 SVG와 WebP를 넣은 SVG: 각 파일로 할 수 있는 일

트레이싱한 SVGWebP를 감싼 SVG원본 WebP
어떤 배율에서도 선명함yesnono
Illustrator·Inkscape에서 도형 편집 가능yesnono
Cricut·레이저 커팅 패스로 사용 가능yesnono
사진 디테일 유지noyesyes
일반적인 파일 용량디테일이 많을수록 커짐WebP보다 약 ⅓ 큼가장 작음
  1. WebP 디코딩

    픽셀과 알파 채널을 읽고, 투명한 영역은 따로 제외합니다.

  2. 색상 묶기

    비슷한 픽셀을 선택한 색상 수만큼으로 합칩니다.

  3. 패스 그리기

    각 색 영역을 매끄러운 곡선으로 바꿔 최적화된 SVG로 기록합니다.

WEBP

WebP 이미지

WebP는 웹 페이지를 더 빨리 불러오도록 Google이 2010년에 공개한 이미지 형식입니다. 한 형식 안에서 손실과 무손실 압축, 알파 투명도, 애니메이션을 모두 지원합니다. 손실 WebP 파일은 비슷한 화질의 JPEG보다 보통 25–35% 작고, 무손실 WebP는 대개 PNG보다 작습니다. 현재 모든 브라우저가 지원하지만, 일부 오래된 데스크톱 소프트웨어, 인쇄 서비스, 업로드 양식은 여전히 받지 않습니다. Windows, macOS와 대부분의 최신 이미지 편집기에서 WebP 파일을 열 수 있습니다.

압축 방식
손실 또는 무손실
투명도
예
애니메이션
예
도입 연도
2010 · Google
WEBP 변환

SVG

SVG 벡터 그래픽(Scalable Vector Graphics)

SVG는 2001년 W3C가 표준화한 XML 기반 벡터 형식입니다. 픽셀 대신 도형, 패스, 텍스트를 기술하므로 어떤 크기에서도 선명하고, 로고와 아이콘은 보통 용량이 아주 작습니다. 투명도, CSS 스타일, 스크립트, 애니메이션을 지원하며 모든 브라우저가 기본으로 렌더링합니다. SVG는 사진에는 맞지 않고, 복잡한 일러스트는 렌더링이 느려질 수 있습니다. Illustrator, Inkscape, Figma와 브라우저에서 열고 편집할 수 있습니다.

압축 방식
–
투명도
예
애니메이션
예
도입 연도
2001 · W3C
SVG 변환

웹사이트에서 저장한 로고나 아이콘을 크기 조절, 편집, 커팅이 가능한 형태로 바꿔야 할 때 WebP SVG 변환을 찾으며, 이는 트레이싱으로만 가능합니다. 반대 방향은 웹용으로 단순히 래스터화하는 작업입니다.

웹사이트에서 저장한 WebP로 깔끔한 SVG 얻기

벡터로 바꾸고 싶은 WebP 파일은 대부분 사이트에서 내려받은 것이라, 페이지에 맞게 축소되고 손실 압축된 상태입니다. 가장자리의 압축 노이즈는 작은 잡티 도형이 되고, 이미지가 작으면 트레이서가 매끄러운 곡선을 찾을 픽셀이 부족합니다. 구할 수 있는 가장 큰 사본에서 시작하십시오. 해당 사이트의 보도 자료나 브랜드 페이지에 더 큰 버전이나 원본 SVG가 있는 경우가 많습니다.

곡선이 있는 로고라면 부드럽게를 기본값 근처로 두고, 직선 테두리의 기하학적 마크라면 곡선을 직선으로 설정하십시오. 트레이싱 후 남은 잡티는 편집 프로그램에서 지우십시오. 이미지를 확대할 필요 없이 어딘가에서 열리기만 하면 된다면 WebP PNG 변환이 더 빠르고 정확한 방법입니다.

WebP SVG 변환 자주 묻는 질문

다른 WebP SVG 변환기로 만든 파일은 왜 흐릿합니까?

상당수가 WebP를 SVG 안에 이미지로 넣고 확장자만 바꾸기 때문입니다. 파일은 SVG로 열리지만 여전히 픽셀이므로 확대하면 흐려지고 편집할 도형도 없습니다. 텍스트 편집기로 파일을 열어 보십시오. 긴 data:image 문자열이 보이면 트레이싱이 전혀 되지 않은 것입니다.

WebP 사진도 SVG로 변환할 수 있습니까?

가능하지만 결과는 포스터처럼 보입니다. 부드러운 그러데이션과 피부색이 평평한 색 띠로 바뀝니다. 사진에는 래스터 형식이 맞습니다. 사진은 WebP, JPG, PNG로 두고, 실제로 벡터가 필요한 로고, 윤곽, 일러스트만 트레이싱하십시오.

WebP의 투명 배경은 그대로 투명하게 남습니까?

그렇습니다. 투명한 픽셀에서는 도형이 만들어지지 않으므로 SVG에는 트레이싱한 그림 뒤에 아무것도 없습니다. 색이 있는 배경에 올릴 스티커나 로고라면 대개 바로 원하는 결과입니다.

WebP 로고는 색상을 몇 개로 트레이싱해야 합니까?

눈에 보이는 단색의 개수를 세고, 안티앨리어싱된 가장자리를 위해 2–3개를 더하십시오. 두 가지 색 로고는 4로 깔끔하게 트레이싱되고, 마스코트 일러스트는 16–24가 필요할 수 있습니다. 색이 너무 많으면 모든 가장자리를 따라 가느다란 조각 도형이 생깁니다.

만든 SVG를 Cricut이나 레이저 커터에 쓸 수 있습니까?

가능합니다. 트레이싱하는 주된 이유 중 하나입니다. Cricut Design Space는 SVG를 색상별 레이어로 나누어 불러오고, 레이저 소프트웨어는 패스를 커팅선이나 각인선으로 읽습니다. 커팅선 하나만 필요하다면 흑백과 윤곽선만을 함께 쓰십시오.

트레이싱한 SVG가 원래 로고보다 울퉁불퉁해 보이는 이유는 무엇입니까?

웹사이트에서 받은 저해상도 WebP는 너비가 100–200 px에 불과한 경우가 많아, 트레이서가 몇 개 안 되는 픽셀로 곡선을 추측해야 합니다. 더 큰 로고 사본을 찾거나 이미지 크기 늘리기로 먼저 키운 다음 다시 트레이싱하십시오.