WebP를 SVG로
WebP를 SVG로 변환: 최신 웹 이미지를 벡터화
투명 WebP와 손실 WebP를 포함한 WebP 이미지를 확대 가능한 SVG 패스로 바꿉니다. 알파는 그대로 이어지고, 그라데이션 단계를 높이면 손실 WebP 특유의 번짐을 하나로 묶을 수 있습니다.
새 파일의 기본값을 편집하고 있습니다
미리보기
WebP란?
WebP는 Google이 개발한 최신 래스터 이미지 형식으로, 손실 압축과 무손실 압축을 모두 지원하고 완전한 알파 투명도도 지원합니다. 비슷한 품질에서 같은 내용의 PNG나 JPG보다 보통 25~35% 작아 웹 전송에 널리 쓰입니다.
SVG란?
SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.
SVG는 웹의 표준 벡터 형식입니다. 최신 브라우저가 모두 기본으로 지원하고, CSS로 스타일을 지정할 수 있으며, JavaScript나 SMIL로 애니메이션도 적용할 수 있습니다. 같은 내용의 래스터 이미지에 비해 파일 크기도 대체로 훨씬 작습니다.
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는 트레이싱할 때 PNG처럼 동작해서 100 KB 아이콘은 보통 5~30 KB의 SVG가 됩니다. 손실 WebP는 JPG와 같아서 사진풍 300 KB WebP는 세부가 단순해진 100~400 KB의 SVG가 됩니다. 어느 경우든 투명도는 SVG로 이어집니다.
SVG가 원본 WebP보다 나은 경우
WebP가 로고, 스티커, 아이콘, 특히 투명한 것이라면 SVG로 변환하세요. 벡터가 되면 확대하고 색을 바꾸고 스타일을 주기가 쉬워집니다. SVG는 HTML에 그대로 넣을 수 있어서 별도의 WebP 파일을 내려받을 때와 달리 요청이 한 번 줄어듭니다.
원본 WebP를 그대로 써야 하는 경우
사진이나, 확대 가능성보다 전송량이 더 중요한 이미지는 WebP로 두세요. 복잡한 그림에서는 WebP의 손실 모드가 같은 내용의 SVG보다 작은 것이 보통이고, 브라우저의 디코딩도 패스가 많은 SVG보다 훨씬 빠릅니다.
품질 절충
무손실 WebP는 깔끔하게 트레이싱되어 원본이 허락하는 만큼 SVG도 또렷합니다. 손실 WebP에는 미묘한 번짐이 있어 트레이서가 여분의 색 영역으로 읽을 수 있습니다. 그라데이션 단계를 높여 묶으세요. 투명도는 반투명 픽셀까지 포함해 그대로 유지됩니다.
WebP를 SVG로 온라인에서 변환하는 방법
- 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
- 출력 설정(크기, DPI, 배경, 품질, 트레이싱 세부)을 지정하면 미리보기가 그 자리에서 갱신됩니다.
- '모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.
개인정보: 파일은 브라우저를 벗어나지 않습니다
파일이 기기 밖으로 나가는 일은 없습니다. 변환은 JavaScript와 WebAssembly를 이용해 전부 브라우저 안에서 실행됩니다. 업로드도 서버 처리도 없으므로 파일에 관한 정보가 어디로도 전송되지 않습니다.
아무것도 업로드되지 않으므로 대외비 로고, 사내 문서, 공개 전 고객 작업물에도 안심하고 쓸 수 있습니다. 사용하는 동안 기기에 캐시되므로 첫 방문 이후에는 네트워크 연결이 없어도 동작합니다.
자주 묻는 질문
WebP의 투명도가 SVG로 이어지나요?
네. WebP는 완전한 알파 투명도를 지원하며, 트레이서는 투명한 부분을 SVG 출력에서도 투명하게 유지합니다. 그래서 결과가 어떤 배경 위에도 깔끔하게 얹힙니다.
WebP에는 컬러와 흑백 중 어느 모드를 써야 하나요?
로고, 일러스트, 여러 채우기가 있는 것에는 컬러가 가장 좋습니다. 흑백은 선화나 스캔한 그림을 깔끔한 실루엣으로 만들어 줍니다. 흑백 임계값 슬라이더로 검정과 흰색의 경계를 고를 수 있습니다.
SVG가 원본 WebP보다 작아지나요?
단순한 그래픽(로고, 아이콘)이라면 대체로 작아지고, 게다가 SVG는 품질을 잃지 않고 확대할 수 있습니다. 사진풍 WebP에서는 트레이싱된 도형마다 패스가 늘어나기 때문에 SVG가 더 커질 수 있습니다. '경량' 프리셋을 쓰거나 노이즈 제거를 높여 SVG를 작게 유지하세요.