Aller au contenu principal
Bethemesh
Images & graphisme

Optimiseur SVG

Optimisez vos fichiers SVG localement en supprimant les commentaires, métadonnées et données d’éditeur, puis en compactant les espaces et les décimales.

  • Presse-papiers
  • Export

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Code SVG

Aperçu

Options d’optimisation

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Un SVG exporté depuis Inkscape, Illustrator ou Figma contient souvent plus de texte que de dessin : déclaration XML, commentaires, métadonnées, attributs propres à l’éditeur et coordonnées à cinq décimales. Cet optimiseur retire ce superflu et arrondit les nombres, sans transformer le dessin en image matricielle : le fichier reste vectoriel, lisible et modifiable. Tout se passe dans votre navigateur.

Collez le code d’un SVG ou importez un fichier .svg. La déclaration XML et le DOCTYPE sont toujours retirés ; un commentaire placé avant la balise svg, fréquent chez les éditeurs, est accepté. Cliquez sur Optimiser le SVG : le résultat, son aperçu et trois mesures s’affichent, taille initiale, taille optimisée et gain en octets et en pourcentage.

Quatre options sont activées par défaut : supprimer les commentaires, supprimer les blocs metadata, supprimer les données d’Inkscape et de Sodipodi (attributs inkscape:, sodipodi: et leurs espaces de noms) et réduire les espaces entre les balises. Une cinquième, désactivée par défaut, retire width et height de la balise svg racine lorsqu’un viewBox existe ; les rectangles et images à l’intérieur gardent les leurs.

La précision décimale, de 0 à 8 chiffres (3 par défaut), arrondit les nombres des valeurs d’attributs : tracés, coordonnées, viewBox, transformations. Les zéros inutiles disparaissent (8.00000 devient 8, 0.5 devient .5). Les identifiants, classes, liens et le texte affiché ne sont pas modifiés. Copiez le code ou téléchargez optimized.svg.

Comment utiliser cet outil ?

  1. Ajoutez le SVG

    Collez le code ou importez un fichier .svg complet.

  2. Réglez les options

    Gardez les options par défaut ou ajustez la précision décimale.

  3. Vérifiez et exportez

    Contrôlez l’aperçu et le gain, puis copiez ou téléchargez le résultat.

Calcul du gain affiché

Les tailles sont mesurées en octets UTF-8, avant et après optimisation.

Gain en pourcentage

g = (o − n) ÷ o × 100

Pour l’icône Inkscape : (365 − 148) ÷ 365 × 100 = 59,5 %.

g
gain en pourcentage
o
taille initiale en octets
n
taille optimisée en octets

Cas d'utilisation

Icônes d’un site

Allégez des icônes exportées d’un éditeur avant de les intégrer dans le HTML ou un sprite.

SVG en ligne dans le code

Obtenez un balisage compact et propre à coller dans un composant ou un e-mail.

Logo pour une Data URI

Réduisez le SVG avant de l’encoder en Base64 dans une feuille de style.

Exemples

Icône exportée d’Inkscape

Réglages par défaut. Le dessin est identique : seuls le texte inutile et les décimales au-delà de la troisième ont disparu.

Entrée

Déclaration XML, commentaire, metadata, attributs inkscape:, tracé M12.34567 8.00000 L35.65433 8.00000 L24.00000 40.12345 Z — 365 octets

Résultat

<path d="M12.346 8 L35.654 8 L24 40.123 Z" …> — 148 octets, gain 217 octets (59,5 %)

Précision réduite à 1

Un écart de 0,05 unité est invisible sur une icône de 48 unités, mais peut déformer un plan ou une carte détaillée : vérifiez l’aperçu.

Entrée

Même icône de 48 × 48, précision 1

Résultat

M12.3 8 L35.7 8 L24 40.1 Z — 142 octets (61,1 %)

Conseils et bonnes pratiques

  • Gardez le viewBox : c’est lui qui permet au SVG de s’adapter à n’importe quelle taille.
  • Ne supprimez width et height que si la taille est fixée par le CSS, sinon l’image peut s’afficher à 100 % de la largeur.
  • Sur une icône, 1 ou 2 décimales suffisent généralement ; gardez-en 3 ou plus pour un dessin très détaillé.
  • Conservez le fichier source de l’éditeur : les données supprimées (calques, guides) ne sont plus récupérables dans le SVG optimisé.

Sources et références

Questions fréquentes

Le rendu change-t-il ?

Pas avec les options par défaut sur un dessin courant. Une précision très basse peut déplacer légèrement des points : comparez avec l’aperçu.

Les couleurs et les identifiants sont-ils modifiés ?

Non. Les couleurs hexadécimales, id, class et liens restent intacts, ainsi que le texte des balises text.

Les données d’Illustrator ou Figma sont-elles retirées ?

Les commentaires et metadata, oui. Les attributs propriétaires retirés sont ceux d’Inkscape et de Sodipodi ; ceux d’autres éditeurs restent.

L’outil fusionne-t-il les tracés ou simplifie-t-il les formes ?

Non. Il nettoie le code et arrondit les nombres, sans réécrire la géométrie comme le ferait SVGO.

Le fichier reste-t-il modifiable ?

Oui, il reste un SVG texte que tout éditeur vectoriel ou de code peut ouvrir.

Mon SVG est-il envoyé sur un serveur ?

Non. L’optimisation est faite par votre navigateur.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Convertir un SVG

Convertissez un SVG en PNG, JPEG ou WebP, avec aperçu et réglages de sortie.

Images & graphismeUtiliser l’outil

Générateur de favicon

Créez un favicon.ico et les icônes PNG d’un site (16 à 512 px) à partir d’une image, dans votre navigateur.

Images & graphismeUtiliser l’outil

À lire aussi

GuideBonnes pratiquesIntermédiaire

Optimiser un fichier SVG sans altérer son rendu

Apprenez à alléger un SVG en supprimant les données inutiles, en réduisant la précision avec prudence et en vérifiant que le rendu, l’accessibilité et les licences restent intacts.

31 août 202630 min
GuideFormatsDébutant

SVG : comprendre le format vectoriel

Découvrez comment un fichier SVG décrit des formes, utilise viewBox et s’intègre dans une page Web, avec les bonnes pratiques de responsive, d’accessibilité et de sécurité.

31 août 202633 min
TutorielBonnes pratiquesDébutant

Optimiser ses images pour le Web sans perdre en qualité

Redimensionnement, compression, WebP, AVIF, métadonnées et traitement par lot : une méthode complète pour alléger les images d’un site sans dégrader inutilement leur rendu.

30 août 20265 min