SVG를 WebP로
투명하게 온라인으로 SVG를 WebP로 변환하세요
조정 가능한 품질과 전체 알파 투명도를 갖춘 소형 WebP 이미지를 생성합니다. 치수와 배경을 설정하고, 최대 40개의 SVG 파일을 변환하고, 전체 작업을 브라우저에 보관하세요.
새 파일의 기본값을 편집하고 있습니다
미리보기
미리보기가 없습니다. 파일을 추가하고 선택하면 결과가 표시됩니다.
아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.
SVG란?
SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.
SVG는 웹 표준 벡터 형식입니다. 모든 최신 브라우저가 기본적으로 지원하며 CSS로 스타일을 지정하거나 JavaScript 또는 SMIL로 애니메이션을 적용할 수 있습니다. 로고, 아이콘, 일러스트레이션에는 대체로 효율적이지만 복잡한 SVG는 파일이 커질 수 있습니다.
WebP란?
WebP는 Google에서 개발한 최신 래스터 이미지 형식으로 손실 및 무손실 압축과 전체 알파 투명도를 모두 지원합니다. 좋은 시각적 품질을 유지하면서 컴팩트한 파일을 생성할 수 있어 웹 전달에 널리 사용됩니다.
SVG와 래스터 형식 비교
벡터 이미지(SVG)와 래스터 이미지(PNG, JPG)는 쓰임새가 다릅니다. 이미지를 어디에 쓸지에 따라 알맞은 형식이 정해집니다.
| 항목 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 확대/축소 | 해상도에 구애받지 않음 | 확대하면 흐려짐 | 고정 크기로 미리 렌더링 |
| 파일 크기 | 도형과 아이콘은 작음 | 해상도에 따라 커짐 | 크기별 이미지의 묶음 |
| 편집 | 텍스트나 벡터 도구로 편집 가능 | 픽셀 단위 편집만 가능 | 크기마다 편집 후 다시 묶음 |
| 애니메이션 | CSS, SMIL, JavaScript | 제한적 (APNG / GIF) | 지원 안 함 |
| 투명도 | 지원 | PNG 지원, JPG 미지원 | 지원 (PNG 기반) |
SVG를 WebP로 변환해야 하는 경우
최신 웹사이트나 앱을 위한 소형 래스터 이미지가 필요한 경우 SVG를 WebP로 변환하세요. WebP는 완전한 알파 투명도와 조정 가능한 품질 설정을 지원하므로 투명한 그래픽과 사진 스타일 아트웍 모두에 적합합니다. 현재 브라우저에서 광범위하게 지원되지만 파일을 수신하는 CMS, 이메일 클라이언트 또는 이전 애플리케이션의 요구 사항을 확인하세요.
SVG에서 WebP로: 파일 크기와 품질의 균형
파일 크기
WebP는 동일한 치수에 대해 PNG보다 작은 파일을 생성하는 경우가 많지만 결과는 아트워크 및 품질 설정에 따라 다릅니다. JPG와 달리 완전한 알파 투명도를 유지할 수 있어 투명한 영역이 있는 컴팩트 웹 그래픽에 유용합니다.
WebP가 알맞은 경우
WebP는 최신 웹 전달을 위한 강력한 선택이며 현재 브라우저에서 널리 지원됩니다. 대역폭이 중요하고 대상이 WebP를 허용하는 경우 사이트 그래픽, 제품 사진 및 일러스트레이션에 사용하십시오.
WebP 대신 SVG를 그대로 써야 하는 경우
에셋이 작거나, 원래 벡터이거나(아이콘, 로고, 도표), 확대와 애니메이션이 필요하다면 SVG로 두세요. SVG는 HTML에 그대로 넣을 수 있고 아이콘 정도의 내용이라면 WebP보다도 작은 것이 보통입니다. WebP 지원이 확실하지 않은 CMS나 메일 클라이언트가 상대일 때도 SVG로 두세요.
품질 절충
이 변환기는 조정 가능한 품질 설정을 갖춘 브라우저의 WebP 인코더를 사용합니다. 품질이 높을수록 더 많은 디테일이 유지됩니다. 품질이 낮을수록 일반적으로 파일 크기가 작아지지만 가장자리가 부드러워질 수 있습니다. 브라우저가 WebP 내보내기를 지원하는 경우 전체 알파 투명도가 유지됩니다.
SVG를 WebP로 온라인에서 변환하는 방법
- 1
파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
- 2
출력 설정(크기, DPI, 배경, 품질, 트레이싱 세부)을 지정하면 미리보기가 그 자리에서 갱신됩니다.
- 3
'모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.
개인정보: 파일은 브라우저를 벗어나지 않습니다
변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.
로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.
자주 묻는 질문
WebP가 투명도를 지원하나요?
네. WebP는 알파 채널로 완전한 투명도를 지원하므로 투명한 부분이 있는 SVG도 PNG와 똑같이 다룹니다. 내보낼 때 '투명' 배경을 고르세요.
PNG 대신 WebP를 써야 하는 때는 언제인가요?
최신 웹사이트나 앱의 압축 및 알파 투명도를 조정하려면 WebP를 사용하세요. PNG보다 작은 파일을 생성하는 경우가 많지만 저장 정도는 이미지 및 품질 설정에 따라 다릅니다. 웹 외부에서 사용하기 전에 대상이 WebP를 허용하는지 확인하세요.
WebP에 품질 설정이 있나요?
그렇습니다. 슬라이더는 브라우저의 WebP 인코더에서 요청한 품질을 제어합니다. 값이 높을수록 더 많은 세부 정보가 유지됩니다. 값이 낮을수록 일반적으로 더 작은 파일이 생성됩니다. 미리보기를 사용하여 아트워크에 가장 적합한 균형을 선택하세요.