Comment télécharger un SVG depuis n'importe quel site

Les quatre cachettes

Où vivent réellement les SVG dans une page

Avant la méthode, il est utile de comprendre pourquoi l'approche évidente échoue. Un SVG dans une page web n'est presque jamais un simple image.svg qu'on ouvre dans un onglet. C'est en général l'une de quatre choses, et chacune met en échec le menu d'enregistrement à sa façon.

• <svg> en ligne. Le balisage est dessiné directement dans le HTML. Aucun src, aucune URL d'image : le menu contextuel n'offre rien. C'est ainsi que la plupart des systèmes d'icônes sont livrés aujourd'hui. Voir SVG en ligne.
• background-image CSS. Le vecteur est posé dans une feuille de style — parfois en fichier, souvent en URI data: encastré. Le navigateur y voit une décoration, pas une image enregistrable. Voir SVG en fond CSS.
• Références <use> vers un sprite. Un sprite caché contient beaucoup d'icônes ; chaque endroit où elles apparaissent n'est qu'un pointeur <use>. Enregistrer le pointeur ne donne rien d'utilisable. Voir extracteur de sprites.
• Sources <img> et <object>. Le cas le plus aimable — mais même là, la source peut être un URI data: que le menu d'enregistrement massacre, ou une URL cross-origin téléchargée sous le mauvais nom.

La méthode universelle — cinq étapes

SVG Downloader ignore la distinction entre ces quatre cas. Il lit la page vivante, résout chaque source en vrai balisage SVG et vous remet un fichier. Tout le parcours prend environ deux minutes la première fois, puis quelques secondes.

1. Installez l'extension. Ajoutez SVG Downloader à Chrome, Edge ou Brave (Chrome 88+). C'est gratuit, sous licence MIT, et rien là-dedans n'appelle la maison.
2. Ouvrez le popup sur la page. Allez sur la page qui contient le SVG voulu, puis cliquez sur l'icône de la barre d'outils pour ouvrir le popup.
3. Laissez-le analyser. L'extension parcourt le DOM et récolte les vecteurs trouvés — éléments en ligne, fonds CSS, références de sprite du même document et sources d'image, y compris les URI data:.
4. Prévisualisez et choisissez. Chaque SVG apparaît dans un aperçu isolé pour le voir au propre, hors de la page chargée. Utilisez Précédent et Suivant pour feuilleter, et tapez un nom de fichier si son nom vous importe.
5. Téléchargez. Cliquez sur Télécharger le SVG courant pour celui à l'écran — sous le nom que vous avez tapé, ou un svg-1.svg numéroté si vous avez laissé le champ vide — ou sur Tout télécharger en ZIP pour prendre tout le jeu d'un coup, dédoublonné et numéroté, avec tout ce qui n'a pas pu être résolu nommé dans la ligne d'état du popup.

Aperçu

Pourquoi pas simplement le clic droit ?

L'Enregistrer l'image sous… du clic droit n'apparaît que pour ce que le navigateur classe comme image avec une adresse qu'il peut récupérer : un <img> avec une URL, un canvas, parfois un fond CSS. Trois des quatre sources ci-dessus n'en sont pas. Le SVG en ligne n'a pas d'URL. Un <use> de sprite se résout en fragment de document. Un fond en URI data: est une chaîne dans une feuille de style. Et même quand le menu apparaît, il enregistre souvent un raster recalculé ou un fichier nommé download.svg à l'espace de noms cassé. Lire le DOM contourne tout cela et rend le vecteur réel.

Deux choses qui surprennent

Deux résultats étonnent les nouveaux venus, et les deux sont un comportement attendu, pas un bug.

• Le fichier ne s'ouvrait pas — maintenant si. Le SVG en ligne omet en général l'espace de noms xmlns="http://www.w3.org/2000/svg" parce que l'analyseur HTML le fournit. Copié dans un fichier nu, ce SVG ne s'ouvre pas. SVG Downloader répare le xmlns manquant à la sortie : ses fichiers s'ouvrent dans Figma, Illustrator, VS Code et tous les navigateurs.
• L'icône paraît noire. Beaucoup d'icônes héritent leur couleur du CSS via currentColor : le fichier autonome n'a donc pas de couleur propre et s'affiche en noir. C'est le balisage véritable. Si vous devez figer une couleur, passez par le SVG Color Changer, recolorez, puis enregistrez.

Fonctionne sur

Chrome 88+, Edge et Brave. Toute page que vous pouvez ouvrir — sources en ligne, CSS, sprite et image.

Résultat

Le balisage vectoriel d'origine, espace de noms réparé, indépendant de la résolution et recolorable.

Confidentialité

100 % sur l'appareil. Pas de serveur, pas de compte, pas d'envoi, pas d'analytique.

Ensuite

Vous prenez tout un jeu ? Voyez extraire des icônes SVG et tout télécharger en ZIP.

Bon à savoir

Questions fréquentes