SVGZ ou SVG : choisis selon l’édition ou la livraison

SVGZ est un fichier SVG compressé avec gzip. Décompresse-le et tu retrouves le document SVG, avec ses tracés, couleurs, textes et images intégrées. L’enregistrement du type de média SVG du W3C définit .svgz comme un alias de .svg.gz.

Choisis SVGZ ou SVG selon le processus du destinataire. Conserve un .svg ordinaire si quelqu’un a besoin de code lisible ou si une application attend ce format. Utilise .svgz si le destinataire le prend en charge et si tu as une raison de livrer un fichier compressé. Pour un site web, vérifie la compression HTTP avant de changer les noms : une URL terminée par .svg peut déjà envoyer du contenu compressé.

L’exemple ci-dessous compresse un badge original de 332 octets à 243 octets, puis restaure exactement les octets d’origine. C’est le résultat d’un seul fichier, pas une promesse concernant ton illustration ou la vitesse de ta page.

Que change le passage de SVG à SVGZ ?

Le guide MDN des types de fichiers SVG distingue le SVG textuel ordinaire du SVG compressé avec gzip et explique la configuration serveur nécessaire au SVGZ. Si tu connais mal le document sous-jacent, commence par ce que contient un fichier SVG.

Une copie compressée est un empaquetage utile. Conserve ton original modifiable séparément pour examiner les objets, apporter des corrections et exporter la forme attendue par l’outil suivant.

Essaie un aller-retour SVGZ avec un petit badge

Cette illustration originale contient un hexagone bleu-vert, un soleil corail et une montagne pâle. Enregistre ce qui suit sous badge.svg dans un dossier de travail temporaire :

<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>

Sur un système doté de gzip, cmp et wc, exécute ces commandes dans ce dossier. Utilise de nouveaux noms de sortie si ces fichiers contiennent déjà un travail à conserver.

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

La première commande écrit une copie compressée tout en conservant la source. L’option -n omet le nom d’origine et l’horodatage de l’en-tête gzip. La deuxième décode la copie compressée dans un autre fichier. cmp vérifie les octets et wc -c indique leur nombre.

Nous avons exécuté cette séquence avec Apple gzip 457.140.3. Toutes les commandes se sont terminées avec succès, et cmp n’a trouvé aucune différence entre le SVG original et décodé.

Le fichier compressé économisait 89 octets, soit environ 26.8% de la taille de cette source. D’autres espaces, fins de ligne, métadonnées, illustrations ou réglages de compression peuvent changer le résultat. La comparaison des octets établit que cet aller-retour préservait la source. Elle ne mesure ni le temps de transfert du navigateur, ni les performances de rendu, ni la compatibilité avec une application d’édition.

Si tu dois seulement ouvrir un SVGZ dans un éditeur attendant un SVG, la décompression est l’opération pertinente. Renommer badge.svgz en badge.svg laisse les octets compressés en place. De même, renommer un SVG en SVGZ n’exécute pas gzip.

Distingue la compression du nettoyage de l’illustration

Supposons qu’un logo vectorisé possède un contour irrégulier et des centaines de points inutiles. Gzip peut réduire sa taille stockée, mais le décodage retrouve les mêmes points. Utilise le guide de nettoyage des nœuds SVG lorsque le problème d’édition relève de la complexité géométrique. Compare la silhouette pendant la simplification, car retirer des points peut modifier l’illustration.

L’optimisation du code est une autre opération. Retirer des métadonnées, réécrire des nombres ou fusionner des formes compatibles change le document source avant compression. Un aller-retour gzip identique octet par octet ne fait rien de cela. Si un outil d’optimisation modifie aussi le SVG, examine sa sortie indépendamment au lieu d’attribuer chaque changement à la compression. Le guide de configuration SVGO et de préservation des ID démontre cet examen avec un badge original dont l’accroche CSS externe disparaît avec le préréglage par défaut.

Un SVG peut aussi contenir une image matricielle. Compresser ce document conserve l’image intégrée ; cela ne crée pas de contours modifiables autour des objets de l’image. Le diagnostic des images matricielles intégrées aide à distinguer un conteneur d’image d’une illustration construite avec des tracés vectoriels.

Ces distinctions facilitent le choix de l’étape suivante : décompresser pour retrouver le code, modifier pour changer la géométrie et vectoriser uniquement si une illustration matricielle adaptée nécessite de nouvelles formes vectorielles.

Un site peut compresser les réponses SVG ordinaires

La compression HTTP est indépendante du nom de fichier affiché dans une URL. Un serveur peut recevoir une requête pour badge.svg et envoyer une représentation compressée de ce SVG. Le guide MDN de la compression HTTP décrit la négociation : la requête annonce les encodages pris en charge et la réponse identifie celui utilisé. Lorsque la représentation varie selon Accept-Encoding, la réponse utilise Vary: Accept-Encoding pour que les caches distinguent ces versions.

