Éditeur et explicateur SVG
SVG Editor and Explainer
Modifie un SVG à côté de son rendu et explique le fichier : le viewBox et la mise à l’échelle, les transformations, chaque commande de tracé, la peinture héritée, les octets inutiles, et ce qui casse dans une balise img, dans un data URI ou en inline.
Modifiez un SVG avec le rendu à côté, et lisez un panneau qui dit ce que le fichier est réellement : s’il se met à l’échelle, ce que chaque transformation fait en descendant jusqu’à une forme, ce que l’attribut d épelle commande par commande, comment un remplissage se résout par héritage, ce que les restes laissés par l’éditeur coûtent en octets, et ce qui casse quand le même fichier sert en <img>, en arrière-plan CSS ou collé en ligne. Chaque constat pointe l’attribut exact dont il parle. C’est un jeu de règles appliqué au fichier analysé, pas un modèle : il rapporte ce qui est là et ne devine jamais à quoi le fichier sert.
Source du SVG
Déposez un fichier .svg
Lu dans cet onglet. Rien n’est envoyé.
Tapez ici et l’aperçu suit. Cliquez sur une forme dans l’aperçu et la source saute à son élément.
Aperçu
Les contours cliquables couvrent les formes dont la boîte se déduit du fichier. <text>, <use> et une <image> sans dimensions demandent un moteur de rendu ; celles-là se sélectionnent depuis la source.
Rendu dans un cadre isolé à partir d’un balisage reconstruit depuis l’arbre analysé, jamais depuis vos octets. Le cadre est une boîte de taille fixe et le fichier la reçoit entière : c’est ce qui rend visible le refus d’un document incapable de se mettre à l’échelle de la remplir.
Octets
395
Éléments
5
Formes
3
Commandes de tracé
10
Imbrication la plus profonde
1
Ce qu’est ce fichier
- noteCadre
Dimensionné, et il se met à l’échelle
width="24" et height="24" lui donnent une taille intrinsèque, et viewBox="0 0 24 24" fait de cette taille un point de départ plutôt qu’une limite. Donnez-lui une autre largeur en CSS et tout ce qu’il contient est remis à l’échelle en conséquence. C’est ce qu’il faut pour une icône.
- noteCoordonnées
Une unité utilisateur, et ce qu’elle vaut
Les coordonnées à l’intérieur vont de 0 à 24 en largeur et de 0 à 24 en hauteur. À la largeur déclarée de 24, une unité utilisateur se dessine sur 1 pixel CSS — et ce nombre change avec la taille que le fichier reçoit réellement.
- noteTracés
Commandes absolues et relatives mélangées
3 commandes absolues et 6 relatives dans le même tracé. Les deux sont permises et dessinent la même forme ; la différence pratique, c’est qu’un tracé entièrement relatif se déplace en modifiant seulement le premier M, et pas celui-ci.
- notePeinture
currentColor : la page décide de la couleur
1 attribut peint avec currentColor, qui se résout en la propriété CSS `color` héritée à l’endroit où se trouve le SVG. Intégré dans une page, c’est exactement ce qu’on attend d’une icône : elle prend la couleur du texte qui l’entoure et suit un changement de thème sans effort. Utilisé comme <img> ou comme background-image CSS, il ne se résout contre rien et sort en noir, faute d’élément dont hériter.
- noteAccessibilité
Nom : « 보관함에 저장 »
<title> est le nom accessible du graphique, et la plupart des visionneuses l’affichent aussi en info-bulle au survol — c’est pourquoi un <title> écrit comme un nom de fichier est pire que pas de <title> du tout. Celui-ci dit « 보관함에 저장 ».
- noteAccessibilité
Pas de <desc>
<title> est le nom court ; <desc> est la description plus longue d’un graphique dont le contenu compte — un graphique de données, un diagramme, une carte. Une icône n’en a pas besoin, et en ajouter une vide est pire que de s’en passer.
Élément sélectionné
Cliquez sur une forme dans l’aperçu, ou placez le curseur à l’intérieur d’un élément dans la source.
Enlever le superflu avec l’optimiseur SVG · En faire un data URI CSS · Travailler un seul tracé à part
Comment s’en servir
Collez le SVG, ou déposez le fichier
La zone source accepte un collage et la zone de dépôt accepte un .svg. Tout est lu dans cet onglet. Les quatre exemples au-dessus des volets valent un clic d’abord : chacun est une forme différente de fichier réel, et le rapport dit autre chose de chacun.
Lisez d’abord la section cadre
Elle dit laquelle des quatre formes ce document est, et cela décide de la plus grande partie de ce qui suit. Un viewBox avec une largeur et une hauteur se met à l’échelle et possède une taille propre ; un viewBox seul remplit la boîte qu’on lui donne ; une largeur et une hauteur sans viewBox ne se mettent pas du tout à l’échelle, et c’est pourquoi une icône copiée depuis un outil de design refuse si souvent d’être redimensionnée. L’aperçu donne au fichier une boîte fixe, ce qui vous permet de voir de laquelle il s’agit.
Cliquez une forme pour aligner les deux volets
Cliquer un contour dans l’aperçu place le curseur sur cet élément dans la source et remplit le panneau d’élément : la chaîne de transformations depuis l’élément le plus extérieur, ce que fait la matrice accumulée, la peinture telle qu’elle se résout par héritage, et pour un tracé, chaque commande en langage clair. Déplacer le curseur dans la source sélectionne dans l’autre sens.
Servez-vous des boutons « montrer » plutôt que de chercher
Chaque constat porte l’intervalle de source dont il parle, si bien que son bouton sélectionne exactement ces caractères : le second dégradé à l’id dupliqué, pas le premier, et l’attribut seul plutôt que la balise autour de lui.
Portez les constats de taille à l’optimiseur
La section taille compte les octets et nomme ce qu’ils sont — métadonnées d’éditeur, dégradé inutilisé, sept décimales que personne n’a choisies —, mais cet outil ne réécrit pas votre fichier. C’est l’optimiseur SVG qui fait cette passe sur le document entier en une fois, et il montre une différence avant/après pour que vous puissiez vérifier que rien n’a bougé.
Questions fréquentes
Pourquoi mon icône ne grandit-elle pas quand je fixe une largeur en CSS ?
Presque toujours parce que le fichier a une largeur et une hauteur mais pas de viewBox. Sans viewBox, les unités utilisateur sont des pixels CSS et il n’existe aucune correspondance permettant au navigateur de remettre à l’échelle : la boîte grandit et le dessin reste sur place. La section cadre le dit et propose le viewBox exact à ajouter, qui est en général « 0 0 <largeur> <hauteur> » avec les nombres déjà présents dans le fichier.
J’ai mis deux icônes en ligne et la seconde a perdu son dégradé. Pourquoi ?
Leurs id sont entrés en collision. Les outils de design génèrent des noms comme a, Layer_1 et SVGID_1_, et dès que les deux fichiers sont dans une même page, chaque url(#a) se résout vers celui qui vient en premier dans le document : la seconde icône emprunte donc en silence le dégradé ou le masque de la première. La section portabilité signale les id générés par l’exportateur précisément pour cela. Préfixez chaque id avec quelque chose de propre au fichier avant de le mettre en ligne.
Le fichier marche sur ma page et s’affiche vide en arrière-plan CSS. Qu’est-ce qui a changé ?
Trois choses diffèrent, et le rapport nomme celle qui s’applique. Un xmlns absent est pardonné par l’analyseur HTML et fatal partout ailleurs. currentColor n’a rien dont hériter hors d’une page, il ressort donc en noir. Les références externes ne sont pas du tout chargées dans un <img> ou un background-image, si bien que l’élément qui en a besoin ne dessine rien. Et un # dans une couleur hexadécimale tronque une URI de données à moins d’être écrit %23.
Un trou dans mon tracé se remplit en plein. Dois-je le déplacer ?
Non : inversez-le. Sous le fill-rule="nonzero" par défaut, une boucle intérieure n’est un trou que si elle s’enroule dans le sens opposé à la boucle qui la contient ; un trou qui se remplit est donc un problème de direction, pas de position. La section tracé dit combien il y a de sous-tracés et quelle règle décide. Inverser un sous-tracé, c’est ce que fait l’outil de tracés SVG.
Il a trouvé un <script> dans un fichier qu’on m’a envoyé. Est-ce dangereux ?
Cela dépend entièrement de l’endroit où va le fichier, et le rapport dit lequel. Collé en ligne dans une page, le script d’un SVG s’exécute avec l’origine de cette page : ses cookies, son stockage, son DOM. Chargé en <img> ou en arrière-plan CSS, il ne s’exécute jamais. L’aperçu ici l’a retiré avant de dessiner, et le cadre où il dessine ne peut de toute façon pas exécuter de script, donc regarder le fichier dans cet outil est sans danger dans tous les cas.
Pourquoi le panneau de peinture ne correspond-il pas à ce que je vois ?
Parce que le fichier contient un bloc <style> et que ce rapport ne l’applique pas. Résoudre des sélecteurs CSS demande un moteur CSS ; toutes les valeurs citées ici viennent uniquement des attributs de présentation et des styles en ligne. Le rapport le signale partout où un bloc <style> existe, plutôt que de montrer discrètement une valeur que la feuille de style a écrasée.
À alimenter depuis
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Générateur d’ombre portée
Box Shadow Generator
Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
SVG en data URI CSS
SVG to CSS Data URI
Encode un SVG en data URI de fond CSS, en n’échappant que ce qui doit l’être pour rester court.
Optimiseur SVG
SVG Optimiser
Retire les restes d’éditeur, aplatit les transformations et arrondit la précision des tracés, en montrant le rendu avant et après.
Éditeur de tracé SVG
SVG Path Editor
Convertit les données d’un tracé entre commandes absolues et relatives, le déplace, l’échelonne, le fait pivoter et l’inverse, et montre sa boîte englobante avec un aperçu en direct.
SVG vers PNG
SVG to PNG
Rend un SVG en PNG, en JPEG ou en WebP au facteur d’échelle voulu, sur fond transparent ou plein.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.