Optimiseur SVG
Nettoyez et allégez des fichiers SVG en supprimant les métadonnées d'éditeur, les commentaires et les espaces blancs redondants, localement dans votre navigateur.
Chargement de Optimiseur SVG… Si rien ne se passe, activez JavaScript.
SVG, abréviation de Scalable Vector Graphics (graphiques vectoriels adaptables), est un format basé sur XML pour les graphiques en deux dimensions qui décrit les formes comme des tracés mathématiques plutôt que comme une grille de pixels. Comme c'est du texte, un SVG s'adapte à n'importe quelle taille sans devenir flou, se compresse bien avec gzip, peut être stylisé avec du CSS, animé et modifié dans un éditeur de texte simple. L'inconvénient est que les fichiers SVG exportés par les outils de conception sont rarement légers. Des éditeurs comme Inkscape, Illustrator et Sketch remplissent leur sortie d'espaces de noms privés, d'historique d'édition, de commentaires du générateur, de métadonnées de document et d'une indentation généreuse, autant de choses que le navigateur ignore lorsqu'il affiche l'image mais qu'il doit tout de même télécharger et analyser.
Questions fréquentes
Mon SVG est-il envoyé à un serveur ?
Que supprime exactement l'optimiseur ?
L'optimisation va-t-elle changer l'apparence de mon image ?
Dois-je conserver l'élément title ?
Pourquoi les fichiers d'Inkscape et d'Illustrator sont-ils bien plus volumineux que nécessaire ?
De combien mon fichier va-t-il rétrécir ?
Cela minifie-t-il aussi ou réécrit-il les données des tracés ?
Puis-je coller du code SVG au lieu de téléverser un fichier ?
À propos de Optimiseur SVG
Cet optimiseur élimine ce superflu. Il analyse votre SVG avec le DOMParser du navigateur lui-même, qui comprend correctement la structure XML au lieu de la découper avec de fragiles expressions régulières, puis parcourt l'arbre et supprime les noeuds de commentaire, les éléments metadata et desc, les éléments title optionnels, ainsi que les éléments et attributs propres à l'éditeur comme les espaces de noms inkscape et sodipodi. Il supprime la déclaration XML et tout doctype, et réduit en option les espaces blancs redondants entre les balises. L'arbre nettoyé est sérialisé de nouveau en SVG valide avec XMLSerializer, de sorte que le résultat reste un document bien formé que vous pouvez placer directement dans une page web ou un système d'icônes.
Vous pouvez coller le balisage directement dans l'éditeur ou téléverser un fichier .svg, et l'outil affiche la taille d'origine en octets, la taille optimisée en octets et le pourcentage économisé en temps réel à mesure que vous activez les options. La sortie apparaît dans un second panneau, prête à être copiée dans votre presse-papiers ou téléchargée en tant que nouveau fichier. Pour les exports d'éditeur habituels, les économies sont substantielles, souvent entre trente et soixante-dix pour cent, sans aucun changement visible de l'image affichée car seules des données non rendues sont supprimées.
Tout s'exécute entièrement dans votre navigateur. Le SVG ne quitte jamais votre appareil, il n'y a pas de téléversement, pas de serveur et pas de compte, donc l'outil est sûr pour les icônes propriétaires, les ressources de marque et les diagrammes confidentiels. Il continue aussi de fonctionner hors ligne une fois la page chargée. L'optimiseur est délibérément prudent : il supprime les données qui n'affectent pas le rendu plutôt que de réécrire la géométrie des tracés ou d'arrondir les coordonnées, ce qui signifie que la sortie visuelle est préservée exactement tandis que le fichier devient sensiblement plus petit.
Comment le SVG a gagné la guerre des formats vectoriels
Le SVG n'était pas le seul prétendant aux graphiques vectoriels sur le web. À la fin des années 1990, Microsoft et d'autres soutenaient VML, le Vector Markup Language (langage de balisage vectoriel), tandis qu'Adobe et Sun poussaient PGML, le Precision Graphics Markup Language (langage de balisage de graphiques de précision). Le World Wide Web Consortium a pris les deux propositions, réuni un groupe de travail et fusionné les meilleures idées en un seul standard ouvert. SVG 1.0 est devenu une Recommandation du W3C en septembre 2001, mais l'adoption fut lente car Internet Explorer, alors le navigateur dominant, ne prenait en charge que VML et exigeait un module externe pour le SVG.
Le tournant est venu avec les autres navigateurs. Firefox, Safari, puis Chrome ont intégré le rendu natif du SVG au cours des années 2000, et lorsque Internet Explorer 9 a enfin ajouté la prise en charge native en 2011, le format avait une portée universelle. L'essor des écrans Retina à haute densité à la même époque a soudain rendu le SVG essentiel : une seule icône vectorielle reste d'une netteté parfaite à n'importe quelle densité de pixels, tandis que les icônes bitmap nécessitent plusieurs exports et restent floues sur les écrans pour lesquels elles n'ont pas été conçues. Les polices d'icônes ont connu un bref moment, mais les icônes SVG se sont révélées plus accessibles et plus souples et les ont largement remplacées.
Comme le SVG n'est que du texte XML, il a hérité à la fois des forces et de la lourdeur de l'outillage XML. Les applications de conception traitent le fichier comme un document de projet et le bourrent de leurs propres données privées, ce qui explique qu'une icône qui s'affiche avec quelques centaines d'octets de données de tracé essentielles puisse être livrée sous la forme de plusieurs kilo-octets de métadonnées d'éditeur. Optimiser les SVG est donc devenu une étape de compilation standard dans les chaînes de travail front-end modernes, et le faire en toute sécurité, en analysant le véritable arbre du document plutôt qu'en devinant par remplacement de texte, est ce qui distingue un nettoyeur fiable d'un autre qui corrompt parfois votre illustration.