웹 그래픽에 SVG 또는 SVGZ를 언제 사용해야합니까?

내 이해에서

SVGZ는 SVG의 압축 파일 유형입니다. SVG 이미지 사용을 좋아하고 많은 경험이 있습니다.

내가 사용한 모든 시간에는 수백 킬로바이트가 넘는 그래픽이 없었습니다.

반응 형 웹 사이트를 만들면서 반응 형 그래픽에 SVG를 사용합니다. 내가 좋아하는 디자인 스타일은 벡터 기반 그래픽이기 때문에 사용합니다. 저의 가장 강력한 디자인 강점은 일러스트 레이터입니다. 특히 그래픽 디자인과 관련해서는 더욱 그렇습니다.

SVG 그래픽을 사용하는 또 다른 이유는 팔, 다리 등 그래픽의 특정 요소를 쉽게 애니메이션으로 만들 수 있기 때문입니다.

특히 도시와 같은 배경 요소는 전체 깜박임 등을 애니메이션하는 동안 전체 페이지에 걸쳐 있습니다.

파일이 압축 된 경우 SVG 코드를 잃어 애니메이션이되지 않습니까?

SVG보다 SVGZ를 사용해야하는 이유가 있습니까?

최신 정보

글쎄, 나는 고대 CS3가 SVGZ를 구할 수 있다는 것을 알게 된 후 SVG와 SVGZ를 만들어 웹에서 어떻게 행동했는지를보기로 결정했다!

테스트 후 SVGZ 파일 형식에 예기치 않은 문제가 발생했습니다. (Chrome, Firefox 및 IE에서 테스트) 이미지의 직접 URL로 이동하면 오류가 발생합니다. 이 파일 형식에서 SVG 코드에 액세스 할 수 없다고 가정하지만 바이올린을 만든 후에는 이미지를 표시하지 않는 것 같습니다.

이것들은 웹에 쓸모 없습니까?

.svg

.svgz

JS 피들

압축 된 svg에 대한 지원은 브라우저마다 다르지만, 브라우저에 수신시 디코딩 방법을 명시 적으로 알리기 위해 인코딩에 대한 정보로 svgz 파일에 플래그를 지정하도록 서버를 구성해야합니다.

"내용 인코딩 : gzip"을 포함하도록 svgz에 대한 서버 응답을 구성해야합니다.

svg     Content-Type: image/svg+xml

svgz    Content-Type: image/svg+xml
        Content-Encoding: gzip

Apache 웹 서버의 경우 .htaccess 파일을 통해이를 달성 할 수 있습니다.

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

서버에 넣기 전에 압축하거나 빵을 굽는 경우 콘텐츠 인코딩에 대한 힌트가 필요합니다. 이와 같은 자산의 경우 사전 압축하는 것이 좋습니다. 그렇지 않으면 파일의 각 요청에 대해 서버 CPU를 먹는 것입니다. 이것은별로 좋아 보이지는 않지만 이것은 미국 의료 웹 사이트와 같은 일종의 최적화되지 않은 문제입니다.

이것은 당신이 기대하는 대답이 아닐 수도 있지만, 웹의 경우 실제로 SVGZ 파일을 사용할 필요는 없습니다. 그 이유는 SVGZ 파일이 단순히 사전 압축 된 SVG이기 때문입니다.

최신 웹 서버는 자산을 제공하기 전에이 Gzipping을 수행 할 수 있습니다 (자세한 내용 은 StackOverflow 에서이 답변 참조 ). 따라서 줄 아래로 300KB가되지 않고 50KB가되고 브라우저에서 압축 해제됩니다.