SVG는 확대해도 깨지지 않는 XML 기반 벡터 형식입니다. SVG는 최신 브라우저에서는 열리지만 프로그램이나 서비스에 따라 지원이 고르지 않습니다.
WebP는 JPG보다 작고 투명도·애니메이션까지 지원하는 웹용 형식입니다. SVG를 WebP로 바꾸면 호환성과 용도가 달라지며 아래 비교에서 달라지는 점을 확인하세요.
이 변환기는 파일 내용을 읽어 SVG가 맞는지 확인한 뒤 브라우저 안에서 바로 WebP로 바꿔 줍니다. 이미지는 서버로 전송되지 않습니다.
SVG와 WebP, 무엇이 다른가요?
| 항목 | SVG | WebP |
|---|---|---|
| 압축 방식 | 벡터(수식으로 저장) | 손실·무손실 모두 가능 |
| 투명 배경 | 지원 | 지원 |
| 애니메이션 | 지원 | 지원 |
| 등장 시기 | 2001년 | 2010년 |
| 프로그램·업로드 폼 지원 | 보통 | 보통 |
| 브라우저 직접 표시 | 지원 | 지원 |
| 사진 용량(JPG=1) | 해당 없음 | 약 0.7배 |
SVG란?
SVG는 픽셀이 아니라 선과 도형, 곡선의 수식을 텍스트(XML)로 저장하는 벡터 형식입니다. 아무리 확대해도 선명하고, 단순한 로고는 수 KB로도 충분합니다.
WebP란?
WebP는 구글이 2010년 공개한 웹 전용 이미지 형식입니다. 같은 화질에서 JPG보다 대략 25~35% 작은 파일을 만들 수 있고, 손실·무손실 압축과 투명도, 애니메이션을 한 형식에서 모두 다룹니다.
SVG에서 WebP로 바꾸면 달라지는 점
벡터가 지정한 크기의 픽셀 이미지로 고정됩니다
SVG를 WebP로 바꾸면 그 순간 해상도가 정해집니다. 옵션의 가로 px을 먼저 지정해 필요한 크기로 선명하게 그린 뒤 저장하세요. 나중에 키우면 흐려집니다.
품질·크기·배경색을 조절할 수 있습니다
SVG에서 WebP로 바꿀 때 품질 슬라이더(기본 90)와 가로·세로 px 지정, 비율 리사이즈, 여백 채우기를 쓸 수 있습니다. 벡터 원본이라 품질보다 출력 크기(가로 px)가 용량을 좌우하므로, 필요한 크기를 먼저 정한 뒤 품질은 90 안팎으로 두세요.
용량은 이렇게 달라집니다
SVG는 해상도가 없는 벡터라 용량이 도형의 복잡도에 달려 있습니다. 단순한 로고는 SVG가 WebP보다 훨씬 작지만, 래스터로 바꾸면 지정한 크기(가로×세로)만큼의 픽셀 정보가 필요합니다.
이럴 때 변환하세요
- 웹페이지 로딩 속도를 높이려고 SVG 이미지를 더 가볍게 만들 때
- WebP의 대표적인 용도(웹사이트 이미지 최적화, 투명 배경 웹 그래픽)로 쓸 이미지를 준비할 때
- SVG 파일을 다시 편집하거나 보관하기 쉬운 형식으로 정리할 때