Optimiseur SVG

Cela varie considérablement selon la source. Les fichiers SVG exportés depuis Adobe Illustrator incluent généralement de grandes quantités de métadonnées spécifiques à Illustrator, de données de calques, de références de polices et d'espaces de noms XML qui sont supprimés. Les exports d'Inkscape portent leurs propres espaces de noms d'éditeur et commentaires. Les SVG de Figma sont généralement plus propres. Économies typiques : 20-40% pour les SVG déjà propres, 40-70% pour les exports Illustrator ou Inkscape avec des métadonnées lourdes. L'outil affiche le nombre exact d'octets avant et après afin que vous sachiez toujours quel est le résultat.

Les outils de conception intègrent des données propriétaires à l'intérieur des fichiers SVG pour préserver leurs propres fonctionnalités d'édition : Inkscape stocke les noms de calques et les positions des guides dans les espaces de noms sodipodi: et inkscape:, Illustrator intègre des données dans les espaces de noms i: et dc:, et les anciens outils incluent des métadonnées Sketch ou Adobe. Aucune de ces données n'est nécessaire pour afficher le SVG dans un navigateur. La suppression des données de l'éditeur produit souvent la plus grande réduction de taille, en particulier pour les fichiers Illustrator complexes.

La précision décimale contrôle le nombre de chiffres conservés après la virgule dans les valeurs de coordonnées (par exemple, d="M 10.3456789 20.1234567"). Passer de 6 à 2 transforme cela en d="M 10.35 20.12", économisant des octets au prix d'un léger arrondi des coordonnées. Pour les icônes et les illustrations simples, une précision de 2-3 est invisible. Pour les dessins techniques détaillés ou les illustrations avec des courbes fines, restez à 4-5. Vérifiez la prévisuale à un zoom de 100% après avoir réduit la précision pour repérer d'éventuels artefacts d'arrondi.

Les éléments SVG ont souvent des IDs verbeux générés par les outils de conception : id="rect_123456789" ou id="Layer_1_xA0_Background". Le nettoyage des IDs remplace ceux-ci par des noms plus courts comme id="a" ou id="b", économisant des octets sur les fichiers SVG volumineux avec de nombreux éléments référencés. Ceci est sans danger pour les fichiers SVG autonomes. Si vos IDs SVG sont référencés par des sélecteurs CSS externes ou du JavaScript dans votre page web (par exemple, document.getElementById("myIcon")), désactivez cette option ou mettez à jour vos références après l'optimisation.

Oui. Cliquez sur "Ou coller le code SVG" pour passer au panneau de saisie de code et collez votre balisage SVG directement. Ceci est utile si vous avez un SVG intégré dans un fichier HTML, copié depuis un outil de design ou généré par une bibliothèque de graphiques. Après l'optimisation, copiez le résultat avec le bouton Copy Code et collez-le là où vous en avez besoin.

Non. L'outil utilise l'API DOMParser intégrée au navigateur pour analyser et nettoyer le SVG entièrement dans votre onglet de navigation. Aucun fichier n'est téléchargé, aucun serveur ne traite votre SVG, et rien ne quitte votre machine. Cela permet d'optimiser en toute sécurité des actifs SVG propriétaires ou sensibles tels que des schémas de produits ou des éléments de marque.

Optimisez avant l'envoi (commit). Des fichiers SVG plus petits signifient des opérations git plus rapides, une taille de dépôt réduite et des diffs plus propres (car les métadonnées de l'éditeur changent souvent à chaque enregistrement dans Illustrator). Un bon flux de travail : exportez le SVG de votre outil de design, passez-le dans cet optimiseur, examinez la prévisuale, puis validez la version optimisée. Conservez le fichier source original dans un dossier d'actifs de design séparé si vous devez le modifier à nouveau plus tard.