Pour une réponse SVG encodée avec gzip, les en-têtes pertinents sont :

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

Content-Type identifie le média décodé. Content-Encoding indique au destinataire comment décoder le corps de la réponse. La référence MDN de Content-Encoding explique cette distinction. Ces en-têtes doivent décrire les octets réellement envoyés ; ajouter Content-Encoding: gzip à un SVG non compressé ne le compresse pas.

Pour un .svgz stocké servi comme image SVG, les conseils serveur SVGZ de MDN demandent le type de média SVG et l’encodage de contenu gzip. Examine la réponse finale dans le panneau Network du navigateur, y compris le comportement éventuel du CDN. Une ouverture locale réussie ne vérifie pas cette réponse.

Avant de remplacer un SVG existant par SVGZ, vérifie si la réponse SVG ordinaire est déjà compressée. Compare les réponses réelles dans les mêmes conditions, dont l’état du cache, plutôt que la taille d’un SVG local à une taille de transfert réseau. Notre test de badge ci-dessus n’effectue pas cette comparaison web.

Envoie un fichier utilisable par l’application suivante

Pour une transmission modifiable, demande quel format importe le destinataire. S’il accepte SVG mais refuse SVGZ, fournis le SVG décompressé et teste cette copie. La décompression ne peut pas ajouter la prise en charge de fonctions SVG que l’application ne comprend pas.

Ouvre le fichier accepté dans l’application prévue et examine ses objets. Vérifie le lettrage, le découpage, les images intégrées, les couleurs et les plus petits détails importants. Distingue cet examen du décodage : des octets sources identiques peuvent encore être interprétés différemment par des applications aux prises en charge différentes.

Si un fichier semble vide, établis d’abord s’il a été décodé en SVG lisible. Examine ensuite le document et son contexte d’affichage avec le guide de dépannage des SVG vides. Répéter la compression ne répare ni un remplissage ou un contour invisible, ni un contenu manquant, ni une zone de dessin inadaptée.

Conserve l’original, la copie de livraison et une courte note nommant l’outil destinataire. C’est plus utile que de choisir le plus petit fichier local avant de savoir où il ira.

Si la source nécessite encore des tracés vectoriels

Si l’original vectoriel manque et qu’il ne reste qu’un logo plat PNG ou JPG, le processus d’image en vecteur PerfectVector peut aider à préparer un candidat SVG modifiable. Compare l’aperçu à l’original, examine les trous et les régions séparées et ouvre le fichier téléchargé dans l’éditeur prévu. Choisis la compression seulement après acceptation de l’illustration.

PerfectVector n’est pas nécessaire pour décompresser un SVGZ existant. Utilise la décompression pour cela. Garde les photographies ou les effets peints sous forme matricielle si cela préserve l’apparence souhaitée et utilise un original vectoriel existant dès qu’il est disponible. Les guides de format et de modification du blog traitent de ces choix de source avant l’empaquetage.

FAQ

SVGZ offre-t-il une meilleure qualité que SVG ? Non. La compression gzip change la représentation stockée. Une décompression correcte restaure la source SVG ; elle n’améliore pas ses tracés, couleurs ou images intégrées.

Comment transformer un SVGZ en SVG ? Décompresse-le avec un outil gérant gzip, puis enregistre le SVG décodé. Par exemple, gzip -dc badge.svgz > roundtrip.svg écrit une copie décodée. Renommer uniquement l’extension n’effectue pas cette opération.

SVGZ rend-il toujours un site plus rapide ? Aucun gain de vitesse fixe ne découle de l’extension. Une réponse SVG ordinaire peut déjà utiliser la compression HTTP. Vérifie les en-têtes réels, les octets transférés, les conditions de cache et le comportement de la page.

Compresser un SVG réduit-il son nombre de nœuds ? Non. Gzip préserve la source après décodage. La simplification des tracés ou une autre optimisation SVG est une opération distincte qui nécessite son propre examen de l’illustration.

Sources

1. W3C — enregistrement du type de média SVG — Définit SVGZ comme du SVG compressé avec gzip et sa relation à SVG.GZ.
2. MDN — premiers pas avec SVG — Distingue les formes de fichier et décrit les en-têtes de réponse SVGZ.
3. MDN — Content-Encoding — Explique le décodage et la relation entre encodage et type de média.
4. MDN — compression HTTP — Traite de la négociation de compression des réponses et de la variation du cache.

Adapte le fichier livré à l’outil destinataire, puis vérifie l’illustration décodée. Si tu pars d’un logo matriciel nécessitant des formes modifiables, prépare un candidat SVG et examine ses tracés avant de décider comment le compresser.