Comment enregistrer un SVG quand le clic droit refuse

Vous faites un clic droit sur l'icône et il n'y a aucun Enregistrer l'image sous…. Rien n'est cassé et vous n'avez raté aucun réglage — le navigateur ne considère réellement pas cette chose comme une image.

Installer l'extension Aller aux étapes ↓

À regarder — 19 secondes

Enregistrer ce que le menu refuse d'offrir

tutoriel · sans clic droit

Chaque icône de cette page refuse le menu d'enregistrement. Les 24 sortent quand même.

L'enregistrement s'ouvre sur une page où pas une icône n'offre d'option d'enregistrement. Ce n'est pas une page inhabituelle — c'est ainsi que la plupart des systèmes d'icônes sont livrés.

Ce que montre l'enregistrement

Enregistrer l'image sous… manque sur chaque icône ici
L'extension lit le DOM plutôt que le menu
En ligne, fond CSS, sprite, img — tous trouvés
Choisissez celui que vous voulez vraiment
Nommez-le
Enregistré — un vrai vecteur, pas une capture

La vraie raison

Le navigateur ne propose d'enregistrer que ce qu'il peut récupérer

Enregistrer l'image sous… apparaît quand le navigateur a une image avec une adresse qu'il peut demander. Cette catégorie est plus étroite qu'il n'y paraît, et les systèmes d'icônes modernes en sortent presque entièrement. Un SVG se cache à quatre endroits sur une page, et un seul se comporte bien.

<svg> en ligne. Le balisage est écrit droit dans le HTML. Pas de src, pas d'URL, rien à récupérer — le menu n'offre donc rien. C'est ainsi que la grande majorité des icônes sont livrées aujourd'hui. Comment il est lu →
background-image CSS. Le vecteur est posé dans une feuille de style, souvent en URI data: encastré. Le navigateur le classe en décoration plutôt qu'en contenu. Comment il est lu →
Références <use> de sprite. Un sprite caché contient toutes les icônes ; chaque endroit où une icône apparaît n'est qu'un pointeur vers lui. Enregistrer le pointeur donne un fichier vide. Comment il est lu →
Sources <img> et <object>. Le cas aimable — et même là, la source peut être un URI data: que la boîte d'enregistrement massacre, ou une URL cross-origin enregistrée sous un nom sans intérêt.

Trois des quatre ne peuvent donc pas être enregistrés ainsi, même en principe. Lire le DOM marche pour les quatre, car à ce stade chacun a été résolu en balisage réel par le navigateur lui-même.

L'enregistrer quand même

Vous n'avez pas besoin de savoir lequel des quatre vous regardez. C'est tout l'intérêt.

Laissez le menu contextuel tranquille. Si Enregistrer l'image sous… manque ou est grisé, aucun nombre de tentatives ne le fera apparaître. L'absence est une information, pas un défaut.
Ouvrez le popup. Cliquez sur le bouton de la barre d'outils sur la page. L'analyse résout les quatre sources en balisage autonome — en ligne, fond CSS, référence de sprite et source d'image pareillement.
Prévisualisez pour identifier la bonne. L'aperçu isolé est le moyen le plus rapide de distinguer deux icônes semblables, surtout dans un jeu où la page les affiche en 16 px.
Nommez-la et enregistrez. Tapez un nom de fichier et appuyez sur Télécharger le courant. L'espace de noms est réparé à la sortie, le fichier s'ouvre donc dans Figma, Illustrator et tous les navigateurs.

Des choses qui ressemblent à des solutions mais n'en sont pas

En faire une capture. Cela convertit un vecteur indépendant de la résolution en une grille fixe de pixels, définitivement. Il floutera dès qu'on l'agrandira, et il ne peut pas être recoloré. La comparaison complète →
Copier le balisage depuis DevTools. Cela marche, mais c'est fastidieux, et le balisage copié n'a pas l'espace de noms xmlns : le fichier obtenu ne s'ouvrira pas tant que vous ne l'aurez pas ajouté à la main. Si vous voulez le balisage plutôt qu'un fichier, Copier le code fait le même travail avec l'espace de noms déjà corrigé.
Chercher le fichier dans l'onglet Réseau. Très bien pour les sources <img>. Inutile pour les trois autres, car aucune requête n'a jamais été faite — le balisage est arrivé dans le document HTML.

Pourquoi ça échoue: Trois des quatre sources de SVG n'ont aucune adresse récupérable.
Ce qui marche: Lire le DOM affiché, où les quatre ont été résolues en balisage réel.
En prime: Le xmlns manquant est réparé, le fichier s'ouvre donc réellement.
À voir aussi: Une voie plus rapide pour une icône · SVG en ligne

Bon à savoir

Questions fréquentes

Pourquoi Enregistrer l'image sous… est-il grisé sur un SVG ?

Parce que le navigateur ne classe pas cet élément comme une image récupérable. Le balisage SVG en ligne, les images de fond CSS et les références de sprite n'ont aucune adresse derrière eux : l'entrée de menu n'a donc rien sur quoi agir.

Existe-t-il un réglage du navigateur qui active cela ?

Non. Ce n'est ni une permission ni une préférence — l'entrée manque parce que la chose sous-jacente n'est réellement pas une ressource image enregistrable. Lire la page est le contournement.

Puis-je simplement faire une capture à la place ?

Vous pouvez, mais vous perdez tout l'intérêt d'un vecteur. Une capture est une grille fixe de pixels qui floute à l'agrandissement et ne peut pas être recolorée. Le SVG enregistré reste net à toute taille et peut être restylé.

Et copier le balisage depuis DevTools ?

Cela marche, mais le balisage copié manque souvent de l'espace de noms xmlns : le fichier ne s'ouvrira pas tant que vous ne l'aurez pas ajouté à la main. L'extension répare cela automatiquement.

Cela marche-t-il sur tous les sites ?

Sur toute page ouvrable dans Chrome 88+, Edge ou Brave. Il ne peut pas atteindre les pages internes du navigateur, les galeries d'extensions, ni un contenu derrière une connexion que vous n'avez pas.

Le menu a dit non. Prenez-le quand même.

Quatre cachettes, une analyse, et un fichier qui s'ouvre vraiment.

Installer l'extension Les 15 tutoriels →