Cómo descargar un SVG de cualquier web

Los cuatro escondites

Dónde viven de verdad los SVG en una página

Antes del método conviene saber por qué falla el enfoque obvio. Un SVG en una página web casi nunca es un simple imagen.svg que puedas abrir en otra pestaña. Suele ser una de cuatro cosas, y cada una derrota al menú de guardado del navegador a su manera.

• <svg> en línea. El marcado se dibuja directamente en el HTML. No hay src ni URL de imagen, así que el menú del clic derecho no ofrece nada. Así se publican hoy la mayoría de los sistemas de iconos. Ver SVG en línea.
• background-image de CSS. El vector se define en una hoja de estilos, a veces como archivo y a menudo como URI data: incrustado. El navegador lo trata como decoración, no como imagen guardable. Ver SVG en fondo CSS.
• Referencias <use> a un sprite. Un sprite oculto contiene muchos iconos; cada sitio donde aparecen es solo un puntero <use>. Guardar el puntero no te da nada aprovechable. Ver extractor de sprites.
• Fuentes <img> y <object>. El caso más amable, pero incluso aquí la fuente puede ser un URI data: que el menú de guardado destroza, o una URL de otro origen que se descarga con el nombre equivocado.

El método universal, en cinco pasos

SVG Downloader ignora la distinción entre esos cuatro casos. Lee la página en vivo, resuelve cada fuente hasta obtener marcado SVG real y te entrega un archivo. Todo el recorrido son unos dos minutos la primera vez y unos segundos después.

1. Instala la extensión. Añade SVG Downloader a Chrome, Edge o Brave (Chrome 88+). Es gratis, con licencia MIT, y nada en ella llama a casa.
2. Abre el popup en la página. Ve a la página que contiene el SVG que quieres y pulsa el icono de la barra de herramientas para abrir el popup.
3. Déjalo escanear. La extensión recorre el DOM y recoge los vectores que encuentra: elementos en línea, fondos CSS, referencias a sprites del mismo documento y fuentes de imagen, incluidos los URI data:.
4. Previsualiza y elige. Cada SVG aparece en una vista previa aislada para que lo veas limpio, fuera de la página abarrotada. Usa Anterior y Siguiente para recorrerlos, y escribe un nombre de archivo si te importa cómo se llame.
5. Descarga. Pulsa Descargar el SVG actual para el que está en pantalla —con el nombre que hayas escrito, o un svg-1.svg numerado si dejaste el campo en blanco— o Descargar todo en ZIP para llevarte el set entero de una vez, sin duplicados y numerado, con lo que no se haya podido resolver indicado en la línea de estado del popup.

Vista previa

¿Por qué no basta el clic derecho?

El Guardar imagen como… del clic derecho solo aparece para lo que el navegador clasifica como imagen con una dirección que pueda descargar: un <img> con URL, un canvas, a veces un fondo CSS. Tres de las cuatro fuentes de arriba no lo son. El SVG en línea no tiene URL. Un <use> de sprite resuelve a un fragmento de documento. Un fondo con URI data: es una cadena en una hoja de estilos. E incluso cuando el menú sí aparece, a menudo guarda un mapa de bits redibujado o un archivo llamado download.svg con el espacio de nombres roto. Leer el DOM esquiva todo eso y devuelve el vector real.

Dos cosas que despistan

Dos resultados sorprenden a quien lo usa por primera vez, y ambos son comportamiento esperado, no fallos.

• El archivo antes no abría; ahora sí. El SVG en línea suele omitir el espacio de nombres xmlns="http://www.w3.org/2000/svg" porque lo aporta el analizador de HTML. Copiado a un archivo suelto, ese SVG no abre. SVG Downloader repara el xmlns que falta al salir, así que sus archivos abren en Figma, Illustrator, VS Code y todos los navegadores.
• El icono se ve negro. Muchos iconos heredan su color del CSS mediante currentColor, así que el archivo suelto no tiene color propio y se dibuja en negro. Ese es el marcado verdadero. Si necesitas fijar un color concreto, usa el salto opcional al SVG Color Changer, recolorea y luego guarda.

Funciona en

Chrome 88+, Edge y Brave. Cualquier página que puedas abrir: fuentes en línea, CSS, sprite e imagen.

Resultado

El marcado vectorial original, con el espacio de nombres reparado, independiente de la resolución y recoloreable.

Privacidad

100 % en tu dispositivo. Sin servidor, sin cuenta, sin subidas, sin analítica.

Siguiente

¿Vas a por un set entero? Mira extraer iconos SVG y descargar todo en ZIP.

Conviene saber

Preguntas frecuentes