Guía — fuente oculta
Extrae un SVG de un fondo CSS
Un SVG de background-image se pinta sobre un elemento directamente desde la hoja de estilos. No hay imagen a la que hacer clic derecho ni archivo puesto en la página. SVG Downloader lee los estilos calculados, resuelve la referencia y guarda el vector original.
El problema
Por qué los SVG de fondo se resisten al clic derecho
Muchísimas marcas decorativas, patrones e iconos se aplican como background-image de CSS en vez de colocarse como un <img>. Es una forma habitual y ordenada de dar estilo a un botón o a una portada. También significa que el SVG lo dibuja la hoja de estilos sobre el fondo de un elemento, y el navegador no trata ese elemento como una imagen. Haz clic derecho y no hay Guardar imagen como…: no hay nada que el menú reconozca como guardable.
Peor aún, el SVG puede esconderse en dos formas distintas. Puede ser un URI data: incrustado directamente en el CSS, codificado en URL e ilegible. O puede ser un url() que apunta a un archivo .svg aparte en algún lugar del servidor. Perseguir cualquiera de los dos por DevTools implica leer estilos calculados a mano, decodificar o descargar, y luego reparar un archivo que no abre.
Cómo lo lee SVG Downloader
La extensión hace ese trabajo por ti. Recorre los estilos calculados de la página, detecta las declaraciones background-image que llevan un SVG y resuelve la forma que encuentre: decodificando un URI data: allí mismo, o leyendo el archivo al que apunta un url(). Lo que guarda es el marcado original, no una foto de él.
Paso a paso: del fondo al archivo
- Instala y abre el popup. Añade la extensión gratuita a Chrome, Edge o Brave, abre la página y pulsa el icono de la barra. Todo ocurre en local.
- Déjalo leer los estilos calculados. SVG Downloader inspecciona los estilos de la página y reúne los SVG de fondo junto a las fuentes en línea, de
<img>y de sprite del mismo documento que también detecta. En páginas de más de 10.000 elementos este escaneo se omite por velocidad, y el popup lo dice. - Previsualiza y elige. Cada SVG de fondo se muestra en una vista previa aislada, fuera de la página abarrotada. Usa Anterior/Siguiente para llegar al que quieres.
- Descarga el vector original. Pulsa Descargar el SVG actual. Obtienes un archivo
.svgde verdad con suviewBoxy sus trazados intactos y elxmlnsreparado si faltaba, listo para Figma, Illustrator o VS Code.
Descargar el SVG actual.Qué obtienes
- Las dos formas
- Los URI data: incrustados y las referencias
url()a archivos.svgse resuelven igual. - Marcado original
- El vector que daba estilo al elemento, con trazados y
viewBoxconservados y el espacio de nombres reparado. No es una captura. - En el dispositivo
- Lee los estilos calculados en tu navegador. El SVG nunca sale de la página; no se sube nada.
- También detecta
- SVG en línea, referencias de sprite y ZIP de la página entera.
Conviene saber
Preguntas sobre los SVG de fondo CSS
¿Por qué no puedo guardar un SVG de fondo CSS con clic derecho?
Porque un fondo CSS lo pinta la hoja de estilos, no está colocado como elemento de imagen. El navegador solo ofrece Guardar imagen como… para lo que trata como imágenes: un <img>, un canvas. Un background-image vive en el estilo calculado de un elemento, así que no hay nada que guardar en el menú del clic derecho.
¿Sirve tanto para URI data: como para referencias url()?
Sí. SVG Downloader resuelve un background-image incrustado con URI data: decodificándolo, y un url() que apunta a un archivo .svg leyendo ese archivo. En ambos casos recuperas el vector original.
¿El archivo guardado es el SVG real o una captura?
El SVG real. La extensión guarda el marcado original —con sus trazados y su viewBox intactos y el espacio de nombres reparado—, no un mapa de bits renderizado. Se mantiene nítido a cualquier tamaño y sigue siendo editable.
Saca la marca de la hoja de estilos
Gratis, privado, y lee el SVG de fondo que el navegador no te entrega.