Softonic

Compresser SVG

Étape 1 / 2
Suivant

Un SVG exporté de Figma, Illustrator ou Sketch contient généralement 2 à 5 fois plus de balisage que nécessaire : espaces de noms de l’éditeur, commentaires, groupes vides, transformations redondantes et coordonnées à 6 décimales. Cet outil passe votre SVG à travers un processus de style SVGO, supprimant le bruit tout en gardant le rendu pixel-identique.

Comment compresser un SVG

  1. 1

    Collez ou importez votre SVG

    Accepte le texte XML brut ou un fichier .svg.

  2. 2

    Choisissez un niveau d'optimisation

    Sûr (supprime les commentaires et les métadonnées de l'éditeur), agressif (réduit les groupes, arrondit les coordonnées, fusionne les chemins), ou personnalisé.

  3. 3

    Examinez la différence

    Comparez le nombre d'octets avant et après, et prévisualisez le résultat rendu pour confirmer que rien n'a changé visuellement.

  4. 4

    Copiez ou téléchargez

    Collez le SVG optimisé directement dans votre code, ou enregistrez-le en tant que fichier.

Qu’est-ce qui alourdit un SVG

Ouvrez un SVG exporté de Figma dans un éditeur de texte et vous verrez généralement :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Générateur : Figma ... -->
  <title>icône</title>
  <desc>Créé avec Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icône" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Presque chaque ligne est supprimable. Le rendu n’a besoin que de svg, viewBox, et path.

Ce que l’optimiseur supprime

Supprimé Pourquoi c’est sûr
Commentaires XML Jamais rendu
Espaces de noms de l’éditeur (sketch, figma) Non utilisés par les navigateurs
<title> / <desc> (optionnel) Texte accessible, à garder s’il est significatif
Groupes <g> vides Pas d’effet visuel
Valeurs d’attribut par défaut Les navigateurs utilisent de toute façon les valeurs par défaut
Transformations d’identité translate(0,0) ne fait rien
Décimales de coordonnées 3 décimales semblent identiques à l’écran
IDs inutilisés Gardez uniquement les IDs référencés ailleurs

Pièges

  • Ne pas supprimer les IDs référencés par CSS ou par url(#...) dans les remplissages, masques, filtres. Le mode agressif peut casser les dégradés.
  • Conservez viewBox. Sans lui, le SVG ne se redimensionnera pas de façon responsive.
  • Conservez <title> si vous en dépendez pour l’accessibilité (les lecteurs d’écran l’annoncent).
  • Évitez de fusionner les instances <use>. L’optimiseur peut les insérer en ligne et faire perdre la source de vérité unique.

Quand la compression économise de vrais octets

SVG est du texte, ce qui signifie que gzip sur le serveur supprime déjà beaucoup de redondance. Un SVG qui passe de 4 Ko à 1 Ko non compressé pourrait ne passer que de 1,2 Ko à 0,7 Ko sur le réseau. Cela en vaut toujours la peine, et la source plus petite est plus facile à lire.

Questions fréquentes

Le mode sûr ne le fera pas. Le mode agressif peut supprimer les IDs référencés par CSS ou les animations SMIL, si votre SVG a des animations, utilisez le mode sûr ou mettez manuellement sur liste blanche les IDs.

Les exports de Figma/Illustrator rétrécissent généralement de 50 à 80 %. Les SVG écrits à la main sont déjà compacts et ne diminuent généralement que de 10 à 20 %.

Par défaut oui, les attributs <title>, <desc> et aria-* sont préservés. Vous pouvez choisir de les supprimer si le SVG est purement décoratif et que le HTML environnant fournit l’étiquette.

Oui. L’attribut xmlns est conservé car il est requis lors du collage de SVG directement dans HTML. Le SVG en ligne est généralement la méthode de livraison la plus rapide pour les petites icônes.

Outils similaires

Créateur de tier list

Créez une tier list privée avec textes et images locales, personnalisez les niveaux, classez au clavier ou par glisser-déposer et exportez.

Générateur de graffitis

Créez un texte façon graffiti avec des effets tag, bulle, bloc, pochoir, néon et wildstyle. Réglez les couleurs et exportez-le en PNG ou SVG.

Compresser GIF

Réduisez la taille d'un GIF animé dans le navigateur en diminuant les dimensions, en conservant moins d'images et en ajustant la qualité d'encodage. Prévisualisez la boucle avant le téléchargement.

Créateur de papier à en-tête

Créez un papier à en-tête réutilisable avec vos coordonnées, couleurs et logo ou initiales. Prévisualisez en A4 ou US Letter, puis imprimez, enregistrez en PDF depuis le navigateur ou téléchargez un PNG.

Générateur de codes-barres

Créez dans le navigateur un code-barres 1D en Code 128, EAN, UPC, ITF-14 ou autre format pris en charge, puis téléchargez-le en SVG ou PNG.

Générateur de mèmes

Ajoutez un texte en haut et en bas d’une image JPG, PNG ou WebP. Réglez la police, la couleur et le contour, puis téléchargez le mème en PNG.