Télécharger un SVG depuis un fond CSS

Quand un SVG est peint via background-image, ce n'est pas un élément que vous pouvez viser. Rien à glisser, rien sur quoi faire un clic droit. SVG Downloader lit le style calculé, résout la source et enregistre le fichier d'origine.

Installer l'extension Lire le mode d'emploi →

Le problème

Pourquoi un SVG en fond CSS ne peut pas être enregistré

Une image de fond n'est pas du contenu — c'est une décoration attachée à la boîte d'un autre élément. Quand on écrit background-image: url("chevron.svg") ou qu'on encastre le vecteur en URI data:, le navigateur le peint mais ne le traite jamais comme une image enregistrable. Survolez-le : le curseur est sur un <div>, pas sur l'icône. Clic droit : vous obtenez le menu de l'élément derrière. Enregistrer l'image sous… n'apparaît jamais, parce que pour le navigateur il n'y a là aucune image à enregistrer.

L'atteindre à la main est pire qu'il n'y paraît. Vous ouvrez DevTools, trouvez l'élément, lisez son background-image calculé, et vous vous retrouvez face soit à une URL relative à résoudre contre la page, soit à une chaîne data:image/svg+xml encodée avec chaque chevron échappé. La décoder en un fichier propre est un copier-coller que vous raterez au moins une fois.

Ce que fait SVG Downloader à la place

Ouvrez le popup : il inspecte les styles calculés des éléments de la page, pas seulement ceux que vous voyez. Partout où un background-image se résout en SVG — un fichier .svg lié ou un URI de données encastré — il en extrait la source et lui donne un aperçu isolé à côté des autres SVG trouvés. Feuilletez avec Précédent/Suivant, choisissez celui que vous voulez, et il écrit le vecteur d'origine dans un fichier .svg.

Les URL résolues pour vous. Un url(../img/logo.svg) relatif devient une vraie adresse et est récupéré ; le fichier obtenu est celui que la feuille de style visait, pas une supposition.
Les URI de données correctement décodés. Un fond data:image/svg+xml encastré — encodé URL ou Base64 — est redéplié en balisage SVG clair : ce que vous enregistrez s'ouvre comme un texte lisible et modifiable.
L'espace de noms réparé. Si le SVG extrait n'a pas sa déclaration xmlns="http://www.w3.org/2000/svg", SVG Downloader l'ajoute : le fichier s'ouvre dans Figma, Illustrator et tous les navigateurs sans retouche.

Ce que vous récupérez

Format: Un fichier .svg conforme aux standards — exactement le vecteur référencé par le CSS, décodé et espace de noms réparé.
Sources lues: Les liens url() comme les URI data: encastrés, qu'ils soient encodés URL ou Base64. Sauté sur les pages de plus de 10 000 éléments.
Où ça tourne: Entièrement dans votre navigateur. Les styles calculés sont lus en local — pas d'envoi, pas de serveur, pas de compte.
Gère aussi: Le SVG en ligne, les références de sprite et le ZIP de page entière.

Bon à savoir

Questions sur le SVG en fond CSS

Pourquoi Enregistrer l'image sous… manque-t-il sur un fond CSS ?

Parce qu'une image de fond n'est pas un élément du document. Le navigateur ne propose Enregistrer l'image sous… que pour de vrais nœuds image — <img>, <object>, canvas. Un fond CSS est peint sur la boîte d'un autre élément : votre clic droit atterrit donc sur cet élément, et il n'y a aucune entrée image à choisir.

Gère-t-il un fond en URI data:, pas seulement un fichier lié ?

Oui. Les fonds data:image/svg+xml encastrés sont courants, et généralement encodés URL avec chaque chevron échappé — pénibles à décoder à la main. SVG Downloader déplie les URI de données encodés URL comme Base64 en balisage SVG propre avant d'enregistrer.

Vérifie-t-il chaque élément, quelle que soit la taille de la page ?

Lire les styles calculés suppose de toucher les éléments un par un, ce qui devient vite coûteux. D'où un plafond : si une page compte plus de 10 000 éléments, l'analyse des fonds est entièrement sautée et vous ne verrez que les trois autres sources. Le popup le dit, plutôt que de renvoyer discrètement une liste courte. En dessous de ce seuil, chaque élément est vérifié, visible ou non.

Le fond utilise un sprite ou ne montre qu'une partie d'un SVG plus grand. Que télécharge-t-on ?

Ce qui se télécharge, c'est la source référencée par la feuille de style — le fichier SVG entier, même si le CSS le recadre avec background-position et background-size pour n'en montrer qu'une région. Si les icônes vivent plutôt dans un vrai sprite <use>, c'est l'extracteur de sprites qui les sépare.

Enregistrez le fond que la page refuse de donner

Gratuit, privé, et il lit le SVG caché dans votre feuille de style.

Installer l'extension Toutes les fonctions →