Utilia

Optimiseur SVG

Optimisez et minifiez vos fichiers SVG en ligne avec SVGO, dans le navigateur. Préréglages, comparaison visuelle et gain de poids, gzip compris.

Plugins

Supprimer le viewBox empêche le dessin de s’adapter à sa taille, et raccourcir ou supprimer les ID casse le CSS, le JavaScript, les <use> ou les liens d’ancre qui y font référence. Gardez le préréglage Prudent pour les SVG utilisés dans du code, des sprites ou des animations.

Comment optimiser un fichier SVG

  1. Déposez un fichier SVG dans la zone prévue ou cliquez pour le choisir. Vous pouvez aussi coller le code dans le champ Code SVG.
  2. Choisissez un Préréglage : Prudent, Équilibré (par défaut) ou Maximal. La liste Plugins juste en dessous montre précisément ce que chaque préréglage active.
  3. Ajustez si besoin la Précision décimale (de 0 à 8 chiffres), l’option Plusieurs passes et Code indenté (lisible) si vous voulez un code facile à relire. Dès que vous modifiez un plugin, la précision ou les passes, le préréglage devient Personnalisé.
  4. Cliquez sur Optimiser le SVG. Un fichier déposé est optimisé immédiatement, et une fois un premier résultat obtenu, chaque changement de réglage relance l’optimisation.
  5. Consultez la Taille d’origine, la Taille optimisée, le Gain et la ligne Compressé gzip, puis comparez les deux rendus côte à côte.
  6. Cliquez sur Copier pour récupérer le Code SVG optimisé, ou sur Télécharger le SVG optimisé pour l’enregistrer sous le nom nom.min.svg.

L’optimisation est confiée à SVGO 4, l’optimiseur SVG libre (licence MIT) utilisé par la plupart des outils de build web. Sa version navigateur est chargée au premier clic, puis tout se passe sur votre appareil : votre SVG n’est jamais envoyé.

Pourquoi les SVG exportés sont-ils si lourds ?

Un SVG issu d’Illustrator, d’Inkscape, de Figma ou de Sketch contient bien plus que le dessin. Le logiciel y ajoute ses propres espaces de noms et attributs (noms de calques, repères, paramètres d’export), un bloc <metadata>, des commentaires du type « Generator: Adobe Illustrator », des coordonnées à six décimales ou plus, des groupes qui n’entourent qu’un seul élément et des couleurs verbeuses comme #ffffff. Rien de tout cela ne change l’affichage. SVGO le supprime, arrondit les nombres, réécrit les tracés avec des commandes plus courtes, raccourcit les couleurs et fusionne ou déballe les éléments superflus. Une réduction de 40 à 60 % est courante sur des icônes et illustrations exportées.

