Optimiseur SVG
Déposez des fichiers ici ou cliquez pour sélectionner
- Sûr
- Le traitement s’effectue sur votre appareil ; aucune entrée/sortie n’est envoyée.
Explication
Analyse la structure du SVG et supprime le balisage inutile tant que le rendu n’est pas affecté. Les styles sont développés, les dimensions optimisées, les attributs réduits et les données numériques ou de tracé simplifiées afin de diminuer efficacement la taille tout en préservant la qualité visuelle.
Opérations réalisées
| Styles | Lorsque c’est possible, le CSS contenu dans <style> est réparti dans les attributs style de chaque élément. Il peut ensuite être converti en attributs de présentation tels que fill et stroke. Les éléments <style> devenus vides et inutiles sont supprimés. |
|---|---|
| Dimensions | Supprime les déclarations width et height de style, ainsi que les attributs width et height de l’élément racine <svg>. Le viewBox, nécessaire à l’affichage adaptatif, est conservé. |
| Attributs | Supprime les attributs inutiles ajoutés par des outils de conception tels que Figma, Adobe XD ou Illustrator, par exemple data-name. Les attributs id et class peuvent également être supprimés s’ils ne sont pas référencés ou deviennent inutiles après la fusion ou la conversion d’éléments, par exemple de <line> vers <path>. |
| Références | Vérifie les attributs de référence tels que filter, clip-path et mask, puis les supprime si leur cible n’existe pas. Les références valides qui influencent le rendu sont conservées. |
| Nombres et tracés | Compare le rendu avec plusieurs précisions d’arrondi (floatPrecision) et choisit automatiquement la plus légère qui limite les différences visuelles. Les données de tracé, comme l’attribut d de <path>, sont également simplifiées, les espaces et redondances inutiles supprimés, et multipass répète l’optimisation afin de réduire au maximum la taille du fichier. |
| Compatibilité | Afin d’éviter les problèmes de rendu, viewBox est conservé. Lorsqu’un SVG contient des éléments <text>, xml:space, qui gère les espaces, est également préservé ; il peut être supprimé en l’absence de <text>. Pour les SVG animés, certaines optimisations sont désactivées par précaution. Le CSS complexe difficile à intégrer en ligne peut aussi être conservé afin de préserver le rendu d’origine. |
Remarques
Le taux de réduction et le résultat final varient selon la structure et le balisage du SVG. Les styles difficiles à développer ou à intégrer automatiquement, par exemple les sélecteurs complexes ou les media queries, peuvent être conservés afin de préserver le rendu.
Lors de la fusion ou de la conversion d’éléments, par exemple de <line> vers <path>, les attributs id et class des éléments d’origine peuvent être supprimés s’ils deviennent inutiles après la modification de la structure.
Les attributs de référence tels que filter, clip-path et mask sont automatiquement supprimés si leur cible n’existe pas, par exemple en cas de référence url(#...) rompue, afin de préserver la cohérence du SVG.
Les SVG contenant des animations, telles que des animations CSS ou des balises <animate>, peuvent être optimisés, mais certaines opérations sont désactivées car le comportement de l’animation peut facilement être altéré. Si le SVG contient des scripts (JS), l’optimisation peut entraîner un comportement inattendu.