Loading…

À propos Beautificateur et Minificateur SVG en Ligne

Vous travaillez avec des fichiers SVG désordonnés ou trop volumineux ? Collez votre code ou téléchargez un fichier `.svg`, choisissez **Formater** pour embellir ou **Minifier** pour réduire sa taille, et obtenez instantanément un balisage SVG propre et optimisé. Parfait pour les designers, les développeurs front-end et toute personne ayant besoin d'une optimisation vectorielle rapide et sûre. 🚀

Fonctionnalités Clés de Notre Formateur SVG

  • **Mode Beautifier** avec indentation intelligente, retour à la ligne et alignement des attributs
  • **Mode Minifier** qui supprime les espaces, commentaires et métadonnées redondantes
  • Formatage de style Prettier et optimisation de style SVGO sous le capot
  • Style d'indentation configurable (espaces ou tabulations) et taille d'indentation
  • Colonne de retour optionnelle pour garder les chemins et attributs longs bien organisés
  • Style de fin de ligne cohérent (LF / CRLF) pour des différences propres entre les systèmes d'exploitation
  • Glissez-déposez des fichiers `.svg` jusqu'à 5 Mo ou collez le balisage SVG en ligne
  • Traitement 100 % côté client — vos œuvres ne quittent jamais le navigateur
  • Copie en un clic ou téléchargement du résultat formaté (`.formatted.svg`) ou minifié (`.min.svg`)
  • Interface réactive qui fonctionne parfaitement sur ordinateurs portables, de bureau et tablettes

🔧 Comment formater ou minifier un SVG : Guide rapide for svg-formatter

1

1. Coller ou téléverser un SVG

📥 Glissez-déposez votre fichier `.svg` ou collez le balisage SVG brut dans l'éditeur. L'outil détecte automatiquement le contenu standard `image/svg+xml`.

2

2. Choisir Formater ou Minifier

✨ Sélectionnez **Formater** pour un balisage lisible par l'humain (idéal pour les revues et le contrôle de version) ou **Minifier** pour la taille de fichier la plus petite possible.

3

3. Ajuster les options de formatage

⚙️ Ajustez le **Style d'indentation** (espaces ou tabulations), la **Taille d'indentation** et optionnellement le **Retour à la ligne / Longueur de ligne**. Ces paramètres correspondent directement aux réglages du formateur sous-jacent.

4

4. Prévisualiser et exporter

👀 Inspectez le code SVG optimisé, testez-le rapidement dans votre projet, puis copiez-le dans votre presse-papiers ou téléchargez le résultat sous forme de nouveau fichier `.svg`.

Détails techniques

Moteur d'embellissement (Mode Formatage)

Le mode formatage utilise un moteur de style Prettier optimisé pour le balisage XML SVG. Il se concentre sur la lisibilité et des différences stables et prévisibles.

AspectComportementNotes
Style d'indentationEspaces ou TabulationsConfigurable via **Style d'indentation** (correspond à `indentStyle`).
Taille d'indentation1–8 espacesContrôle la largeur d'imbrication lors de l'utilisation d'espaces (correspond à `indentSize`).
Retour à la ligne / Longueur de ligne0–120 colonnes`0` désactive le retour à la ligne ; sinon, les longues lignes sont renvoyées autour de la colonne choisie (correspond à `wrapLineLength`).
Fin de ligneLF (`\n`) ou CRLF (`\r\n`)Maintient les fins de ligne cohérentes entre les systèmes d'exploitation (correspond à `endOfLine`).
Langue de sortieSVG au format XMLMaintient une structure XML compatible SVG pour une intégration sécurisée.

Pipeline de Minification (Mode Minifier)

Le mode minification utilise un pipeline inspiré de SVGO axé sur la réduction de taille tout en préservant le rendu visuel.

ÉtapeDescriptionImpact
Supprimer les commentairesRetire les nœuds de commentaire `<!-- ... -->` qui n'affectent pas le rendu.Fichiers plus petits, différences plus claires.
Éliminer les espaces redondantsRéduit les espaces, tabulations et sauts de ligne inutiles.Gains importants pour les SVG exportés par des éditeurs verbeux.
Nettoyer les métadonnéesSupprime optionnellement les nœuds de métadonnées non rendus lorsque c'est sûr.Idéal pour les ressources de production publiques.
Normaliser les attributsSimplifie et réorganise les attributs de manière stable.Sortie plus compacte, meilleure capacité de mise en cache.

Encodage & Compatibilité

La sortie est un SVG UTF-8 compatible avec les navigateurs et outils modernes, conforme à la spécification SVG 2.

Performance & Limites (Navigateur de bureau typique)

