Descargar un SVG de un fondo CSS

Cuando un SVG se pinta con background-image, no es un elemento al que puedas apuntar. No hay nada que arrastrar ni nada sobre lo que hacer clic derecho. SVG Downloader lee el estilo calculado, resuelve el origen y guarda el archivo original.

Instalar la extensión Leer el paso a paso →

El problema

Por qué no se puede guardar un SVG de fondo CSS

Una imagen de fondo no es contenido: es decoración adherida a la caja de otro elemento. Cuando alguien escribe background-image: url("chevron.svg") o incrusta el vector como URI data:, el navegador lo pinta pero nunca lo trata como una imagen guardable. Pasa el cursor por encima y estará sobre un <div>, no sobre el icono. Haz clic derecho y obtendrás el menú del elemento que hay detrás. Guardar imagen como… nunca aparece, porque para el navegador ahí no hay imagen que guardar.

Llegar a ella a mano es peor de lo que parece. Abres DevTools, encuentras el elemento, lees su background-image calculado y te quedas mirando o bien una URL relativa que tienes que resolver contra la página, o bien una cadena data:image/svg+xml codificada con todos los signos de menor y mayor escapados. Convertir eso en un archivo limpio es un copia y pega que fallarás al menos una vez.

Qué hace SVG Downloader en su lugar

Abre el popup e inspecciona los estilos calculados de los elementos de la página, no solo de los que ves. Allí donde un background-image resuelve a un SVG —un archivo .svg enlazado o un URI de datos incrustado—, extrae el origen y le da una vista previa aislada junto a los demás SVG encontrados. Recórrelos con Anterior/Siguiente, elige el que quieras y escribirá el vector original en un archivo .svg.

URLs resueltas por ti. Un url(../img/logo.svg) relativo se convierte en una dirección real y se descarga; el archivo que llega es el que apuntaba la hoja de estilos, no una suposición.
URI de datos bien decodificados. Un fondo data:image/svg+xml incrustado —codificado en URL o en Base64— se desempaqueta de vuelta a marcado SVG plano, así que lo que guardas abre como texto legible y editable.
El espacio de nombres reparado. Si al SVG extraído le falta la declaración xmlns="http://www.w3.org/2000/svg", SVG Downloader la añade, así que el archivo abre en Figma, Illustrator y cualquier navegador sin retoques.

Qué obtienes

Formato: Un archivo .svg limpio y conforme al estándar: exactamente el vector al que se refería el CSS, decodificado y con el espacio de nombres reparado.
Fuentes que lee: Tanto enlaces url() como URI data: incrustados, ya sean codificados en URL o en Base64. Se omite en páginas de más de 10.000 elementos.
Dónde se ejecuta: Por completo en tu navegador. Los estilos calculados se leen en local: sin subidas, sin servidor, sin cuenta.
También detecta: SVG en línea, referencias de sprite y ZIP de la página entera.

Conviene saber

Preguntas sobre el SVG en fondo CSS

¿Por qué falta Guardar imagen como… en un fondo CSS?

Porque una imagen de fondo no es un elemento del documento. El navegador solo ofrece Guardar imagen como… para nodos de imagen reales: <img>, <object>, canvas. Un fondo CSS se pinta sobre la caja de otro elemento, así que tu clic derecho aterriza en ese elemento y no hay entrada de imagen que elegir.

¿Puede con un fondo en URI data:, no solo con un archivo enlazado?

Sí. Los fondos data:image/svg+xml incrustados son habituales y suelen ir codificados en URL con todos los signos escapados: difíciles de decodificar a mano. SVG Downloader desempaqueta los URI de datos tanto codificados en URL como en Base64 hasta dejar marcado SVG limpio antes de guardar.

¿Revisa todos los elementos, por grande que sea la página?

Leer estilos calculados implica tocar los elementos uno a uno, lo que se encarece rápido. Por eso hay un techo: si una página tiene más de 10.000 elementos, el escaneo de fondos se omite por completo y solo verás las otras tres fuentes. El popup lo dice, en vez de devolver en silencio una lista corta. Por debajo de ese umbral se revisa cada elemento, visible o no.

El fondo usa un sprite o muestra solo parte de un SVG mayor. ¿Qué se descarga?

Lo que se descarga es el origen al que se refiere la hoja de estilos: el archivo SVG completo, aunque el CSS lo recorte con background-position y background-size para mostrar una región. Si los iconos viven en un sprite <use> como es debido, el extractor de sprites es la herramienta que los separa.

Guarda el fondo que la página no te entrega

Gratis, privado, y lee el SVG que se esconde en tu hoja de estilos.

Instalar la extensión Todas las funciones →