Guide — source cachée
Extraire un SVG d'un fond CSS
Un SVG en background-image est peint sur un élément directement depuis la feuille de style. Aucune image à faire clic droit, aucun fichier posé dans la page. SVG Downloader lit les styles calculés, résout la référence et enregistre le vecteur d'origine.
Le problème
Pourquoi les SVG de fond résistent au clic droit
Quantité de marques décoratives, de motifs et d'icônes sont appliqués en background-image CSS plutôt que posés en <img>. C'est une façon courante et propre de styler un bouton ou une bannière. Cela veut aussi dire que le SVG est dessiné par la feuille de style sur le fond d'un élément, et que le navigateur ne traite pas cet élément comme une image. Clic droit : pas d'Enregistrer l'image sous… — rien que le menu reconnaisse comme enregistrable.
Pire, le SVG peut se cacher sous deux formes. Ce peut être un URI data: fourré directement dans le CSS, encodé URL et illisible. Ou un url() pointant vers un fichier .svg distinct quelque part sur le serveur. Poursuivre l'un ou l'autre via DevTools, c'est lire les styles calculés à la main, décoder ou récupérer, puis réparer un fichier qui refuse de s'ouvrir.
Comment SVG Downloader le lit
L'extension fait ce travail de jambes pour vous. Elle parcourt les styles calculés de la page, repère les déclarations background-image qui portent un SVG et résout la forme trouvée — en décodant un URI data: sur place, ou en lisant le fichier visé par un url(). Ce qu'elle enregistre est le balisage d'origine, pas une image de celui-ci.
Pas à pas : du fond au fichier
- Installez et ouvrez le popup. Ajoutez l'extension gratuite à Chrome, Edge ou Brave, ouvrez la page et cliquez sur l'icône de la barre d'outils. Tout se passe en local.
- Laissez-le lire les styles calculés. SVG Downloader inspecte les styles de la page et rassemble les SVG de fond aux côtés des sources en ligne,
<img>et sprites du même document qu'il détecte aussi. Au-delà de 10 000 éléments, cette analyse est sautée pour la vitesse, et le popup le dit. - Prévisualisez et choisissez. Chaque SVG de fond s'affiche dans un aperçu isolé, hors de la page chargée. Utilisez Précédent/Suivant pour tomber sur celui que vous voulez.
- Téléchargez le vecteur d'origine. Cliquez sur Télécharger le SVG courant. Vous obtenez un vrai fichier
.svgavec sonviewBoxet ses tracés intacts et unxmlnsréparé, prêt pour Figma, Illustrator ou VS Code.
Télécharger le SVG courant.Ce que vous récupérez
- Les deux formes
- Les URI data: encastrés et les références
url()vers des fichiers.svgsont résolus de la même façon. - Balisage d'origine
- Le vecteur qui stylait l'élément — tracés et
viewBoxpréservés, espace de noms réparé. Pas une capture. - Sur l'appareil
- Lit les styles calculés dans votre navigateur. Le SVG ne quitte jamais la page ; rien n'est envoyé.
- Gère aussi
- Le SVG en ligne, les références de sprite et le ZIP de page entière.
Bon à savoir
Questions sur les SVG en fond CSS
Pourquoi ne puis-je pas enregistrer un SVG de fond CSS au clic droit ?
Parce qu'un fond CSS est peint par la feuille de style, pas posé comme élément image. Le navigateur ne propose Enregistrer l'image sous… que pour ce qu'il traite comme des images — un <img>, un canvas. Un background-image vit dans le style calculé d'un élément : il n'y a donc rien à enregistrer dans le menu contextuel.
Gère-t-il à la fois les URI data: et les références url() ?
Oui. SVG Downloader résout un background-image encastré en URI data: en le décodant, et un url() pointant vers un fichier .svg en lisant ce fichier. Dans les deux cas vous récupérez le vecteur d'origine.
Le fichier enregistré est-il le vrai SVG ou une capture ?
Le vrai SVG. L'extension enregistre le balisage d'origine — tracés et viewBox intacts, espace de noms réparé — pas un rendu matriciel. Il reste net à toute taille et reste modifiable.
Sortez la marque de la feuille de style
Gratuit, privé, et il lit le SVG de fond que le navigateur refuse de donner.