Tutoriel — pour ceux qui lisent la source
Comment télécharger un SVG depuis le HTML
Vous pouvez tout à fait le faire à la main dans DevTools. Vous passerez aussi dix minutes à comprendre pourquoi le fichier enregistré refuse de s'ouvrir — voici donc la voie manuelle et la raison pour laquelle elle mord.
À regarder — 17 secondes
Le balisage dehors, sans le panneau Elements
Les deux sorties sont montrées ici : le balisage vers le presse-papiers, et le même vecteur en fichier. La seule différence, c'est où il atterrit.
Ce que montre l'enregistrement
- Le balisage est en ligne dans le HTML — aucun fichier à récupérer
- Trouvez l'élément voulu
- Copier le code prélève le balisage lui-même
- Afficher la source donnerait la même balise, moins le xmlns
- Ou enregistrez-le en fichier, espace de noms réparé
La voie manuelle, et son unique piège
Copier-coller depuis Elements donne un fichier qui ne s'ouvre pas
La méthode à la main est simple : ouvrez DevTools, trouvez l'élément <svg> dans le panneau Elements, clic droit, Copy → Copy outerHTML, collez dans un nouveau fichier, enregistrez en .svg. Puis double-cliquez, et votre navigateur affiche une erreur ou une page blanche.
La raison est un espace de noms. Un document SVG autonome doit déclarer xmlns="http://www.w3.org/2000/svg" sur son élément racine. Le SVG en ligne n'a presque jamais cet attribut, parce que l'analyseur HTML place les éléments dans l'espace de noms SVG automatiquement selon l'endroit où ils apparaissent — l'attribut est vraiment inutile à l'intérieur du HTML. Sortez le balisage de ce contexte et il devient nécessaire, et il n'est pas là.
Le correctif manuel est donc réel mais facile à oublier : ajoutez vous-même l'attribut xmlns à la balise <svg> racine, à chaque fois. Deux autres choses valent d'être faites tant que vous y êtes, et elles sont moins évidentes.
- Retirez tout ce qui est exécutable. Le balisage d'une page peut porter des éléments
<script>, des attributs gestionnaireson*et des références externes. Vous ne voulez pas de ça dans un fichier que vous allez committer ou ouvrir dans un outil de design. - Vérifiez
currentColor. Si l'icône hérite sa couleur du CSS, le fichier extrait n'a pas de couleur propre et s'affichera en noir. C'est le comportement correct, pas une corruption.
La voie qui fait les trois pour vous
Réparation de l'espace de noms, nettoyage et deux sorties au choix — sans quitter la page ni ouvrir un panneau.
- Ouvrez le popup sur la page. Cliquez sur le bouton de la barre d'outils. Chaque
<svg>en ligne du document est collecté, avec les vecteurs de fond CSS, les références de sprite et les sources d'image. - Trouvez l'élément voulu. Feuilletez avec Préc. et Suiv.. L'aperçu isolé est nettement plus facile à reconnaître qu'un nœud surligné dans l'arbre Elements.
- Prenez-le en balisage, ou en fichier. Copier le code met le balisage nettoyé dans votre presse-papiers, espace de noms inclus, prêt à coller dans un composant. Télécharger le courant écrit la même chose dans un fichier
.svg. - Collez-le ou ouvrez-le. Dans les deux cas le résultat est un document autonome valide — il s'ouvre dans Figma, Illustrator, VS Code et tous les navigateurs sans retouche.
Ce que la source affichée montre et ne montre pas
Afficher la source montre le HTML envoyé par le serveur. Ce n'est pas le même document que celui à l'écran. Tout ce qu'un framework a rendu côté client — c'est-à-dire, sur un site React, Vue ou Svelte, la plupart des icônes — n'apparaît jamais dans la source. Le DOM est le relevé honnête de ce qu'est la page, et c'est ce que lisent DevTools comme cette extension.
Les sprites sont l'autre raison pour laquelle la copie à la main déçoit
Copiez l'outerHTML d'une icône basée sur un sprite et vous obtenez à peu près <svg><use href="#star"/></svg> — un pointeur, pas une forme. Enregistré en fichier, il n'affiche rien du tout, car le symbole visé vivait dans une autre partie du document que vous n'avez pas copiée. Résoudre cette référence jusqu'à son symbole fait partie de ce que l'analyse fait pour vous. Plus sur les sprites →
Si vous voulez plutôt un pipeline à la compilation
Pour extraire des icônes dans un build, ce n'est pas le bon outil : un navigateur headless l'est — pilotez la page, lisez le DOM, écrivez les fichiers. L'extension est pour le cas interactif : vous regardez une page et vous voulez cette icône maintenant.
- Le piège
- Le SVG en ligne omet
xmlns: un balisage copié à la main ne s'ouvrira pas. - Réparé
- L'espace de noms est ajouté, et scripts, gestionnaires et références externes sont retirés.
- Sprites
- Les pointeurs
<use>sont résolus jusqu'au symbole — pas enregistrés comme pointeurs. - Source affichée
- Montre le HTML du serveur, pas ce qu'un framework a rendu côté client.
Bon à savoir
Questions fréquentes
Pourquoi le SVG copié depuis DevTools ne s'ouvre-t-il pas ?
Il lui manque l'attribut xmlns="http://www.w3.org/2000/svg". Le SVG en ligne n'en a pas besoin car l'analyseur HTML fournit l'espace de noms, mais un document .svg autonome si. Ajoutez-le à la balise racine, ou laissez l'extension le réparer pour vous.
Puis-je récupérer le SVG depuis la source affichée ?
Seulement si le serveur l'a envoyé. Tout ce que React, Vue ou Svelte rend côté client n'apparaît jamais dans la source. Le DOM est ce qui a réellement été dessiné, et c'est ce que l'analyse lit.
J'ai copié une icône de sprite et le fichier est vide.
Vous avez copié un pointeur <use> plutôt que la forme visée. Le symbole vit ailleurs dans le document. L'analyse résout cette référence jusqu'au vrai symbole pour vous donner un fichier autonome.
Le balisage extrait est-il modifié ?
Seulement de manière à en faire un fichier autonome valide : l'espace de noms xmlns est ajouté, et les éléments script, les attributs gestionnaires d'événements et les références externes sont retirés. Les formes ne sont pas touchées.
Puis-je automatiser cela dans un build ?
Pas avec l'extension — utilisez un navigateur headless pour ça. Ceci est pour le cas interactif où vous regardez une page et voulez l'icône maintenant.
Passez le panneau, gardez le balisage
Espace de noms réparé, scripts retirés, sprites résolus.