Quand dois-je utiliser SVG ou SVGZ pour mes graphiques Web?

De ma compréhension,

Le SVGZ est un type de fichier compressé d'un SVG. J'adore utiliser des images SVG et j'ai eu beaucoup d'expérience avec elles.

Toutes les fois où je les ai utilisées, je n'ai jamais eu de graphique dépassant quelques centaines de kilo-octets.

J'utilise SVG pour des graphiques réactifs tout en créant des sites Web réactifs. Je les utilise également car mon style de conception préféré est le graphisme vectoriel. Ma force de conception la plus forte est l'illustrateur, surtout en ce qui concerne la conception graphique.

L'autre raison pour laquelle j'utiliserais un graphique SVG est due à la facilité d'animation de certains éléments du graphique, comme les bras, les jambes, etc.

Surtout des éléments d'arrière-plan, comme une ville sur toute la page pendant que j'anime des scintillements de lumières, etc.

Si le fichier est compressé, perdrait-il le code SVG et je ne pourrais donc pas l'animer?

Y a-t-il une raison pour laquelle je devrais utiliser un SVGZ plutôt qu'un SVG?

Mise à jour

Eh bien, j'ai décidé de faire juste un SVG et un SVGZ pour voir comment ils agissaient avec le Web depuis que j'ai découvert que mes anciennes œuvres CS3 pouvaient sauver SVGZ!

Après les tests, j'ai rencontré un problème très inattendu avec le type de fichier SVGZ. (Testé sur Chrome, Firefox et IE) Si vous accédez à l'URL directe de l'image, vous obtenez une erreur. Je suppose que vous ne pouvez pas accéder au code SVG sur ces types de fichiers mais après avoir fait un violon, il ne semble même pas afficher l'image.

Sont-ils inutiles pour le web?

.svg

.svgz

JSFIDDLE

adobe-illustrator website-design vector svg Josh Powell
la source

Il semble que ce soit en partie un paramètre de problème de configuration de serveur Web .svgzà servir en utilisant le bon type MIME, voir stackoverflow.com/questions/16725380/svgz-doesnt-display . Personnellement, j'utilise toujours Raphael.js pour les graphiques SVG / vectoriels sur le Web parce que j'ai besoin du support IE8

user56reinstatemonica8

Hmm, merci pour les liens très utiles. Y a-t-il une raison d'utiliser un SVGZ? J'ai pensé que ce serait peut-être bien de réduire la taille d'un fichier image. Je suis simplement curieux de savoir si oui ou non un SVGZsite Web est d' une quelconque manière utile pour le Web ou vraiment utile de quelque façon que ce soit.

Josh Powell

Si cela fonctionne, cela réduira considérablement la taille du fichier. Cela peut être utile si vous utilisez l'interactivité sur quelque chose de complexe - par exemple une carte du monde SVG très détaillée et zoomable. La zcompression gzip signifie qui est utilisée pour réduire la taille du fichier et à peu près rien d'autre.

user56reinstatemonica8

@JoshPowell: étant donné que la plupart des serveurs http envoient du contenu avec la compression gzip, je ne vois pas le but de cette question. Et avec certains serveurs, si vous nommez votre fichier .svg.gz, le navigateur recevra une information indiquant que le fichier d'origine n'a pas été compressé.

user2284570

Réponses:

La prise en charge des fichiers svg compressés variera selon le navigateur, mais vous devez configurer le serveur pour marquer correctement le fichier svgz avec des informations sur son encodage pour indiquer explicitement au navigateur comment le décoder à la réception.

La réponse du serveur pour svgz doit être configurée pour inclure "Content-encoding: gzip"

svg     Content-Type: image/svg+xml

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

Pour un serveur Web Apache, cela peut être réalisé via un fichier .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Notez que si vous le zippez à la volée ou que vous le faites cuire avant de le placer sur le serveur, l'encodage du contenu doit être suggéré. Pour des actifs comme celui-ci, je pense qu'il vaut mieux le précompresser. Sinon, vous mangez le processeur du serveur pour chaque demande du fichier. Cela peut ne pas sembler beaucoup, mais c'est le genre de problème de non-optimisation qui fait tomber, par exemple, le site Web de santé américain.

horatio
la source

Si votre serveur ou votre plate-forme est intelligent, l'exécution de la compression est hautement optimisée car elle peut être mise en cache.Ce n'est certainement pas le genre de chose qui va planter votre site, encore moins Healthcare.gov.

Josh Koenig

Ce n'est peut-être pas la réponse que vous attendez, mais pour le Web, il n'est pas vraiment nécessaire d'utiliser des fichiers SVGZ. La raison en est qu'un fichier SVGZ est simplement un SVG qui a été pré-Gzipé.

Les serveurs Web modernes peuvent faire eux-mêmes le Gzipping avant de servir l'actif (voir cette réponse sur StackOverflow pour plus d'informations), donc si vous avez un SVG de 300 Ko qui est de 50 Ko lorsqu'il est compressé, il sera à peu près le même lorsque Gzippé par le serveur Web automatiquement. Donc, ce ne sera pas 300 Ko sur toute la ligne, ce sera 50 Ko et sera décompressé par le navigateur.

Taylor Jasko
la source

Êtes-vous sûr que le fichier compressé est mis en cache quelque part? Il faut beaucoup de travail pour compresser ces ressources svg encore et encore pour 5000 visiteurs.

bokan

@bokan: certains serveurs offrent la possibilité de pré-compresser le contenu en ajoutant une extension de fichier .gz. Donc, si un client recherche index.html, le serveur répondra avec le fichier précompressé nommé index.html.gz.

user2284570

@ user2284570: Vous devez donc créer le .gz à la main. Sinon, il compressera les fichiers chaque fois qu'il les enverra, ce qui représente beaucoup de travail pour le serveur.

bokan

@bokan: Oui et cela nécessite souvent beaucoup de configuration de serveur supplémentaire que la simple compression de codage de contenu. Même IE5 le prend en charge. la création d'un script pour compresser tous les fichiers statiques à l'intérieur d'un répertoire reste simple. Dans le second cas, cela économise à la fois de l'espace disque et de la bande passante.

user2284570