Optimiseur SVG
Des SVG plus légers
SVG d'origine
Options
Garder viewBox permet de redimensionner l'image en CSS ; <title> sert d'alternative textuelle aux lecteurs d'écran.
SVG optimisé
Importez ou collez un SVG pour l'optimiser.
Tout se passe dans votre navigateur : le fichier n'est envoyé nulle part. L'aperçu est affiché comme une image, aucun script du SVG n'est exécuté.
À propos de l'outil
Cet outil réduit le poids d'un fichier SVG exporté depuis Figma, Illustrator ou Inkscape. Il s'appuie sur svgo avec son préréglage par défaut : suppression des métadonnées, des commentaires et des attributs inutiles, simplification des chemins. Vous importez un fichier de 5 Mo au maximum ou collez le code, puis comparez le poids avant et après, le gain en pourcentage et les deux aperçus côte à côte.
Plusieurs options ajustent le résultat : plusieurs passes, précision de 0 à 8 décimales, suppression de viewBox, de width et height ou de la balise title, conservation des id. Le SVG optimisé se copie ou se télécharge en .min.svg. L'outil le convertit aussi en composant React, en JSX ou en TypeScript, avec le nom de composant de votre choix et les props transmises à la balise svg.
Comment l'utiliser
- Cliquez sur « Importer un fichier SVG » ou collez votre code dans « Ou collez le code SVG ».
- Réglez les « Options » : « Plusieurs passes », « Précision (décimales) », « Supprimer viewBox », « Garder les identifiants (id) »…
- Vérifiez le poids « Avant », « Après » et le « Gain », ainsi que les deux aperçus.
- Cliquez sur « Copier » ou « Télécharger » pour récupérer le SVG optimisé.
- Pour React, saisissez le « Nom du composant », cochez ou non « TypeScript (props typées) », puis « Copier le composant ».
Questions fréquentes
Mon SVG est-il envoyé à un serveur ?
Non. svgo est chargé dans la page et l'optimisation, comme la conversion en composant React, se fait dans votre navigateur. Le fichier n'est envoyé nulle part, et l'aperçu est affiché comme une image, donc aucun script contenu dans le SVG n'est exécuté.
Faut-il supprimer l'attribut viewBox ?
En général, non. viewBox permet de redimensionner l'image en CSS tout en gardant ses proportions. C'est pourquoi l'option est désactivée par défaut. Supprimer width et height est souvent plus utile pour une icône dont la taille est fixée en CSS.
Quelle précision choisir ?
La précision fixe le nombre de décimales gardées dans les chemins et les transformations, de 0 à 8, avec 3 par défaut. Baisser la valeur réduit le poids, mais peut déformer les petits détails : comparez les deux aperçus avant de télécharger.
Comment fonctionne la conversion en composant React ?
Les attributs sont renommés pour JSX (class devient className, stroke-width devient strokeWidth), les styles en ligne deviennent des objets, et les balises script comme les gestionnaires d'événements sont retirés. Les props du composant sont transmises à la balise svg.