Pourquoi minifier du SVG ?

La minification SVG réduit la taille des fichiers, améliore les temps de chargement et optimise les performances web. Cela peut réduire la taille de 20 à 60% en moyenne.

Comment fonctionne la minification SVG ?

La minification supprime les espaces, les commentaires, les métadonnées et les caractères inutiles du code SVG tout en préservant toute la fonctionnalité SVG. Le code reste fonctionnel mais est plus compact.

Puis-je déminifier du code SVG ?

Oui, notre outil peut déminifier du code SVG minifié pour le rendre plus lisible et plus facile à maintenir.

Le code est-il traité de manière sécurisée ?

Absolument. Tout le traitement se fait dans votre navigateur. Aucune donnée n'est envoyée vers nos serveurs, garantissant une confidentialité totale.

Minifier & Déminifier votre SVG en ligne — Optimiseur SVG gratuit

Minifiez et déminifiez votre code SVG instantanément pour réduire la taille de vos fichiers et améliorer les performances de votre site web. Notre optimiseur SVG gratuit en ligne supprime les espaces inutiles, les commentaires, les métadonnées et optimise la structure tout en préservant toute la fonctionnalité SVG. Traitement instantané et sécurisé, sans inscription requise.

Minification SVG

Compression des fichiers SVG en supprimant les espaces, commentaires, métadonnées et caractères inutiles tout en préservant toute la fonctionnalité SVG

Exemple de base

SVG d'entrée

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
  <rect x="20" y="20" width="60" height="60" fill="red"/>
</svg>

SVG minifié

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue"/><rect x="20" y="20" width="60" height="60" fill="red"/></svg>

Options de minification

Supprimer les commentaires

Supprime tous les commentaires SVG () du code

Comparaison avec/sans l'option :

Code original

<svg>
  <!-- Ceci est un commentaire -->
  <circle cx="50" cy="50" r="40"/>
</svg>

Avec removeComments: true

<svg><circle cx="50" cy="50" r="40"/></svg>

Avec removeComments: false

<svg><!-- This is a comment --><circle cx="50" cy="50" r="40"/></svg>

Réduire les espaces

Réduit les espaces multiples en un seul espace

Comparaison avec/sans l'option :

Code original

<svg>
    <text>   Espaces   multiples   </text>
    <g>  Groupe  </g>
</svg>

Avec collapseWhitespace: true

<svg><text> Espaces multiples </text><g> Groupe </g></svg>

Avec collapseWhitespace: false

<svg><text>   Multiple   spaces   </text><g>  Group  </g></svg>

Supprimer les métadonnées

Supprime les éléments de métadonnées du code SVG

Comparaison avec/sans l'option :

Code original

<svg>
  <metadata>Métadonnées</metadata>
  <circle cx="50" cy="50" r="40"/>
</svg>

Avec removeMetadata: true

<svg><circle cx="50" cy="50" r="40"/></svg>

Avec removeMetadata: false

<svg><metadata>Some metadata</metadata><circle cx="50" cy="50" r="40"/></svg>

Supprimer les attributs vides

Supprime les attributs avec des valeurs vides

Comparaison avec/sans l'option :

Code original

<svg>
  <circle cx="50" cy="50" r="40" id="" class=""/>
</svg>

Avec removeEmptyAttributes: true

<svg><circle cx="50" cy="50" r="40"/></svg>

Avec removeEmptyAttributes: false

<svg><circle cx="50" cy="50" r="40" id="" class=""/></svg>

Supprimer les éléments cachés

Supprime les éléments avec les styles display:none ou visibility:hidden

Comparaison avec/sans l'option :

Code original

<svg>
  <circle cx="50" cy="50" r="40" style="display:none"/>
  <rect x="10" y="10" width="20" height="20" style="visibility:hidden"/>
</svg>

Avec removeHiddenElements: true

<svg></svg>

Avec removeHiddenElements: false

<svg><circle cx="50" cy="50" r="40" style="display:none"/><rect x="10" y="10" width="20" height="20" style="visibility:hidden"/></svg>

Autres outils de minification