SVGZ와 SVG: 편집 또는 전달용 파일 선택하기
실제 gzip 왕복 과정으로 SVGZ와 SVG를 비교하세요. 압축이 보존하는 내용, 웹 헤더의 차이, 편집기나 받는 사람에게 보낼 파일을 확인하세요.
목차
SVGZ는 gzip으로 압축한 SVG 파일입니다. 압축을 풀면 경로, 색상, 텍스트, 포함된 이미지를 비롯한 SVG 문서를 복원합니다. W3C의 SVG 미디어 유형 등록은 .svgz를 .svg.gz의 별칭으로 정의합니다.
파일을 받는 작업 흐름에 따라 SVGZ와 SVG를 선택하세요. 읽을 수 있는 마크업이 필요하거나 애플리케이션이 해당 형식을 기대한다면 일반 .svg를 유지하세요. 받는 쪽이 지원하고 압축 파일을 전달할 이유가 있을 때 .svgz를 사용하세요. 웹사이트에서는 파일 이름을 바꾸기 전에 HTTP 압축을 확인하세요. .svg로 끝나는 URL도 이미 압축된 콘텐츠를 보낼 수 있습니다.
아래 예제는 직접 만든 332바이트 배지를 243바이트로 압축한 뒤 정확한 원본 바이트를 복원합니다. 이는 파일 하나의 결과이며 자신의 아트워크나 페이지 속도에 대한 보장이 아닙니다.
SVG가 SVGZ가 되면 무엇이 바뀌나요?
| 질문 | SVG | SVGZ |
|---|---|---|
| 무엇이 저장되나요? | 텍스트 SVG 마크업 | gzip으로 압축된 SVG 마크업 |
| 텍스트 편집기가 마크업을 직접 읽을 수 있나요? | 네 | 먼저 압축을 풀어야 합니다 |
| 이 형식을 선택하면 경로가 단순화되나요? | 아니요 | 아니요 |
| 포함된 비트맵이 벡터 도형이 되나요? | 아니요 | 아니요 |
| 받는 쪽에서 무엇을 처리해야 하나요? | 파일에서 사용한 SVG 기능 | gzip 디코딩과 파일에서 사용한 SVG 기능 |
| 자동으로 웹 전송 크기가 더 작아지나요? | 이미 HTTP 압축을 사용할 수 있습니다 | 실제 전달된 응답을 비교하세요 |
MDN의 SVG 파일 유형 안내는 일반 텍스트 SVG와 gzip 압축 SVG를 구분하고 SVGZ에 필요한 서버 설정을 설명합니다. 원래 문서가 낯설다면 SVG 파일에 들어 있는 내용부터 살펴보세요.
압축 사본은 유용한 포장 방식입니다. 객체를 살펴보고 수정하며 다음 도구에 필요한 형식으로 내보낼 수 있도록 편집 가능한 마스터를 별도로 보관하세요.
작은 배지 하나로 SVGZ 왕복 시도하기
이 직접 만든 일러스트레이션에는 청록색 육각형, 산호색 태양, 옅은 산이 들어 있습니다. 임시 폴더에 다음을 badge.svg로 저장하세요.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<title>Mountain badge</title>
<path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
<circle cx="108" cy="53" r="12" fill="#ef8067"/>
<path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
<path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>gzip, cmp, wc가 있는 시스템에서 해당 폴더 안에서 다음 명령을 실행하세요. 출력 파일에 보관해야 할 작업이 이미 있다면 새 출력 이름을 사용하세요.
gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg첫 명령은 소스를 유지하면서 압축 사본을 작성합니다. -n 옵션은 gzip 헤더에서 원본 파일 이름과 타임스탬프를 생략합니다. 두 번째 명령은 압축 사본을 다른 파일로 디코딩합니다. cmp는 바이트를 비교하고 wc -c는 바이트 수를 보고합니다.
이 순서를 Apple gzip 457.140.3으로 실행했습니다. 모든 명령이 성공적으로 종료되었고 cmp는 원본과 디코딩한 SVG 사이에서 차이를 찾지 못했습니다.
| 이 테스트의 파일 | 바이트 수 | 입증하는 내용 |
|---|---|---|
badge.svg | 332 | 원본 소스 |
badge.svgz | 243 | 압축된 표현 |
roundtrip.svg | 332 | 원본과 바이트 단위로 같은 복원 소스 |
압축 파일은 89바이트, 이 소스 크기의 약 26.8%를 절약했습니다. 공백, 줄 끝 형식, 메타데이터, 아트워크, 압축 설정이 달라지면 결과도 달라질 수 있습니다. 바이트 비교는 이 왕복 과정이 소스를 보존했다는 것을 입증합니다. 브라우저 전송 시간, 렌더링 성능, 편집 애플리케이션과의 호환성을 측정하지는 않습니다.
SVG를 기대하는 편집기에서 SVGZ를 열기만 하면 되는 경우에는 압축 해제가 해당 작업입니다. badge.svgz를 badge.svg로 이름만 바꾸면 압축 바이트는 그대로 남습니다. 마찬가지로 SVG 이름을 SVGZ로 바꿔도 gzip이 실행되지 않습니다.
압축과 아트워크 정리 구분하기
추적한 로고에 거친 외곽선과 불필요한 점 수백 개가 있다고 가정해 보세요. gzip이 저장 크기를 줄일 수는 있지만 디코딩하면 같은 점들이 돌아옵니다. 편집 문제의 원인이 도형 복잡도라면 SVG 노드 정리 안내를 사용하세요. 점 제거가 아트워크를 바꿀 수 있으므로 단순화 중 실루엣을 비교하세요.
마크업 최적화는 또 다른 작업입니다. 메타데이터 제거, 숫자 재작성, 호환되는 도형 합치기는 압축 전에 소스 문서를 바꿉니다. 바이트가 동일하게 복원되는 gzip 왕복은 이 작업을 하지 않습니다. 최적화 도구가 SVG도 편집한다면 모든 변경을 압축 때문이라고 생각하지 말고 출력을 별도로 검토하세요. SVGO 설정과 ID 보존 안내는 기본 프리셋에서 외부 CSS 연결 지점이 사라지는 직접 만든 배지로 이 검토를 보여 줍니다.
SVG에는 래스터 이미지가 들어 있을 수도 있습니다. 문서를 압축하면 포함된 이미지가 보존될 뿐 그림의 객체 주변에 편집 가능한 외곽선이 생기지는 않습니다. 포함된 래스터 진단은 이미지 컨테이너와 벡터 경로로 만든 아트워크를 구분하는 데 도움이 됩니다.
이 구분은 다음 단계를 선택하기 쉽게 해 줍니다. 마크업 복원에는 압축 해제를, 도형 변경에는 편집을 사용하고 적합한 래스터 아트워크에 새 벡터 도형이 필요할 때만 추적하세요.
웹사이트는 일반 SVG 응답도 압축할 수 있습니다
HTTP 압축은 URL에 표시하는 파일 이름과 독립적입니다. 서버는 badge.svg 요청을 받고 SVG의 압축된 표현을 보낼 수 있습니다. MDN의 HTTP 압축 안내는 협상 과정을 설명합니다. 요청은 지원하는 인코딩을 알리고 응답은 사용한 인코딩을 명시합니다. 표현이 Accept-Encoding에 따라 달라질 때 응답은 캐시가 버전을 구분할 수 있도록 Vary: Accept-Encoding을 사용합니다.
gzip 인코딩 SVG 응답의 관련 헤더는 다음과 같습니다.
Content-Type: image/svg+xml
Content-Encoding: gzipContent-Type은 디코딩된 미디어를 식별합니다. Content-Encoding은 응답 본문을 디코딩하는 방법을 받는 쪽에 알려 줍니다. MDN의 Content-Encoding 참조는 그 차이를 설명합니다. 헤더는 실제로 보낸 바이트를 설명해야 합니다. 압축하지 않은 SVG에 Content-Encoding: gzip을 추가해도 압축되지는 않습니다.
저장된 .svgz를 SVG 이미지로 제공할 때 MDN의 SVGZ 서버 안내는 SVG 미디어 유형과 gzip 콘텐츠 인코딩을 요구합니다. CDN 동작까지 포함하여 브라우저 Network 패널에서 최종 응답을 살펴보세요. 로컬 파일이 성공적으로 열린다고 응답이 검증되지는 않습니다.
기존 SVG를 SVGZ로 교체하기 전에 일반 SVG 응답이 이미 압축되는지 확인하세요. 로컬 SVG 파일 크기와 네트워크 전송 크기를 비교하지 말고 캐시 상태를 포함한 같은 조건에서 실제 응답을 비교하세요. 위 배지 테스트는 이런 웹 비교를 수행하지 않습니다.
다음 애플리케이션이 사용할 수 있는 파일 보내기
편집 가능한 파일을 전달하려면 받는 사람이 어떤 형식을 가져올 수 있는지 확인하세요. SVG는 받지만 SVGZ는 거부한다면 압축을 푼 SVG를 제공하고 사본을 테스트하세요. 압축 해제는 애플리케이션이 이해하지 못하는 SVG 기능의 지원을 추가하지 않습니다.
대상 애플리케이션에서 지원되는 파일을 열고 객체를 살펴보세요. 글자, 클리핑, 포함된 이미지, 색상, 중요한 가장 작은 세부 요소를 확인하세요. 이 검토는 파일 디코딩과 분리하세요. 동일한 소스 바이트도 기능 지원이 다른 애플리케이션에서는 다르게 해석될 수 있습니다.
파일이 비어 보인다면 먼저 읽을 수 있는 SVG로 디코딩되었는지 확인하세요. 그다음 빈 SVG 문제 해결 안내로 문서와 표시 맥락을 조사하세요. 반복 압축은 보이지 않는 칠, 누락된 콘텐츠, 맞지 않는 캔버스를 고치지 않습니다.
마스터와 전달용 사본, 받는 도구의 이름을 적은 짧은 메모를 보관하세요. 어디로 보낼지 알기 전에 가장 작은 로컬 파일을 고르는 것보다 유용합니다.
소스에 아직 벡터 경로가 필요한 경우
벡터 마스터가 없고 평면적인 PNG나 JPG 로고만 남았다면 PerfectVector의 이미지 벡터화 작업 흐름으로 편집 가능한 SVG 후보 파일을 준비할 수 있습니다. 미리보기를 원본과 비교하고 구멍과 분리된 영역을 살펴본 뒤 원하는 편집기에서 다운로드한 파일을 여세요. 아트워크를 확인한 후에만 압축을 선택하세요.
기존 SVGZ를 풀기 위해 PerfectVector는 필요하지 않습니다. 그 작업에는 압축 해제를 사용하세요. 사진이나 회화 효과는 원하는 모양을 보존한다면 래스터로 유지하고 기존 벡터 마스터가 있으면 사용하세요. 블로그의 형식 및 편집 안내는 포장 전에 필요한 소스 선택을 다룹니다.
FAQ
SVGZ는 SVG보다 품질이 높나요? 아닙니다. gzip 압축은 저장된 표현을 바꿉니다. 올바른 압축 해제는 SVG 소스를 복원하며 경로, 색상, 포함된 이미지를 개선하지 않습니다.
SVGZ를 SVG로 바꾸려면 어떻게 하나요?
gzip을 처리하는 도구로 압축을 푼 뒤 디코딩된 SVG를 저장하세요. 예를 들어 gzip -dc badge.svgz > roundtrip.svg는 디코딩된 사본을 작성합니다. 확장자 이름만 바꿔서는 이 작업이 수행되지 않습니다.
SVGZ는 항상 웹사이트를 더 빠르게 만드나요? 확장자만으로 고정된 속도 이점이 생기지는 않습니다. 일반 SVG 응답도 이미 HTTP 압축을 사용할 수 있습니다. 실제 응답 헤더, 전송 바이트, 캐시 조건, 페이지 동작을 확인하세요.
SVG 압축은 노드 수를 줄이나요? 아닙니다. gzip은 디코딩을 통해 소스를 보존합니다. 경로 단순화나 다른 SVG 최적화는 별도 작업이며 자체 아트워크 검토가 필요합니다.
Sources
- W3C — SVG 미디어 유형 등록 — SVGZ를 gzip 압축 SVG로 정의하고 SVG.GZ와의 관계를 설명합니다.
- MDN — SVG 시작하기 — 파일 형태를 구분하고 SVGZ 응답 헤더를 설명합니다.
- MDN — Content-Encoding — 디코딩과 인코딩 및 미디어 유형의 관계를 설명합니다.
- MDN — HTTP 압축 — 응답 압축 협상과 캐시 변형을 다룹니다.
받는 도구에 전달 파일을 맞춘 뒤 디코딩된 아트워크를 검증하세요. 편집 가능한 도형이 필요한 래스터 로고로 시작한다면 SVG 후보 파일을 준비하고 압축 방식을 결정하기 전에 경로를 검토하세요.
