tiny svgTiny SVG

Maîtriser le panneau de paramètres d'optimisation de Tiny SVG

Un guide complet de tous les paramètres d'optimisation et fonctionnalités du panneau de configuration de Tiny SVG

Maîtriser le panneau de paramètres d'optimisation de Tiny SVG

Le panneau de paramètres d'optimisation de Tiny SVG vous donne un contrôle complet sur la façon dont vos fichiers SVG sont optimisés. Dans ce guide complet, nous explorerons chaque paramètre et fonctionnalité pour vous aider à tirer le meilleur parti de votre flux de travail d'optimisation SVG.

Comprendre le panneau de paramètres

Le panneau de paramètres est divisé en trois sections principales :

  1. Paramètres globaux - Contrôler le comportement global d'optimisation
  2. Fonctionnalités - Activer/désactiver 45+ plugins SVGO individuels
  3. Options d'export - Configurer les dimensions d'export PNG/JPEG

Plongeons en profondeur dans chaque section.

Paramètres globaux

Afficher l'original

Objectif : Afficher côte à côte le SVG original et optimisé

Quand l'utiliser :

  • Comparer les différences visuelles avant/après optimisation
  • Vérifier que l'optimisation ne casse pas votre SVG
  • Assurance qualité lors du traitement par lots
// Quand activé, vous verrez :
// Original : 12.5 Ko | Optimisé : 4.2 Ko (-66.4%)

Astuce : Le panneau bascule automatiquement vers l'onglet "optimisé" quand la compression se termine, mais vous pouvez activer ce paramètre pour garder les deux vues visibles.

Comparer gzippé

Objectif : Afficher les tailles compressées gzip au lieu des tailles de fichiers brutes

Pourquoi c'est important : Les serveurs web servent généralement les fichiers avec compression gzip, donc cela vous donne une image plus précise des tailles de fichiers réels.

// Sans gzip :
Original : 3.8 Ko → Optimisé : 1.9 Ko
 
// Avec gzip activé :
Original : 3.8 Ko → Optimisé : 1.9 Ko

Meilleure pratique : Vérifiez toujours les tailles gzippées pour les déploiements en production, car elles représentent mieux les tailles de transfert réelles sur HTTP.

Mettre en forme le balisage

Objectif : Formater le code SVG optimisé avec une indentation appropriée

Compromis :

  • ✅ Activé : Plus lisible, plus facile à déboguer (+5-10% de taille de fichier)
  • ❌ Désactivé : Minifié, taille de fichier plus petite, plus difficile à lire
<!-- Mis en forme -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
</svg>
 
<!-- Minifié -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>

Recommandation : Activer pour le développement/débogage, désactiver pour les builds de production.

Multipass

Objectif : Exécuter le processus d'optimisation plusieurs fois jusqu'à ce qu'aucune amélioration supplémentaire ne soit possible

Comment ça marche : Certaines optimisations peuvent activer d'autres optimisations. Par exemple, supprimer les groupes vides pourrait rendre les groupes parents réductibles.

// Passage simple : 12.5 Ko → 5.1 Ko (-59.2%)
// Multipass :    12.5 Ko → 4.2 Ko (-66.4%)

Note de performance : Multipass peut prendre 2-3x plus de temps pour les SVG complexes, mais les économies de taille de fichier en valent généralement la peine.

Meilleure pratique : Gardez ceci activé sauf si vous optimisez des centaines de fichiers et avez besoin d'un traitement plus rapide.

Précision numérique

Objectif : Contrôler la précision décimale pour les valeurs numériques (0-10)

Par défaut : 2

Exemples :

<!-- Précision : 0 -->
<circle cx="12" cy="12" r="5"/>
 
<!-- Précision : 2 (par défaut) -->
<circle cx="12.35" cy="12.47" r="5.18"/>
 
<!-- Précision : 5 -->
<circle cx="12.34567" cy="12.47234" r="5.18392"/>

Compromis :

  • Précision inférieure (0-1) : Fichiers plus petits, différences visuelles potentielles dans les chemins complexes
  • Précision moyenne (2-3) : Équilibré, adapté à la plupart des icônes et illustrations
  • Précision supérieure (4-10) : Fichiers plus grands, préserve les détails complexes

Recommandation : Utilisez 2 pour les icônes, 3-4 pour les illustrations détaillées, 5+ pour les diagrammes techniques.

Précision de transformation

Objectif : Contrôler la précision décimale pour les opérations de transformation (rotation, échelle, translation)

