Descarga SVG en línea de cualquier página

Un <svg> en línea se dibuja directamente en el HTML, así que no tiene URL de imagen ni menú de clic derecho. SVG Downloader lo lee directo del DOM, lo repara y te entrega el archivo original.

Instalar la extensión Leer el paso a paso →

El problema

Por qué el navegador no guarda el SVG en línea

Casi todos los iconos de un sitio moderno son SVG en línea: el marcado vive directamente en el HTML de la página y no en un archivo aparte. Estupendo para el rendimiento y los estilos, y pésimo para guardarlo. No hay src que abrir en otra pestaña, no hay entrada en el menú del clic derecho y Guardar imagen como… está atenuado o directamente no aparece.

Los apaños habituales son malos. Capturar el icono te da un mapa de bits borroso atado a un tamaño. Rebuscar en DevTools significa cazar el nodo <svg> correcto, copiar su HTML externo, pegarlo en un archivo y descubrir que no abre porque falta el espacio de nombres. Querías un archivo de 400 bytes; te llevaste una tarea.

Qué hace SVG Downloader en su lugar

Abre el popup en cualquier página y recorre el DOM en busca de todos los elementos <svg>, incluidos los anidados en lo hondo de componentes, el marcado adyacente al shadow DOM y los sets de iconos repetidos. Cada uno recibe una vista previa aislada para que veas exactamente qué vas a guardar, fuera de la página abarrotada. Elige uno y escribirá el marcado original en un archivo .svg de verdad.

Los trazados reales, no un redibujado. Lo que se guarda es el SVG que estaba en la página: sus atributos d exactos, su viewBox, su propia precisión. Se mantiene nítido a 16 px o a 1600 px y sigue siendo texto editable que puedes recolorear.
Un xmlns reparado. El SVG en línea suele omitir el espacio de nombres xmlns="http://www.w3.org/2000/svg" porque lo aporta el navegador. Copiado a un archivo suelto, ese SVG no abre. SVG Downloader lo devuelve para que el archivo funcione en Figma, Illustrator, VS Code y todos los navegadores.
El nombre lo pones tú. Escribe un nombre en el popup antes de guardar y el archivo saldrá exactamente así —star.svg, no descarga (3).svg—. Déjalo en blanco y recurrirá a un svg-1.svg numerado, con el prefijo que hayas puesto en las opciones de la extensión.

Qué obtienes

Formato: Un archivo .svg limpio y conforme al estándar: el marcado vectorial original con el espacio de nombres reparado.
Fidelidad: Cada trazado y cada viewBox conservados. Independiente de la resolución y todavía recoloreable.
Dónde se ejecuta: Por completo en tu navegador. El SVG en línea nunca sale de la página: no hay subidas ni servidor.
También detecta: Fondos CSS, referencias de sprite y ZIP de la página entera.

Conviene saber

Preguntas sobre el SVG en línea

¿Por qué no puedo guardar un SVG en línea con clic derecho?

Porque un <svg> en línea forma parte del documento, no es una imagen con dirección propia. El navegador solo ofrece Guardar imagen como… para lo que trata como imágenes: <img>, fondos CSS, canvas. El SVG en línea no tiene URL que guardar, así que la opción nunca aparece.

El SVG que copié de DevTools no abre. ¿Por qué?

Casi siempre falta el espacio de nombres. El SVG en línea depende del analizador de HTML para saber que es SVG; un archivo suelto necesita un xmlns="http://www.w3.org/2000/svg" explícito. SVG Downloader lo añade automáticamente, así que sus archivos abren en cualquier sitio sin retoques.

¿El icono descargado conservará su color?

Conserva el color que esté grabado en el marcado. Muchos iconos en línea heredan su color del CSS (currentColor), así que el archivo guardado puede salir negro. Si quieres fijar antes un color concreto, usa el salto a SVG Color Changer y luego guarda.

Llévate ese icono en dos clics

Gratis, privado, y lee el SVG en línea que el navegador finge que no está.

Instalar la extensión Todas las funciones →