WebP를 SVG로
온라인 벡터라이저를 사용하여 WebP를 SVG로 변환
WebP 로고, 아이콘, 일러스트레이션 및 기타 웹 그래픽을 확장 가능한 SVG 경로로 추적합니다. 컬러 또는 흑백 모드를 선택한 다음 소스의 디테일과 노이즈 감소를 조정합니다.
미리보기
미리보기가 없습니다. 파일을 추가하면 결과가 표시됩니다.
새 파일의 기본값을 편집하고 있습니다
단색 로고와 선화는 보통 더 깔끔하게 벡터화됩니다. 사진은 양식화된 패스가 되며 파일이 커질 수 있습니다. 세부 수준을 조정하고 결과를 확인하세요.
WebP란?
WebP는 Google에서 개발한 최신 래스터 이미지 형식으로 손실 및 무손실 압축과 전체 알파 투명도를 모두 지원합니다. 좋은 시각적 품질을 유지하면서 컴팩트한 파일을 생성할 수 있어 웹 전달에 널리 사용됩니다.
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 기반) |
WebP를 SVG로 변환해야 하는 경우
최신 웹 이미지를 로고, 아이콘, 인쇄 에셋으로 쓰고 싶다면 WebP를 SVG로 변환하세요. WebP의 손실 모드는 미묘한 번짐을 만들고 트레이서가 이를 따라갈 수 있으므로, 품질이 낮은 WebP라면 노이즈 제거를 높이세요. 투명 WebP는 깔끔하게 트레이싱되며 알파 채널은 출력에 그대로 이어집니다.
WebP에서 SVG로: 파일 크기와 품질의 균형
파일 크기
간단한 WebP 로고와 아이콘은 컴팩트 SVG 파일을 추적할 수 있습니다. 상세한 또는 사진 WebP 이미지는 특히 소스가 많은 색상이나 미묘한 그라데이션을 사용하는 경우 더 많은 모양을 만들고 더 큰 결과를 생성할 수 있습니다.
SVG가 원본 WebP보다 나은 경우
WebP가 로고, 스티커, 아이콘, 특히 투명한 것이라면 SVG로 변환하세요. 벡터가 되면 확대하고 색을 바꾸고 스타일을 주기가 쉬워집니다. SVG는 HTML에 그대로 넣을 수 있어서 별도의 WebP 파일을 내려받을 때와 달리 요청이 한 번 줄어듭니다.
원본 WebP를 그대로 써야 하는 경우
확장성보다 와이어의 컴팩트한 바이트가 더 중요한 사진이나 이미지용으로 WebP를 유지하십시오. WebP의 손실 모드는 일반적으로 복잡한 아트웍의 경우 동등한 SVG보다 작으며 수천 개의 경로를 포함하는 SVG보다 디코딩하는 것이 더 빠를 수 있습니다.
품질 절충
무손실 WebP는 깨끗하게 추적합니다. SVG는 소스가 허용하는 만큼 선명합니다. 손실이 있는 WebP는 추적 프로그램이 추가 색상 영역으로 읽을 수 있는 미묘한 평활화를 제공합니다. 병합하려면 그라디언트 단계를 올리세요. 투명한 영역은 깨끗하게 유지될 수 있지만 부드러운 반투명 가장자리는 추적 프로세스를 통해 근사화될 수 있습니다.
WebP를 SVG로 온라인에서 변환하는 방법
- 1
PNG, JPG, WebP 또는 지원되는 다른 이미지를 끌어다 놓거나 파일 선택을 클릭하세요.
- 2
벡터화 프리셋이나 색상 모드를 선택한 다음 결과를 확인하고 세부 수준을 조정하세요.
- 3
변환된 SVG를 다운로드하거나 준비된 여러 파일을 ZIP으로 묶어 다운로드하세요.
개인정보: 파일은 브라우저를 벗어나지 않습니다
변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.
로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.
자주 묻는 질문
WebP의 투명도가 SVG로 이어지나요?
WebP는 완전한 알파 투명도를 지원하며 SVG 출력에서 명확한 영역은 투명하게 유지될 수 있습니다. 추적은 경로를 사용하여 픽셀을 대략적으로 계산하므로 미리 보기에서 부드러운 반투명 가장자리를 검사합니다.
WebP에는 컬러와 흑백 중 어느 모드를 써야 하나요?
로고, 일러스트, 여러 채우기가 있는 것에는 컬러가 가장 좋습니다. 흑백은 선화나 스캔한 그림을 깔끔한 실루엣으로 만들어 줍니다. 흑백 임계값 슬라이더로 검정과 흰색의 경계를 고를 수 있습니다.
SVG가 원본 WebP보다 작아지나요?
단순한 그래픽(로고, 아이콘)이라면 대체로 작아지고, 게다가 SVG는 품질을 잃지 않고 확대할 수 있습니다. 사진풍 WebP에서는 트레이싱된 도형마다 패스가 늘어나기 때문에 SVG가 더 커질 수 있습니다. '경량' 프리셋을 쓰거나 노이즈 제거를 높여 SVG를 작게 유지하세요.