Par défaut : 4

Pourquoi séparé de la précision numérique ? : Les transformations sont plus sensibles aux erreurs d'arrondi. Une petite erreur dans un angle de rotation peut provoquer des distorsions visibles.

<!-- Précision de transformation : 2 -->
<g transform="translate(12.35, 8.47) rotate(45.12)">
 
<!-- Précision de transformation : 4 (par défaut) -->
<g transform="translate(12.3456, 8.4712) rotate(45.1234)">

Recommandation : Gardez à 4 sauf si vous avez des transformations très simples (utilisez alors 2) ou besoin d'une précision sous-pixel (utilisez 5-6).

Basculements de fonctionnalités (Plugins SVGO)

Tiny SVG donne accès à 45+ plugins SVGO. Voici les plus importants :

Plugins essentiels (généralement activés)

removeDoctype

Supprime les déclarations <!DOCTYPE> dont les navigateurs n'ont pas besoin pour les SVG inline.

<!-- Avant -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "...">
<svg>...</svg>
 
<!-- Après -->
<svg>...</svg>

Économies : ~100-200 octets

removeComments

Supprime tous les commentaires XML.

<!-- Avant -->
<!-- Créé avec Figma -->
<!-- Icône : Accueil -->
<svg>...</svg>
 
<!-- Après -->
<svg>...</svg>

Quand désactiver : Si vous devez préserver les commentaires d'attribution ou les commentaires conditionnels.

removeMetadata

Supprime les balises <metadata> contenant les informations de l'éditeur.

<!-- Avant -->
<svg>
  <metadata>
    <rdf:RDF>...</rdf:RDF>
  </metadata>
  <path d="..."/>
</svg>
 
<!-- Après -->
<svg>
  <path d="..."/>
</svg>

Économies : Peut supprimer des kilo-octets des fichiers exportés depuis Adobe Illustrator.

cleanupIds

Supprime ou minifie les IDs et références inutilisées.

<!-- Avant -->
<defs>
  <linearGradient id="gradient-inutilisé-1234567890">
  <linearGradient id="gradient-utilisé-9876543210">
</defs>
<rect fill="url(#gradient-utilisé-9876543210)"/>
 
<!-- Après -->
<defs>
  <linearGradient id="a">
</defs>
<rect fill="url(#a)"/>

Quand désactiver : Si vous intégrez plusieurs SVG dans une page HTML et devez éviter les conflits d'ID.

convertPathData

Optimise les commandes et coordonnées de chemin.

<!-- Avant -->
<path d="M 10.000 10.000 L 20.000 10.000 L 20.000 20.000 Z"/>
 
<!-- Après -->
<path d="M10 10h10v10z"/>

Économies : Réduction de 30-50% des données de chemin dans les cas typiques.

Quand désactiver : Jamais (sauf si vous déboguez des problèmes de chemin).

Plugins situationnels

removeViewBox

Supprime l'attribut viewBox.

<!-- Avant -->
<svg width="24" height="24" viewBox="0 0 24 24">
 
<!-- Après -->
<svg width="24" height="24">

⚠️ AVERTISSEMENT : Gardez presque toujours ceci désactivé. Le viewBox est critique pour les SVG responsives.

Activez seulement si :

  • Vous avez des attributs width et height explicites
  • Le SVG ne sera jamais mis à l'échelle
  • Vous utilisez le SVG à une taille fixe

removeDimensions

Supprime les attributs width et height tout en préservant viewBox.

<!-- Avant -->
<svg width="24" height="24" viewBox="0 0 24 24">
 
<!-- Après -->
<svg viewBox="0 0 24 24">

