SVGO : optimiser sans perdre la structure utile

Pour optimiser un SVG avec SVGO sans casser son utilisation sur une page, conserve l’original, identifie la structure dont dépend ta page, puis teste dans cette page une copie optimisée séparément. Un fichier plus petit et un aperçu autonome inchangé ne prouvent pas que les sélecteurs CSS, scripts ou références fonctionnent encore.

Notre badge original rend cette différence visible. Le préréglage par défaut de SVGO a réduit sa source de 437 à 263 octets, mais a supprimé l’ID utilisé par le HTML environnant pour recolorer le soleil. Désactiver cleanupIds a produit une copie de 281 octets conservant cet identifiant. Ces mesures décrivent ce seul exemple avec SVGO 4.1.0, et non une garantie de compression pour d’autres dessins.

SVGO modifie le balisage SVG existant. Si tu possèdes uniquement un PNG ou JPG, crée ou reconstruis d’abord la géométrie vectorielle. L’optimisation ne peut pas transformer les objets d’un bitmap en tracés modifiables.

Détermine quelle structure SVG conserver

Avant d’exécuter l’optimiseur, distingue ce qui est visible de ce que référence un autre document ou une autre application. Le préréglage SVGO par défaut inclut des opérations qui changent les ID, groupes, styles et données de tracé. Une intégration peut aussi choisir un autre ensemble de plugins : vérifie donc la configuration de l’outil qui traite réellement ton fichier.

Ce sont des vérifications distinctes. Préserver un ID ne préserve pas chaque groupe, nœud ou objet modifiable. De même, un rendu correct ne prouve pas qu’un éditeur retrouvera ta structure de calques préférée. Conserve un original modifiable et produis une copie de livraison pour le contexte cible.

Pour les symboles réutilisables, le guide des sprites SVG couvre le côté consommateur de la référence. Cet article se concentre sur ce que l’optimisation peut changer avant que le consommateur ne reçoive le fichier.

Reproduis un sélecteur CSS externe cassé

Utilise un dossier temporaire vide avec Node.js et npm disponibles. Enregistre cette illustration écrite à la main sous input.svg, en incluant le saut de ligne final. C’est un exemple de configuration, et non un résultat de conversion PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Installe la version exacte utilisée pour cet exemple, puis produis un nouveau fichier de sortie :

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Exécute cela dans le dossier propre afin qu’un éventuel svgo.config.mjs existant ne fournisse pas de réglages inattendus. Le dépôt officiel SVGO documente les noms de fichiers de sortie séparés et le chargement de configuration. Pour la compilation d’un projet, conserve la version et la configuration sous contrôle de version afin qu’une mise à jour soit un changement délibéré.

Ouvre default.svg comme texte. Son cercle garde un remplissage corail, mais l’ID badge-accent a disparu. Cet ID n’était pas référencé dans le document SVG. La documentation cleanupIds explique que le plugin supprime les ID inutilisés et raccourcit ceux qui sont référencés. Le sélecteur d’une page externe n’appartient pas à l’entrée de cet exemple.

Pour voir la conséquence, place directement le balisage SVG dans une page HTML avec ce style hors du SVG :

<style>
  #badge-accent { fill: #f5bf42; }
</style>

Utilise une copie par page pour ce test. Le soleil du SVG original devient doré parce que le sélecteur correspond. Celui optimisé par défaut reste corail, car son ID manque. Charger les fichiers dans un élément img serait un autre test : la page hôte ne sélectionnerait pas une forme intérieure dans le même document.

Préserve l’identifiant, puis répète le test

Enregistre ceci sous svgo.config.mjs dans le même dossier :

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Écris maintenant une autre copie :

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

Cette surcharge désactive un seul plugin tout en conservant le reste du préréglage par défaut. C’est un point de départ pour la dépendance à l’ID présentée. Ce n’est pas une configuration universellement sûre pour tous les dessins, animations, relations d’accessibilité ou structures propres à une application.

Nous avons exécuté les commandes ci-dessus dans un dossier propre et exécuté indépendamment les configurations équivalentes via l’API JavaScript de SVGO 4.1.0. Les sorties CLI et API étaient identiques octet par octet, sans ajout de saut de ligne final aux fichiers optimisés. Nous avons ensuite rendu chaque résultat dans son propre document HTML avec la même règle CSS externe. Le navigateur a indiqué ces résultats :

La sortie préservant l’ID a économisé 156 octets, soit environ 35.7 % de cette source. Elle coûtait 18 octets de plus que la sortie par défaut et conservait le comportement nécessaire. Espaces, fins de ligne, versions et formatage de sortie peuvent modifier tes nombres d’octets.

Les trois copies ont conservé viewBox="0 0 160 160" dans ce test. Nous avons vérifié le résultat visible et le remplissage calculé du navigateur. Nous n’avons pas mesuré le temps de transfert réseau ni testé tous les navigateurs, éditeurs, fonctionnalités SVG ou intégrations de compilation.

Ajuste les réglages pour une dépendance précise

Si seuls quelques ID sont des identifiants publics utilisés ailleurs, cleanupIds expose aussi les options preserve et preservePrefixes. Utilise-les lorsque tu peux nommer la dépendance, puis répète le même test du consommateur. Si plusieurs SVG sont intégrés ensemble en ligne, vérifie aussi les ID en double. Conserver un ID déjà dupliqué ne le rend pas unique ; en renommer un exige d’actualiser ses consommateurs.

