Visionneuse et minificateur SVG

Qu’est-ce qu’une visionneuse et un minificateur SVG ?#

Le SVG est le format de référence pour les icônes, logos et tracés sur le web — il reste net à toute taille et se modifie comme du texte. Mais les fichiers SVG exportés par les outils de design transportent pas mal de scories : espaces de noms d’Inkscape et Sodipodi, blocs <metadata>, commentaires de création et des espaces entre chaque balise. Ce bagage alourdit le fichier et donne mal à la tête à quiconque lit la source. Un minificateur SVG retire ce qui n’affecte pas le rendu et indique le gain obtenu.

Cette page est à la fois une visionneuse et un minificateur. Collez le source SVG à gauche, voyez-le affiché à droite, passez en Minifier pour exécuter un nettoyage écrit maison qui supprime commentaires, métadonnées, espaces de noms d’éditeur et espaces entre éléments, et lisez le gain en octets. L’aperçu est rendu via une URI de données d’image, afin que tout script embarqué dans le SVG ne s’exécute jamais — vous pouvez inspecter un fichier non fiable en toute sécurité.

Comment l’utiliser#

1. Collez votre SVG dans le volet Entrée à gauche, ou cliquez sur Exemple pour charger un petit exemple.
2. Le volet Sortie et l’aperçu se mettent à jour immédiatement. Par défaut, la barre d’outils est sur Minifier, donc la sortie est le SVG nettoyé et plus petit.
3. Passez sur Original si vous voulez que la sortie affiche le source d’origine, intact (utile pour comparer avec la version minifiée).
4. Lisez le panneau de statistiques sous les volets :
   • Avant / Après / Économisé — la taille UTF-8 de l’entrée face à la sortie, et le pourcentage économisé.
   • Résumé des suppressions — combien de commentaires, blocs de métadonnées, éléments d’éditeur, attributs d’éditeur et nœuds d’espacement ont été retirés.
   • ViewBox — la géométrie width / height / viewBox lue sur le <svg> racine, pour confirmer la taille du plan de travail d’un coup d’œil.
5. Utilisez Copier ou Télécharger sur le volet de sortie pour récupérer le SVG minifié. Utilisez Effacer pour vider les deux volets.

Caractéristiques principales#

• Un vrai minificateur, écrit de zéro — pas svgo. svgo est l’outil Node standard, mais il dépend des modules fs et path de Node et ne tourne pas proprement dans un navigateur. Cette page fournit son propre parcours d’arbre, donc elle fonctionne sans aucune dépendance côté serveur.
• Cinq catégories de scories retirées. Commentaires, blocs <metadata>, éléments et attributs d’espaces de noms Inkscape/Sodipodi, et espaces entre éléments — chacun compté et signalé.
• Gestion des espaces consciente du texte. Les espaces à l’intérieur de <text>, <tspan>, <title>, <desc>, <style> et <script> sont préservés, donc les étiquettes et le CSS embarqué survivent au passage.
• Aperçu sécurisé. Le rendu utilise une <img> avec une URI de données, que le navigateur traite comme une image non exécutable — les scripts embarqués dans le SVG ne se lancent pas. Vous pouvez coller un fichier non fiable sans risque.
• Comptage d’octets honnête. Les tailles sont mesurées en octets UTF-8 (pas en nombre de caractères), donc un fichier avec du texte CJK ou des emoji affiche sa vraie taille sur le fil.
• 100 % local. L’analyse et la sérialisation se font dans votre navigateur. Le SVG ne quitte jamais la page.

Exemple commenté#

Un export Inkscape type peut s’ouvrir sur plusieurs lignes de déclarations d’espaces de noms d’éditeur et un bloc <metadata> avant le véritable contenu :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Collez-le, laissez le mode sur Minifier, et la sortie se réduit à :

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

Le panneau de statistiques indique environ avant ~520 octets, après ~210 octets, économisé ~60 %, avec le résumé montrant 1 commentaire, 1 bloc de métadonnées et 1 attribut d’éditeur (inkscape:connector-curvature). Le coche s’affiche à l’identique dans l’aperçu — rien de ce qui affectait le dessin n’a été retiré.

FAQ#

Cet outil exécute-t-il les scripts embarqués dans le SVG ?#

Non. L’aperçu est rendu en <img src="data:image/svg+xml;base64,…">, et les images chargées via <img> sont un contexte sans script — le navigateur n’exécutera aucun <script> à l’intérieur de ce SVG. Cela rend la page sûre pour inspecter des fichiers SVG dont vous n’êtes pas l’auteur. La balise <script> source est en revanche préservée dans la sortie minifiée ; savoir si elle s’exécute dépend de la façon dont vous intégrez le SVG ensuite.

Pourquoi ne pas simplement utiliser svgo ?#

svgo est le bon outil dans un pipeline de build Node, mais il dépend des modules fs et path de Node et ne tourne pas proprement dans un onglet de navigateur. Le minificateur de cette page est un parcours d’arbre autonome sans dépendance Node, donc il fonctionne entièrement côté client — au prix d’être moins agressif que les optimisations les plus poussées de svgo.

Les gains sont faibles sur mon fichier.#

Les fichiers déjà écrits à la main (sans espaces de noms d’éditeur, sans métadonnées, sans commentaires) ont peu à retirer, donc le gain peut n’être que de quelques pourcents liés aux espaces. Les gains les plus importants viennent des exports d’outils de design — Inkscape, Illustrator — qui est exactement l’origine de l’essentiel de la scorie.

La minification change-t-elle le rendu du SVG ?#

Non, pour les catégories que cet outil retire : commentaires, métadonnées, espaces de noms d’éditeur et espaces entre éléments ne portent aucune sémantique de rendu. Les espaces à l’intérieur des éléments textuels (<text>, <title>, <desc>, <style>, <script>) sont délibérément préservés, parce que là, ils peuvent être déterminants.