Type de fichierTaille d'entréeTemps d'embellissementTemps de minificationRéduction de taille typique
Icône5 Ko⚡ < 15 ms⚡ < 20 ms≈ 25–40 %
Illustration100 Ko⚡ < 60 ms⚡ < 90 ms≈ 40–55 %
Graphique principal500 Ko⏱️ < 300 ms⏱️ < 450 ms≈ 50–60 %
Les performances réelles dépendent de votre CPU, navigateur et complexité du SVG.

Alternatives CLI pour utilisateurs avancés

Vous préférez les workflows en terminal ou l'intégration CI ? Combinez Prettier et SVGO pour un comportement similaire à cet outil :

Linux / 🍎 macOS

Embellir SVG avec Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Applique une indentation cohérente et un retour à la ligne à votre balisage SVG.

Minifier SVG avec SVGO

npx svgo input.svg -o input.min.svg

Supprime les commentaires, métadonnées et espaces redondants pour des fichiers plus petits.

Windows (PowerShell ou CMD)

Formatter SVG avec xmlstarlet (via WSL ou natif)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Formate SVG/XML avec une indentation de 2 espaces.

Minifier SVG avec SVGO (sans installation globale)

npx svgo input.svg -o min.svg

Exécute SVGO directement via `npx` pour des optimisations ponctuelles.

Ajoutez Prettier + SVGO à votre build ou hooks pre-commit pour que les designers puissent exporter des SVGs bruts et votre pipeline les garde optimisés.

Applications pratiques

Performance web et bundles frontend

  • Réduire les charges utiles SVG dans les systèmes de design, jeux d'icônes et feuilles de sprites.
  • Intégrer SVG minifié en ligne dans HTML/CSS pour économiser des requêtes HTTP supplémentaires.
  • Améliorer les Core Web Vitals en réduisant les illustrations principales sur les pages d'accueil.
<img src="/assets/hero.min.svg" alt="Graphique principal optimisé" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Transmission design et contrôle de version

  • Embellir SVG exporté avant la revue de code pour rendre les diffs lisibles.
  • Conserver un `.formatted.svg` pour la collaboration et un `.min.svg` pour la production.
  • Imposer une indentation cohérente et un ordre d'attributs dans un système de design.

Mobile, emails et applications hybrides

  • Minifier les SVGs intégrés dans les emails HTML pour des campagnes plus légères.
  • Réduire la taille des bundles d'applications dans React Native / Capacitor / Ionic lors de l'envoi de nombreuses icônes.
  • Économisez de la bande passante pour les utilisateurs sur des connexions lentes ou avec forfait limité.

❓ Frequently Asked Questions

❓Qu'est-ce que le formatage SVG ?

Le formatage (ou embellissement) restructure votre balisage SVG avec une indentation cohérente, des sauts de ligne et un ordre des attributs. Il ne modifie pas le rendu de l'image, seulement l'apparence du code et son comportement lors des différences.

📏La minification va-t-elle altérer l'apparence de mon SVG ?

Dans des cas normaux, non. La minification supprime les commentaires, les espaces redondants et les métadonnées non affichées. Elle est conçue pour préserver le résultat visuel tout en réduisant la taille. Si vous dépendez de métadonnées spéciales pour les outils d'édition, conservez une sauvegarde du fichier original.

🔒Mon SVG est-il téléchargé sur un serveur ?

Jamais. Tout le formatage et la minification s'exécutent entièrement dans votre navigateur en utilisant JavaScript/WebAssembly. Vos fichiers SVG ne sont pas envoyés à un serveur ni stockés à distance.

🚀Combien de taille la minification peut-elle économiser ?

Les économies réelles sont généralement comprises entre **30 % et 70 %**, selon la façon dont le SVG a été exporté et la quantité de métadonnées ou d'espaces qu'il contient.

⚠️La suppression des `<métadonnées>` ou des commentaires peut-elle perturber mon flux de travail ?

Pour les graphiques web publics, supprimer les métadonnées et les commentaires est généralement sûr. Cependant, si vos outils de conception stockent des données d'édition ou des informations de licence dans ces sections, conservez une copie originale non minifiée dans le contrôle de version pour les futures modifications.

Pro Tips

Best Practice

Gardez un `icon.formatted.svg` non minifié dans votre dépôt pour des différences propres, puis générez `icon.min.svg` dans le cadre de votre étape de build.

Best Practice

Incluez toujours des éléments `<title>` et `<desc>` significatifs avant la minification pour garder vos SVG accessibles aux lecteurs d'écran.

Best Practice

Combinez la minification SVG avec la compression HTTP (Gzip/Brotli) pour réduire encore plus les octets des illustrations et graphiques lourds.

Best Practice

Pour les jeux d'icônes, envisagez une stratégie de sprite : minifiez une fois, puis référencez les icônes via `<use>` au lieu de dupliquer le code SVG partout.

Additional Resources

Spécification W3C SVG 2
Documentation
MDN Web Docs : SVG
Documentation
SVGO (GitHub)
Documentation
Formatage XML / SVG Prettier
Documentation

Other Tools