비교
SVG와 WebP
SVG는 벡터 도형을 기술하고 WebP는 주로 래스터 이미지 형식입니다. 로고와 도표는 벡터, 사진과 픽셀 그림은 래스터가 적합한 경우가 많습니다. 내용에 따라 고르고 대상 브라우저에서 시험하세요.
어떤 형식을 선택해야 할까요?
확대할 로고·아이콘·도표에는 SVG를, 웹 전송과 브라우저 지원이 적합한 사진·래스터 그림에는 WebP를 사용하세요.
적합한 경우 SVG
로고, 아이콘, 다이어그램 · 확장 가능한 UI 그래픽
- 크기 조절되는 일러스트
- 편집 가능한 도형
적합한 경우 WebP
웹 이미지 전송 · 사진 · 투명 웹 자산
- 웹 이미지 전송량 줄이기
- 투명도나 애니메이션이 필요한 자산
기본 정보
| 항목 | SVG | WebP |
|---|---|---|
| 확장자 | .svg | .webp |
| MIME 유형 | image/svg+xml | image/webp |
| 주요 용도 | 로고, 아이콘, 다이어그램 · 확장 가능한 UI 그래픽 | 웹 이미지 전송 · 사진 · 투명 웹 자산 |
| 여는 방법 | 브라우저, 벡터 편집기 또는 호환 뷰어로 여세요. | 호환되는 브라우저, 이미지 뷰어 또는 이미지 편집기로 WebP 파일을 여세요. |
| 내보내기 또는 변환 | 래스터가 필요하면 PNG로 내보내고 크기, 글꼴, 색상, 투명도를 확인하세요. | WebP를 JPEG로 내보내면 투명도가 유지되지 않고 손실 출력이 됩니다. PNG로 내보낼 때는 정지 이미지로 충분한지 결정하고 필요하면 애니메이션을 별도로 처리하세요. |
용도별 선택
크기 조절되는 일러스트
로고, 아이콘, 다이어그램 · 확장 가능한 UI 그래픽
SVG편집 가능한 도형
로고, 아이콘, 다이어그램 · 확장 가능한 UI 그래픽
SVG웹 이미지 전송량 줄이기
웹 이미지 전송 · 사진 · 투명 웹 자산
WebP투명도나 애니메이션이 필요한 자산
웹 이미지 전송 · 사진 · 투명 웹 자산
WebP핵심 사항 1
SVG는 고정 픽셀 격자 없이 벡터 도형을 확대합니다.
차이 자세히 보기핵심 사항 2
WebP는 손실 또는 무손실 압축의 래스터 이미지를 저장합니다.
차이 자세히 보기차이 자세히 보기
실제 표시 크기에서 미리 보고 대상 브라우저의 색상, 투명도, 렌더링을 확인하세요. 사진을 SVG로 바꾸면 작은 벡터가 된다고 기대하지 마세요.
- SVG는 확대해도 선명해야 하는 기하 그래픽에 유용합니다.
- WebP는 래스터 이미지 전송용이며 용량을 줄일 수 있습니다.
- 변환은 표현 방식을 바꾸며 모양이나 편집 가능성에 영향을 줄 수 있습니다.
자주 묻는 질문
사진에 SVG가 WebP를 대체할 수 있나요?
대개 효율적이지 않습니다. SVG에 래스터를 넣을 수 있지만 사진 전송에는 보통 WebP가 더 알맞습니다.