Les préréglages et les plugins à risque

  • Prudent applique le préréglage par défaut de SVGO mais conserve les ID, les <desc>, les tracés séparés et les règles <style>, avec 3 décimales et une seule passe. C’est le bon choix pour les SVG ciblés par du CSS ou du JavaScript, les sprites et les animations.
  • Équilibré correspond au préréglage par défaut de SVGO, avec 3 décimales et plusieurs passes. Il convient à la plupart des icônes et illustrations affichées comme images.
  • Maximal ajoute Supprimer </strong>, <strong>Supprimer les scripts et attributs d’événement</strong>, <strong>Supprimer width/height (garder le viewBox)</strong> et <strong>Remplacer xlink:href par href</strong>, avec 2 décimales et plusieurs passes.</li> </ul> <p>Aucun préréglage ne supprime le viewBox. <strong>Supprimer le viewBox</strong> n’est là que pour des cas particuliers : sans lui, le dessin ne s’adapte plus à la taille que vous lui donnez en CSS.</p> <p>Sachez ce que les autres plugins peuvent casser :</p> <ul> <li><strong>Raccourcir et supprimer les ID inutilisés</strong> renomme par exemple <code>#icone-accueil</code> en <code>a</code>. Tout sélecteur CSS, requête JavaScript, référence de sprite <code><use href="#…"></code>, lien d’ancre ou animation SMIL/CSS qui visait l’ancien nom cesse de fonctionner.</li> <li><strong>Supprimer <title></strong> et <strong>Supprimer <desc></strong> effacent le nom et la description accessibles. Gardez-les sur les icônes porteuses de sens et les graphiques que les lecteurs d’écran doivent annoncer.</li> <li>Une <strong>Précision décimale</strong> trop faible peut déformer les petites icônes : courbes qui ondulent, bords qui se décalent. Vérifiez toujours la comparaison visuelle ; 3 est une valeur sûre.</li> <li><strong>Fusionner les tracés</strong> regroupe des tracés voisins en un seul : un effet de survol ou une animation qui ciblait un tracé précis perd sa cible.</li> </ul> <h2>Conseils</h2> <ul> <li>Conservez une version maîtresse non optimisée pour les retouches, et traitez le <code>.min.svg</code> comme du code compilé.</li> <li>Activez gzip ou brotli sur votre serveur : le SVG, format texte, se compresse très bien, et la valeur <strong>Compressé gzip</strong> indique ce que vos visiteurs téléchargent réellement (affichée si votre navigateur prend en charge <code>CompressionStream</code>).</li> <li>Un SVG intégré dans le HTML se stylise et s’anime en CSS mais n’est pas mis en cache à part ; un SVG en <code><img></code> est mis en cache mais ne peut pas être stylisé depuis la page.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Questions fréquentes</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Mon SVG est-il envoyé sur un serveur ?</summary> <div class="prose px-5 pb-5"><p>Non. SVGO s’exécute dans votre navigateur. Le seul téléchargement est celui du code de l’optimiseur, lors de la première optimisation.</p></div> </details> <details class="faq group"> <summary>Pourquoi l’aperçu est-il affiché sous forme d’images ?</summary> <div class="prose px-5 pb-5"><p>Le SVG est un format de document qui peut contenir du JavaScript et charger des fichiers externes. Les deux aperçus sont rendus en <code><img></code> à partir d’URL blob locales : dans ce mode, le navigateur n’exécute aucun script et ne charge aucune ressource externe. Prévisualiser un SVG douteux ici est donc sans danger. Le code optimisé, lui, garde ses scripts, sauf si <strong>Supprimer les scripts et attributs d’événement</strong> est coché (c’est le cas avec <strong>Maximal</strong>).</p></div> </details> <details class="faq group"> <summary>Mon SVG optimisé ne se redimensionne plus : que s’est-il passé ?</summary> <div class="prose px-5 pb-5"><p>Le viewBox a sans doute disparu, soit avec <strong>Supprimer le viewBox</strong>, soit plus tôt, à cause d’un autre outil. Réoptimisez l’original avec ce plugin désactivé.</p></div> </details> <details class="faq group"> <summary>Pourquoi mon sprite d’icônes ou mon animation ne fonctionne-t-il plus ?</summary> <div class="prose px-5 pb-5"><p><strong>Raccourcir et supprimer les ID inutilisés</strong> ou <strong>Fusionner les tracés</strong> a modifié les éléments auxquels votre code fait référence. Utilisez le préréglage <strong>Prudent</strong>, qui conserve les deux.</p></div> </details> <details class="faq group"> <summary>Le fichier optimisé n’est pas plus petit : pourquoi ?</summary> <div class="prose px-5 pb-5"><p>Le SVG est probablement déjà minifié. Essayez <strong>Maximal</strong> ou une <strong>Précision décimale</strong> plus faible, et décochez <strong>Code indenté (lisible)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Outils similaires</h2> <ul class="card-grid mt-4"><li><a class="card" href="/fr/svg-en-png/"> <span class="card-title">SVG en PNG</span> <span class="card-text">Convertissez un SVG en PNG, JPG ou WebP dans votre navigateur, à la taille, l'échelle ou la résolution voulue, avec fond transparent ou coloré. Sans envoi.</span> </a></li> <li><a class="card" href="/fr/image-en-svg/"> <span class="card-title">Vectoriser une image en SVG</span> <span class="card-text">Vectorisez un logo ou un dessin PNG ou JPG en tracés SVG dans votre navigateur. Préréglages, nombre de couleurs, filtre des taches, sans envoi de fichier.</span> </a></li> <li><a class="card" href="/fr/compresser-image/"> <span class="card-title">Compresser une image</span> <span class="card-text">Compressez vos images JPG, PNG et WebP avec un curseur de qualité, comparez le poids avant et après et traitez vos photos par lot, sans envoi.</span> </a></li> <li><a class="card" href="/fr/formateur-css/"> <span class="card-title">Formateur et minificateur CSS</span> <span class="card-text">Indentez proprement un CSS désordonné ou minifiez-le avec csso, en voyant la taille avant et après. Tout se passe dans votre navigateur.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Publicité"><span class="ad-label">Publicité</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Des outils en ligne gratuits qui fonctionnent dans votre navigateur. Vos données restent sur votre appareil.</p> </div> <nav aria-label="Catégories"> <p class="font-semibold">Outils</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/fr/outils-texte/">Outils de texte</a></li><li><a class="link-muted" href="/fr/outils-developpeur/">Outils pour développeurs</a></li><li><a class="link-muted" href="/fr/outils-web/">Web, SEO et marketing</a></li><li><a class="link-muted" href="/fr/outils-couleur/">Couleurs et design</a></li><li><a class="link-muted" href="/fr/outils-image/">Outils d'image</a></li><li><a class="link-muted" href="/fr/outils-pdf/">PDF et documents</a></li><li><a class="link-muted" href="/fr/calculatrices-math/">Calculatrices mathématiques</a></li><li><a class="link-muted" href="/fr/calculatrices-finance/">Calculatrices financières</a></li><li><a class="link-muted" href="/fr/outils-date-heure/">Date et heure</a></li><li><a class="link-muted" href="/fr/convertisseurs-unites/">Convertisseurs d'unités</a></li><li><a class="link-muted" href="/fr/calculatrices-sante/">Santé et forme</a></li><li><a class="link-muted" href="/fr/calculatrices-maison/">Maison, bricolage, cuisine et auto</a></li><li><a class="link-muted" href="/fr/generateurs/">Générateurs</a></li><li><a class="link-muted" href="/fr/tests-appareil/">Tests d'appareil et de navigateur</a></li><li><a class="link-muted" href="/fr/outils-audio-video/">Audio et vidéo</a></li><li><a class="link-muted" href="/fr/outils-education/">Éducation et langues</a></li><li><a class="link-muted" href="/fr/jeux/">Jeux</a></li></ul> </nav> <nav aria-label="Informations"> <p class="font-semibold">Informations</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/fr/a-propos/">À propos</a></li> <li><a class="link-muted" href="/fr/nous-joindre/">Nous joindre</a></li> <li><a class="link-muted" href="/fr/confidentialite/">Politique de confidentialité</a></li> <li><a class="link-muted" href="/fr/conditions-utilisation/">Conditions d’utilisation</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>