Optimiseur SVG

Minifie le SVG : supprime commentaires, métadonnées et résidus d’éditeur, et réduit les espaces.

Votre SVG est optimisé localement dans votre navigateur et rien n'est envoyé à un serveur.

Besoin de réduire aussi des images matricielles ? Essayez l'Optimiseur d'images.

À propos de Optimiseur SVG

Cet optimiseur SVG minifie le balisage SVG pour que vos icônes et graphiques soient plus légers et se chargent plus vite. Collez un SVG exporté depuis Figma, Illustrator, Inkscape ou Sketch et l'outil retire le prologue XML, le doctype, les commentaires, les métadonnées et les résidus spécifiques aux éditeurs Inkscape, Sodipodi et Adobe, puis fusionne les espaces pour gagner des octets. Vous pouvez éventuellement retirer les attributs width et height racine pour que le viewBox garde le graphique parfaitement extensible dans les mises en page responsives. C'est une alternative légère et pratique à SVGO pour les développeurs front-end, designers et quiconque a besoin de minifier un SVG ou d'intégrer des icônes en ligne dans HTML, CSS ou composants React. Tout est traité localement dans votre navigateur, et l'outil indique le nombre d'octets avant et après pour voir exactement de combien votre fichier a rétréci.

Fonctionnalités

Comment utiliser Optimiseur SVG

  1. Collez votre source SVG dans la zone de saisie.
  2. Activez les options pour les commentaires, métadonnées, données d'éditeur, dimensions et espaces selon vos besoins.
  3. Lisez la sortie optimisée et les économies d'octets affichées au-dessus.
  4. Copiez le SVG optimisé et déposez-le dans votre projet.

Exemple

Entrée

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- icône cœur -->
  <title>cœur</title>
  <path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>

Sortie

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>

Prologue, commentaire et title retirés avec les espaces fusionnés.

Erreurs courantes et dépannage

Foire aux questions

Qu'est-ce que l'Optimiseur SVG et que retire-t-il ?
C'est un minifieur SVG dans le navigateur qui retire le prologue XML, le doctype, les commentaires, les métadonnées, title et desc, et les résidus d'éditeurs comme Inkscape, Sodipodi et Adobe, puis fusionne les espaces. Vous contrôlez chaque étape avec des boutons.
Comment minifier un SVG avec cet outil ?
Collez votre balisage SVG dans la zone de saisie, activez les nettoyages voulus, puis copiez la sortie optimisée. Le nombre d'octets et le pourcentage économisé apparaissent au-dessus du résultat pour confirmer la réduction.
L'optimisation va-t-elle changer l'apparence de mon SVG ?
Non, les réglages par défaut ne retirent que les données non visuelles et les espaces. Les chemins et formes visuels sont conservés, le graphique rendu reste donc identique.
Dois-je retirer les attributs width et height ?
Retirez-les seulement si votre SVG a un viewBox. Le viewBox garde le graphique extensible, ce qui est idéal pour les icônes responsives et dimensionnées en CSS.
En quoi l'Optimiseur SVG diffère-t-il de SVGO ?
C'est un optimiseur léger et sans dépendance qui couvre les nettoyages SVGO les plus courants dans le navigateur, sans installer d'outil de build ni de configuration Node.
Mon SVG est-il envoyé quelque part ?
Non. L'Optimiseur SVG traite votre balisage localement dans votre navigateur, vos données ne quittent jamais votre appareil et rien n'est envoyé à un serveur.

Outils associés

Tous les outils ArrayKit