Collez du SVG ou ouvrez un fichier puis choisissez le composant cible. Vérifiez le résultat : retirer métadonnées, éléments actifs ou attributs peut modifier le SVG.
Fonctionne localement dans votre navigateurCette page nettoie du balisage SVG dans le navigateur et livre le même dessin sous forme de composant React, Vue ou Svelte. Collez le balisage ou choisissez un fichier .svg local : l'aperçu, les compteurs d'octets et le code généré proviennent tous de l'élément nettoyé. Rien n'est envoyé, et la page continue de fonctionner sans réseau.
Le nettoyage est prudent avec le dessin et strict avec tout ce qui peut s'exécuter ou aller chercher une ressource : coordonnées, id, classes et CSS local restent tels quels, tandis que les scripts, les éléments d'animation, les attributs d'événement et les références distantes sont supprimés. Vérifiez l'aperçu avant de réutiliser le résultat : retirer une animation ou une règle de style distante change ce que fait le fichier.
Sont supprimés : <script>, <foreignObject>, <iframe>, <object>, <embed>, <audio>, <video> et les éléments d'animation <animate>, <animateMotion>, <animateTransform> et <set> ; tous les attributs d'événement on* ; les valeurs href et xlink:href qui ne sont pas des références internes #id ; tout attribut dont la valeur appelle une url() distante ; les blocs <style> avec @import ou url() distante ; les commentaires, <metadata> et <desc>. Sont conservés : les données de tracé, les id, les classes, les attributs de présentation comme rx, opacity ou transform, et le CSS qui ne pointe qu'à l'intérieur du fichier. À l'essai, url(#g1) a survécu et style="fill:url(https://…)" non.
La racine est réécrite : sans viewBox, il est calculé à partir de width et height, ou remplacé par 0 0 24 24 quand les deux manquent ; width et height sont ensuite retirés, xmlns est ajouté et les espaces entre balises sont compactés. Ce n'est pas un minifieur : les nombres restent intacts, un tracé « M 4.000 4.0 » garde ses zéros, et une petite icône peut grossir avec le viewBox et le xmlns ajoutés. L'icône d'exemple est passée de 310 à 248 octets, et les compteurs affichent des octets UTF-8 : un texte CJK compte ce qu'il occupe réellement.
Côté React, la page produit un composant de fonction qui répartit {...props} sur la racine, avec les noms d'attributs convertis là où le framework l'exige : class devient className, et stroke-linecap, fill-opacity, font-size, text-anchor, stop-color ou clip-path passent en camelCase, sans avertissement de propriété DOM invalide. Les valeurs entre guillemets et le CSS à l'intérieur de <style> ne sont pas touchés, et une icône sans enfant devient <svg … {...props} />, balise auto-fermante.
Côté Vue, la sortie est un composant monofichier avec <script setup>, defineProps({ size }) et :width/:height liés à size ; côté Svelte, export let size avec width={size} height={size}. Les deux ajoutent aria-hidden, et React ne fixe aucune taille : sa racine ne porte que le viewBox, donc passez width et height en props ou dimensionnez en CSS. Le champ de nom devient un identifiant PascalCase : vide, il donne KivIcon, et un nom qui ne peut pas commencer un identifiant reçoit un préfixe — 3d-icon exporte Svg3dIcon.
Pas d'optimisation des tracés ni de réécriture des id : deux icônes qui définissent id="g1" continuent d'entrer en conflit sur une même page, comme avec du SVG écrit à la main. Les animations sont supprimées plutôt que conservées, et un bloc <style> qui mélange une règle locale et une url() distante est retiré en entier : vérifiez l'aperçu si l'original s'appuyait sur une feuille de style liée.
L'aperçu est un <img> alimenté par une URL blob : les scripts du balisage ne peuvent donc pas s'exécuter, ce qui en fait une vue fidèle du fichier nettoyé plutôt qu'un audit de sécurité. Une entrée invalide est signalée et le résultat précédent est effacé au lieu de rester affiché : il faut exactement une racine <svg>, et une entité XML non définie comme est refusée parce qu'un SVG est analysé comme du XML — é et les cinq entités prédéfinies passent.