SVG를 WebP로
SVG를 완전한 알파 투명도의 WebP로 변환
SVG를 최신 WebP로 내보냅니다. 비슷한 품질에서 PNG보다 작으면서 완전한 알파 투명도를 지원합니다. 빠르게 불러오는 실서비스 에셋이 필요한 웹 개발자를 위한 기능입니다.
새 파일의 기본값을 편집하고 있습니다
미리보기
SVG란?
SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.
SVG는 웹의 표준 벡터 형식입니다. 최신 브라우저가 모두 기본으로 지원하고, CSS로 스타일을 지정할 수 있으며, JavaScript나 SMIL로 애니메이션도 적용할 수 있습니다. 같은 내용의 래스터 이미지에 비해 파일 크기도 대체로 훨씬 작습니다.
WebP란?
WebP는 Google이 개발한 최신 래스터 이미지 형식으로, 손실 압축과 무손실 압축을 모두 지원하고 완전한 알파 투명도도 지원합니다. 비슷한 품질에서 같은 내용의 PNG나 JPG보다 보통 25~35% 작아 웹 전송에 널리 쓰입니다.
SVG와 래스터 형식 비교
벡터 이미지(SVG)와 래스터 이미지(PNG, JPG)는 쓰임새가 다릅니다. 이미지를 어디에 쓸지에 따라 알맞은 형식이 정해집니다.
| 항목 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 확대/축소 | 해상도에 구애받지 않음 | 확대하면 흐려짐 | 고정 크기로 미리 렌더링 |
| 파일 크기 | 도형과 아이콘은 작음 | 해상도에 따라 커짐 | 크기별 이미지의 묶음 |
| 편집 | 텍스트나 벡터 도구로 편집 가능 | 픽셀 단위 편집만 가능 | 크기마다 편집 후 다시 묶음 |
| 애니메이션 | CSS, SMIL, JavaScript | 제한적 (APNG / GIF) | 지원 안 함 |
| 투명도 | 지원 | PNG 지원, JPG 미지원 | 지원 (PNG 기반) |
SVG를 WebP로 변환해야 하는 경우
WebP는 PNG 수준의 투명도를 JPG 수준의 파일 크기로 제공하며, 눈에 보이는 품질이 비슷할 때 PNG보다 25~35%, JPG보다 10~25% 작습니다. 최신 웹사이트나 앱에 이미지를 실을 때는 SVG를 WebP로 변환하세요. 현행 브라우저는 모두 지원하며(Chrome, Firefox, Safari 14 이상, Edge), 체감 품질 저하 없이 전송량을 줄일 수 있습니다.
SVG에서 WebP로: 파일 크기와 품질의 균형
파일 크기
WebP는 눈에 보이는 품질이 비슷할 때 같은 내용의 PNG보다 25~35%, JPG보다 10~25% 작은 것이 보통입니다. PNG로 내보내면 800 KB가 되는 1920×1080 SVG는 WebP로는 500 KB 정도에 들어가며 완전한 알파 투명도도 유지됩니다.
WebP가 알맞은 경우
최신 웹 전송에는 WebP가 가장 좋습니다. Chrome, Firefox, Safari(14 이상), Edge가 모두 지원합니다. 사이트 아이콘, 히어로 이미지, 제품 사진, 일러스트처럼 전송량이 중요하고 보는 환경을 파악할 수 있는 에셋에 쓰세요.
WebP 대신 SVG를 그대로 써야 하는 경우
에셋이 작거나, 원래 벡터이거나(아이콘, 로고, 도표), 확대와 애니메이션이 필요하다면 SVG로 두세요. SVG는 HTML에 그대로 넣을 수 있고 아이콘 정도의 내용이라면 WebP보다도 작은 것이 보통입니다. WebP 지원이 확실하지 않은 CMS나 메일 클라이언트가 상대일 때도 SVG로 두세요.
품질 절충
WebP에는 손실 모드와 무손실 모드가 모두 있습니다. 손실 0.9는 거의 모든 내용에서 무손실과 구별되지 않습니다. 손실 0.7에서는 또렷한 경계에 약간의 번짐이 생기지만 JPG만큼 두드러지지는 않습니다. 완전한 알파 투명도는 두 모드 모두에서 유지됩니다. 아이콘과 로고에는 무손실을, 사진과 그라데이션에는 손실을 고르세요.
SVG를 WebP로 온라인에서 변환하는 방법
- 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
- 출력 설정(크기, DPI, 배경, 품질, 트레이싱 세부)을 지정하면 미리보기가 그 자리에서 갱신됩니다.
- '모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.
개인정보: 파일은 브라우저를 벗어나지 않습니다
파일이 기기 밖으로 나가는 일은 없습니다. 변환은 JavaScript와 WebAssembly를 이용해 전부 브라우저 안에서 실행됩니다. 업로드도 서버 처리도 없으므로 파일에 관한 정보가 어디로도 전송되지 않습니다.
아무것도 업로드되지 않으므로 대외비 로고, 사내 문서, 공개 전 고객 작업물에도 안심하고 쓸 수 있습니다. 사용하는 동안 기기에 캐시되므로 첫 방문 이후에는 네트워크 연결이 없어도 동작합니다.
자주 묻는 질문
WebP가 투명도를 지원하나요?
네. WebP는 알파 채널로 완전한 투명도를 지원하므로 투명한 부분이 있는 SVG도 PNG와 똑같이 다룹니다. 내보낼 때 '투명' 배경을 고르세요.
PNG 대신 WebP를 써야 하는 때는 언제인가요?
비슷한 품질에서 WebP 파일은 같은 내용의 PNG보다 보통 25~35% 작으면서 투명도 지원도 같습니다. 웹에는 아주 좋은 선택입니다. Chrome, Firefox, Safari, Edge 등 주요 브라우저는 모두 지원합니다.
WebP에 품질 설정이 있나요?
네. JPG 품질을 조절하는 것과 같은 슬라이더가 WebP에도 적용되며, WebP는 손실 모드와 준무손실 모드를 모두 지원합니다. 대부분의 내용에서는 0.9 언저리가 무난합니다.