Avantages : Rend les SVG responsives par défaut (elles s'adapteront au conteneur parent).

Quand désactiver : Si vous avez besoin de SVG à taille fixe ou utilisez des sprites SVG.

convertShapeToPath

Convertit les formes de base (<circle>, <rect>, <polygon>) en éléments <path>.

<!-- Avant -->
<circle cx="12" cy="12" r="10"/>
 
<!-- Après -->
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20z"/>

Compromis :

  • ✅ Peut activer d'autres optimisations de chemin
  • ✅ Taille de fichier légèrement plus petite dans certains cas
  • ❌ Code moins lisible
  • ❌ Plus difficile à éditer manuellement

Recommandation : Activer pour la production, désactiver pour le développement.

removeTitle / removeDesc

Supprime les éléments <title> et <desc>.

<!-- Avant -->
<svg>
  <title>Icône Accueil</title>
  <desc>Une icône en forme de maison représentant l'accueil</desc>
  <path d="..."/>
</svg>
 
<!-- Après -->
<svg>
  <path d="..."/>
</svg>

⚠️ AVERTISSEMENT D'ACCESSIBILITÉ : Ces éléments fournissent des avantages d'accessibilité pour les lecteurs d'écran.

Meilleure pratique :

  • Gardez désactivé pour les SVG autonomes
  • Peut activer si vous utilisez aria-label ou aria-labelledby sur l'élément <svg>
  • Toujours activer pour les icônes décoratives (avec aria-hidden="true")

Plugins avancés

collapseGroups

Fusionne les éléments de groupe (<g>) inutiles.

<!-- Avant -->
<g>
  <g>
    <g>
      <path d="..."/>
    </g>
  </g>
</g>
 
<!-- Après -->
<path d="..."/>

Économies : Réduit la profondeur du DOM et la taille du fichier.

mergePaths

Combine plusieurs chemins en un seul quand c'est possible.

<!-- Avant -->
<path d="M10 10h5"/>
<path d="M15 10h5"/>
 
<!-- Après -->
<path d="M10 10h10"/>

Quand désactiver : Si vous devez animer des chemins individuellement séparément.

inlineStyles

Déplace le CSS des blocs <style> vers des attributs inline.

<!-- Avant -->
<style>.a{fill:red}</style>
<rect class="a"/>
 
<!-- Après -->
<rect fill="red"/>

Avantages : Meilleure compatibilité, pas de problèmes de spécificité CSS.

Quand désactiver : Si vous utilisez des animations CSS ou voulez thématiser les SVG avec des feuilles de style externes.

Options d'export

Préréglages d'échelle

Tiny SVG offre des préréglages d'échelle pratiques pour l'export PNG/JPEG :

  • 0.25x - Images vignette/aperçu
  • 0.5x - Affichages basse résolution
  • 1x - Taille originale
  • 2x - Affichages Retina (le plus courant)
  • 3x - Appareils Android haute DPI
  • 4x-8x - Qualité d'impression ou affichages ultra-haute résolution

Exemple de flux de travail :

// SVG original : 24×24
// Export 2x : 48×48 PNG (pour les affichages Retina)
// Export 3x : 72×72 PNG (pour Android haute DPI)

Dimensions personnalisées

Vous pouvez aussi entrer des valeurs de largeur et hauteur personnalisées :

  • Ratio d'aspect verrouillé par défaut - changer la largeur ajuste automatiquement la hauteur
  • Utile pour :
    • Images de médias sociaux (1200×630 pour Open Graph)
    • Exigences de conception spécifiques
    • Créer plusieurs tailles d'export

PNG vs JPEG

Export PNG :

  • Compression sans perte
  • Supporte la transparence
  • Meilleur pour : Icônes, logos, illustrations avec transparence
  • Taille typique : Plus grand que JPEG

Export JPEG :

  • Compression avec perte (95% de qualité par défaut)
  • Pas de transparence (fond blanc)
  • Meilleur pour : Illustrations complexes sans transparence
  • Taille typique : 40-60% plus petit que PNG
// Même export 512×512 :
PNG : 87 Ko
JPEG : 34 Ko (-61%)

Flux de travail pratiques

Flux 1 : Optimisation d'icônes

Paramètres :
✅ Afficher l'original : false
✅ Comparer gzippé : true
✅ Mettre en forme le balisage : false (production)
✅ Multipass : true
📊 Précision numérique : 2
📊 Précision de transformation : 4
 
Plugins :
✅ removeComments
✅ removeMetadata
✅ cleanupIds
✅ removeDimensions (rend responsive)
❌ removeViewBox (GARDER viewBox !)
❌ removeTitle (accessibilité)
✅ convertPathData
✅ collapseGroups
✅ mergePaths

Résultat : Réduction de taille de fichier de 60-70%, qualité visuelle parfaite, accessibilité maintenue.

Flux 2 : Optimisation d'illustrations

Paramètres :
✅ Afficher l'original : true (vérification QA)
✅ Comparer gzippé : true
✅ Mettre en forme le balisage : true (plus facile à éditer)
✅ Multipass : true
📊 Précision numérique : 3 (plus de détails)
📊 Précision de transformation : 5
 
Plugins :
✅ removeComments
✅ removeMetadata
✅ cleanupIds
❌ convertShapeToPath (garder lisible)
❌ removeDimensions (taille explicite)
❌ removeViewBox
✅ removeTitle (si utilisation de aria-label)
✅ convertPathData
✅ collapseGroups
❌ mergePaths (préserver les couches)

Résultat : Réduction de 40-50%, préserve l'éditabilité, maintient la fidélité visuelle.

Flux 3 : Compression maximale

Paramètres :
✅ Afficher l'original : false
✅ Comparer gzippé : true
✅ Mettre en forme le balisage : false
✅ Multipass : true
📊 Précision numérique : 1
📊 Précision de transformation : 2
 
Plugins :
✅ Activer TOUS les plugins d'optimisation
✅ removeTitle
✅ removeDesc
✅ convertShapeToPath
✅ removeDimensions
✅ Tous les plugins de nettoyage et minification

Résultat : Réduction de 70-80%, peut avoir des différences visuelles mineures, pas accessible, difficile à éditer.

Cas d'usage : Ensembles d'icônes volumineux, éléments décoratifs, scénarios de performance maximale.

Astuces de pro

1. Réinitialiser par défaut

Si vous avez expérimenté avec les paramètres et voulez recommencer, cliquez sur le bouton Tout réinitialiser dans la section Fonctionnalités.

2. Paramètres persistants

Tous vos paramètres sont sauvegardés dans localStorage et persistent entre les sessions. Vous n'avez pas besoin de reconfigurer à chaque fois.

3. Stratégie de traitement par lots

Lors de l'optimisation de plusieurs SVG :

  1. Configurez les paramètres une fois
  2. Téléchargez et optimisez chaque fichier
  3. Les paramètres restent constants
  4. Téléchargez tous les fichiers optimisés

4. Vérification rapide de qualité

Activez temporairement "Afficher l'original" pour vérifier :

  • Aucun artefact visuel
  • Les couleurs restent précises
  • Les dégradés s'affichent correctement
  • Le texte est lisible (si non converti en chemins)

5. Dimensions d'export pour les systèmes de conception

Créez une stratégie d'export cohérente :

Icônes : 1x (24×24), 2x (48×48), 3x (72×72)
Illustrations : 1x (original), 2x (Retina)
Social : Personnalisé (1200×630 pour images OG)

Problèmes courants et solutions

Problème : Le SVG semble différent après optimisation

Solution :

  • Augmentez la précision numérique (essayez 3 ou 4)
  • Augmentez la précision de transformation (essayez 5 ou 6)
  • Désactivez convertShapeToPath
  • Désactivez mergePaths
  • Activez "Afficher l'original" pour identifier le plugin problématique

Problème : Le SVG ne s'adapte pas de manière responsive

Solution :

  • Assurez-vous que removeViewBox est désactivé
  • Activez removeDimensions (supprime width/height fixes)
  • Vérifiez que les valeurs viewBox sont correctes (pas "0 0 0 0")

Problème : Le texte disparaît ou change de police

Solution :

  • Convertissez le texte en contours dans votre outil de conception avant d'exporter
  • Ou désactivez removeTitle, removeDesc, et vérifiez cleanupIds

Problème : Dégradés ou filtres cassés

Solution :

  • Désactivez cleanupIds (pourrait renommer des références)
  • Désactivez removeUselessDefs
  • Vérifiez que les définitions de dégradé/filtre ne sont pas supprimées

Problème : La taille de fichier a à peine diminué

Raisons possibles :

  • Le SVG était déjà optimisé
  • Désactivez prettifyMarkup pour une sortie plus petite
  • Activez multipass pour une optimisation plus profonde
  • Baissez la précision numérique/de transformation
  • Activez des plugins plus agressifs comme convertShapeToPath

Conclusion

Le panneau de paramètres d'optimisation de Tiny SVG vous donne un contrôle granulaire sur chaque aspect de l'optimisation SVG. En comprenant chaque paramètre et plugin, vous pouvez :

  • Optimiser pour la taille de fichier sans sacrifier la qualité
  • Maintenir l'accessibilité en gardant les éléments sémantiques
  • Préserver l'éditabilité pour l'itération de conception
  • Exporter à n'importe quelle taille pour différents appareils et cas d'usage

Commencez avec les valeurs par défaut recommandées, puis ajustez en fonction de vos besoins spécifiques. Les meilleurs paramètres sont ceux qui équilibrent la taille de fichier, la qualité visuelle, et les exigences de votre flux de travail.

Bon optimisation !