Un style ou un script dans le SVG peut modifier le comportement de l’optimiseur. La documentation cleanupIds décrit une protection qui renonce au nettoyage en présence de ces éléments. N’extrapole pas cette protection au CSS d’un autre document et ne force pas le nettoyage sans comprendre quelles références dépendent des ID.

Traite la précision numérique séparément. Moins de décimales peuvent réduire le balisage, mais le changement acceptable dépend de l’échelle des coordonnées et de la taille finale d’affichage. Inspecte les petits espaces, angles et courbes aux tailles d’utilisation du graphisme. Un contrôle réussi des ID ne dit rien sur ces détails.

Conserve viewBox lorsque ta mise en page dépend de son comportement de redimensionnement. La documentation du plugin removeViewBox avertit des conséquences de mise à l’échelle et de découpage. Il ne fait pas partie du préréglage par défaut documenté utilisé ici ; l’ajouter explicitement est une décision distincte. Évite de copier une ancienne configuration sans vérifier pour quelle version et quel préréglage elle a été écrite.

Pour un contour issu d’une vectorisation très détaillée, optimiser le balisage et nettoyer délibérément les nœuds répondent aussi à des questions différentes. Utilise le guide des nœuds SVG pour juger si la géométrie doit être simplifiée et compare la silhouette après modification. Une source plus petite ne signifie pas automatiquement un tracé de découpe plus propre.

Valide la copie de livraison dans son contexte d’utilisation

Après avoir choisi une configuration, place le fichier optimisé dans la méthode de réception réelle. Vérifie l’état par défaut et les états survolé, sélectionné, thématique ou animé qui en dépendent. Un aperçu statique peut manquer un sélecteur qui ne s’exécute qu’après interaction.

Pour un graphisme web, inspecte la sortie finale compilée ainsi que le fichier optimisé local. Un framework ou un outil de regroupement peut effectuer sa propre optimisation ensuite. Répète le test si le balisage livré diffère.

Pour une livraison modifiable, ouvre la copie dans l’éditeur prévu et sélectionne les parties nécessaires au destinataire. Confirme les petits lettrages, trous, couleurs séparées et découpages. Garde l’original même lorsque la copie web réussit les contrôles.

L’optimisation des fichiers est aussi distincte de la compression de transport. Le guide SVGZ et SVG démontre un aller-retour gzip qui restaure des octets sources identiques. SVGO change cette source avant sa livraison ; gzip peut ensuite encoder ces octets. Compare chaque opération à son objectif propre.

Quand la vectorisation précède l’optimisation

Si l’original vectoriel manque et que la seule source est un PNG ou JPG aplati, la méthode image vers vecteur PerfectVector peut aider à préparer un SVG candidat. Compare le résultat à la source et inspecte les trous, petits détails et régions distinctes avant de l’accepter. Ajoute les ID ou groupes nécessaires à ta page après avoir vérifié le dessin, puis optimise une copie de livraison et teste ces identifiants.

PerfectVector n’est pas un optimiseur de SVG existant et ne reconstruit pas les sélecteurs de ton site. Utilise l’original vectoriel disponible. Garde une photo matricielle lorsque ses détails de tons continus comptent plus que des contours modifiables. Les guides de préparation vectorielle du blog couvrent ces choix de source.

FAQ

Désactiver cleanupIds rend-il tous les SVG sûrs à optimiser ? Non. Cela préserve les ID de la suppression et de la minification de ce plugin, mais d’autres plugins peuvent encore changer les styles, groupes, formes ou données de tracé. Valide les fonctionnalités et références utilisées par ta méthode de réception.

Pourquoi un SVG optimisé semble-t-il correct seul, mais incorrect sur ma page ? L’aperçu autonome ne sollicite peut-être pas le CSS ou les scripts externes. Dans notre exemple, le remplissage corail propre au SVG s’affichait normalement, tandis que la recoloration dorée de la page échouait parce que l’ID sélectionné avait été supprimé.

Dois-je optimiser mon seul original modifiable ? Conserve l’original et écris une copie de livraison optimisée. Un fichier peut s’afficher correctement après optimisation tout en ayant une structure d’objets moins utile pour les modifications ultérieures.

SVGO peut-il transformer un PNG en tracés vectoriels ? Non. SVGO traite le balisage SVG. Le traçage matriciel vers vectoriel est une opération antérieure lorsque le dessin nécessite une géométrie modifiable et qu’aucun original vectoriel adapté n’existe.

Sources

1. Dépôt SVGO — Explique l’installation, les sorties en ligne de commande, le chargement de configuration et l’API optimize.
2. Préréglage SVGO par défaut — Liste ses plugins et documente les surcharges et différences d’intégration.
3. SVGO cleanupIds — Documente la suppression et la minification des ID, les options de préservation et les protections associées.
4. SVGO removeViewBox — Explique le risque de mise à l’échelle lorsqu’on supprime explicitement le viewBox.

Conserve la plus petite copie qui réussit tes contrôles du dessin et du comportement. Si le fichier de départ manque encore de géométrie vectorielle modifiable, prépare un SVG à partir de ton dessin matriciel, inspecte ses formes et préserve les identifiants que tu ajoutes avant d’optimiser la copie de livraison.