Beautifier SVG en ligne — Formateur SVG

Beautifiez du SVG instantanément. Formatez le markup avec une indentation lisible. Traitement dans le navigateur.

Chargement…

Beautification SVG

Beautifiez du SVG en ligne. Formatez le markup avec une indentation lisible.

Fonctionnalités

Formatez le markup SVG avec une indentation lisible sans altérer le rendu graphique.

Beautifier SVG

Formatez le markup SVG avec une indentation lisible sans altérer le rendu graphique.

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>

Fonctionnalités

Notre outil d'optimisation SVG offre un ensemble complet de fonctionnalités pour travailler avec les fichiers SVG.

Minifier SVG

Supprimez les espaces inutiles, commentaires, métadonnées et éléments cachés des fichiers SVG pour réduire la taille tout en préservant la qualité visuelle.

Déminifier SVG

Restaurez un formatage lisible du code SVG minifié avec une indentation et des sauts de ligne appropriés pour faciliter l'édition et le débogage.

Optimiser SVG

Allez au-delà de la minification en supprimant les métadonnées d'éditeur, simplifiant les chemins et nettoyant les éléments inutilisés pour une réduction maximale.

Comment fonctionne l'optimisation SVG

L'optimisation SVG va au-delà de la simple minification. Alors que la minification supprime les espaces et commentaires, l'optimisation analyse la structure SVG pour supprimer les métadonnées d'éditeur (Illustrator, Inkscape), simplifier les données de chemin, fusionner les éléments compatibles et supprimer les définitions inutilisées. Cela peut réduire la taille des fichiers SVG de 20 à 60% sans aucun changement visuel.

Optimisation SVG vs Minification — Quelle différence

La minification est un sous-ensemble de l'optimisation. Minifier un SVG supprime les espaces, sauts de ligne et commentaires. L'optimisation supprime en plus les métadonnées, artefacts d'éditeur, simplifie les coordonnées et nettoie les defs inutilisés. Les deux approches sont sûres et préservent le rendu visuel. Utilisez notre outil pour les deux — collez votre SVG et cliquez sur le bouton approprié.