Optimisation SVG : réduire de 100 Ko à 10 Ko

Utilitaires

La nécessité d'optimiser le SVG

Les SVG non optimisés contiennent beaucoup d'informations redondantes—métadonnées de l'éditeur, attributs par défaut, précision excessive, espaces.

Source Taille typique Optimisé Réduction
Export Figma 45 Ko 5 Ko 89 %
Export Illustrator 80 Ko 8 Ko 90 %
Export Inkscape 120 Ko 12 Ko 90 %
SVG écrit à la main 15 Ko 3 Ko 80 %

1. Nettoyage des informations redondantes

Métadonnées de l'éditeur

<!-- Informations redondantes générées par Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:serif="http://www.serif.com/"
     id="Artboard1"
     serif:id="Artboard 1"
     viewBox="0 0 800 600">
  <!-- serif:id, xmlns:serif etc. sont inutiles -->
</svg>

<!-- Optimisé -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
</svg>

Attributs par défaut

<!-- Les valeurs par défaut n'ont pas besoin d'être déclarées explicitement -->
<rect x="0" y="0" width="100" height="100" fill="black" stroke="none" opacity="1"/>

<!-- Optimisé -->
<rect width="100" height="100"/>
Attribut Valeur par défaut Condition de suppression
fill black Hérité de l'élément parent
stroke none Sans contour
opacity 1 Complètement opaque
x / y 0 À l'origine
stroke-width 1 Largeur par défaut
font-size Hérité Identique à l'élément parent

2. Optimisation des chemins

Réduction de précision

<!-- 6 décimales de précision excessive -->
<path d="M12.345678 23.456789 L34.567890 45.678901"/>

<!-- 2 décimales suffisent généralement (unités du système de coordonnées SVG) -->
<path d="M12.35 23.46L34.57 45.68"/>
Précision Taille Différence visuelle
6 décimales 100 % Aucune
3 décimales 60 % Aucune (invisible dans un viewport de 1000px)
2 décimales 50 % Minime
1 décimale 40 % Acceptable pour les petites icônes

Fusion de commandes

<!-- Plusieurs commandes L peuvent être fusionnées -->
<path d="M10 20 L30 40 L50 60 L70 80"/>

<!-- Fusionné (L implicite) -->
<path d="M10 20 30 40 50 60 70 80"/>

Simplification des courbes

<!-- Courbe de Bézier complexe -->
<path d="M0 0C0.12 0.34 0.45 0.67 1 1C1.34 1.23 1.56 1.78 2 2"/>

<!-- Si la courbure est proche d'une ligne droite, peut être simplifiée en L -->
<path d="M0 0L1 1 2 2"/>

3. Fusion de formes

Fusion d'éléments de même style

<!-- Trois cercles de même style -->
<circle cx="10" cy="10" r="5" fill="red"/>
<circle cx="30" cy="10" r="5" fill="red"/>
<circle cx="50" cy="10" r="5" fill="red"/>

<!-- Fusionnés en un seul path -->
<path d="M5 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M25 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M45 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0" fill="red"/>

Réutilisation avec <use>

<!-- Éléments répétés référencés avec <use> -->
<defs>
  <circle id="dot" r="5" fill="red"/>
</defs>
<use href="#dot" x="10" y="10"/>
<use href="#dot" x="30" y="10"/>
<use href="#dot" x="50" y="10"/>

4. Optimisation automatique avec SVGO

Installation

npm install -g svgo

Utilisation en ligne de commande

# Optimiser un seul fichier
svgo input.svg

# Spécifier la sortie
svgo input.svg -o output.svg

# Optimisation par lot
svgo -f ./icons/

# Voir le résultat de l'optimisation
svgo input.svg --show-results

Fichier de configuration

// svgo.config.js
module.exports = {
  multipass: true,  // Optimisation multi-passes
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergePaths',
    'convertShapeToPath',
    'convertTransform',
    'removeUnusedNS',
    'minifyStyles',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'removeHiddenElems',
    'cleanupNumericValues',
    {
      name: 'cleanupNumericValues',
      params: { floatPrecision: 2 },
    },
    {
      name: 'convertPathData',
      params: {
        floatPrecision: 2,
        transformPrecision: 2,
        makeArcs: true,
      },
    },
    'removeDimensions',  // Supprimer width/height, utiliser viewBox
    'removeViewBox',     // Ou conserver viewBox, supprimer dimensions
  ],
};

API Node.js

const { optimize } = require('svgo');

const result = optimize(svgString, {
  path: 'icon.svg',
  multipass: true,
  plugins: [
    { name: 'cleanupNumericValues', params: { floatPrecision: 2 } },
  ],
});

console.log(result.data); // SVG optimisé

5. Optimiser le SVG avec l'outil

Étapes

  1. Ouvrez l'outil de formatage SVG
  2. Collez ou téléchargez le code SVG
  3. Cliquez sur le bouton « Optimiser »
  4. Comparez avant et après l'optimisation :
    • Taille originale → Taille optimisée
    • Pourcentage de réduction
  5. Copiez le résultat optimisé ou téléchargez-le

6. Optimisation des sprites SVG

Sprite en ligne

<!-- Définitions SVG masquées -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
  </symbol>
</svg>

<!-- Utilisation -->
<svg><use href="#icon-home"/></svg>
<svg><use href="#icon-search"/></svg>

Génération automatique de sprite

// Utiliser svg-sprite pour générer automatiquement
const SVGSprite = require('svg-sprite');

const config = {
  mode: {
    symbol: true,  // Générer en mode <symbol>
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false,
  },
};

const spriter = new SVGSprite(config);
// Ajouter les fichiers SVG et compiler

7. Liste de contrôle d'optimisation des performances

Élément d'optimisation Effet Priorité
Supprimer les métadonnées de l'éditeur -20 à 40 % P0
Réduire la précision numérique -10 à 30 % P0
Fusionner les commandes de chemin -5 à 15 % P1
Supprimer les attributs par défaut -5 à 10 % P1
Convertir les formes en chemins -5 à 10 % P2
Supprimer les espaces/commentaires -2 à 5 % P2
Compression Gzip/Brotli -50 à 70 % P0

Note : Le SVG est un format texte, la compression Gzip/Brotli est très efficace. Assurez-vous de l'activer côté serveur.

#SVG#图片优化#图标#压缩#前端