Cómo descargar archivos SVG de una web

Míralo — 19 segundos

Todo el proceso, de una pasada

tutorial · lo básico

Todo lo que viene a partir de aquí son esos mismos cinco pasos escritos, más los motivos detrás. Si solo querías la grabación, ya tienes lo que venías a buscar.

Qué muestra la grabación

1. Un SVG es texto vectorial, no una foto de uno
2. Paso uno: abre el popup en la página
3. Paso dos: déjalo escanear. Lee la página, no la red.
4. Paso tres: previsualiza y elige
5. Paso cuatro: ponle nombre al archivo
6. Paso cinco: descarga. Ese es todo el trabajo.

Primero, lo que nadie explica

Un SVG no es una imagen: son instrucciones para dibujar una

Un PNG es una rejilla de puntos de color. Un SVG es un documento de texto corto que dice traza una línea de aquí a aquí y luego curva hasta allí. Esa diferencia es toda la razón por la que esto merece la pena: como el archivo describe formas y no píxeles, se mantiene perfectamente nítido tanto si lo usas como favicon de 16 px como si lo imprimes de dos metros, y puedes abrirlo en un editor de texto y cambiarle el color editando una palabra.

También es la razón de que tu navegador sea poco servicial a la hora de guardarlos. El navegador solo ofrece Guardar imagen como… para lo que clasifica como imágenes con una dirección descargable. La mayoría de los SVG de una página moderna no tienen dirección alguna: las instrucciones de dibujo están escritas directamente en el HTML de la página. No hay nada a lo que el menú de guardado pueda apuntar, así que la entrada simplemente no aparece.

Leer el DOM de la página esquiva todo eso. La extensión le pregunta a la página qué ha dibujado realmente, recibe el marcado real y lo escribe en un archivo.

Los cinco pasos

La primera vez lleva unos dos minutos porque hay que instalar algo. Cada vez posterior son unos cinco segundos.

1. Instala la extensión. Añade SVG Downloader a Chrome, Edge o Brave, cualquier cosa con Chrome 88 o posterior. Es gratis y con licencia MIT, y solo pide activeTab, lo que significa que puede ver una página cuando pulsas su botón y en ningún otro momento.
2. Abre el popup en la página. Ve a la página que contiene el vector que quieres y pulsa el botón de la barra de herramientas. Si no lo ves, pulsa el icono de la pieza de puzle y ánclalo: lo querrás ahí.
3. Déjalo escanear. Recorre la página y recoge todos los vectores que puede resolver: elementos en línea, imágenes de fondo CSS, referencias a sprites del mismo documento y fuentes <img> u <object>, incluidos los URI data:. El contador te dice cuántos ha encontrado.
4. Previsualiza y elige. Cada uno recibe una vista previa aislada, fuera de la página abarrotada, para que confirmes que tienes lo correcto. Ant. y Sig. recorren la lista, y el paginador te dice dónde estás.
5. Ponle nombre y descárgalo. Escribe un nombre de archivo si te importa cómo se llame; déjalo en blanco y obtendrás un svg-1.svg numerado. Luego pulsa Descargar el actual. El archivo aterriza en tu carpeta de descargas como cualquier otro.

Dos sorpresas, ambas normales

Casi todo el mundo se topa con una de estas en su primer archivo, y ninguna es un fallo.

• El icono es negro. Casi todos los sistemas de iconos colorean desde el CSS con currentColor, lo que significa que el color vive en la hoja de estilos, no en la forma. Sacado por su cuenta, el archivo no tiene color propio y se dibuja en negro. Ese es el marcado de origen real. Para fijar un color dentro del archivo, usa el salto al SVG Color Changer, recolorea y guarda.
• Ahora abre, cuando copiar y pegar nunca funcionó. El SVG en línea suele omitir el espacio de nombres xmlns="http://www.w3.org/2000/svg", porque el analizador de HTML lo aporta gratis. Copia ese marcado a mano en un archivo .svg vacío y no lo abrirá nada. SVG Downloader repara el espacio de nombres que falta al salir, y por eso sus archivos abren en Figma, Illustrator, Inkscape, VS Code y todos los navegadores.

Abrir el archivo cuando ya lo tienes

Hacer doble clic en un SVG suele abrirlo en tu navegador, que lo dibuja pero no te deja editarlo. Para trabajar de verdad con él: arrástralo a Figma y llegará como capas vectoriales editables; ábrelo en Illustrator o Inkscape para tener herramientas de dibujo completas; o ábrelo en cualquier editor de texto para ver —y cambiar— el marcado directamente. Si lo que necesitas es un PNG, el popup te lo convierte antes de guardarlo.

Funciona en

Chrome 88+, Edge y Brave. Cualquier página que puedas abrir en ellos.

Obtienes

El marcado vectorial original, con el espacio de nombres reparado, no una captura.

Privacidad

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

Siguiente

¿Necesitas el conjunto entero? Extrae todos los SVG. ¿Solo quieres el código? Cópialo.

Conviene saber

Preguntas frecuentes