Cómo descargar un SVG desde una URL

Una URL no es un archivo. A veces apunta directamente a un vector y a veces a una página que dibuja uno, y ambos casos necesitan un tratamiento completamente distinto; por eso las herramientas de «pega una URL» funcionan la mitad de las veces.

Instalar la extensión Ir a los pasos ↓

Míralo — 22 segundos

De la barra de direcciones al archivo guardado

tutorial · desde una url

La barra de direcciones dice vectorly.io/icons, sin extensión de archivo por ninguna parte. El vector sale igualmente.

Fíjate en lo que dice la barra de direcciones en la grabación. No hay ningún .svg, y no hace falta: el escaneo lee lo que la página dibujó, no lo que promete la URL.

Qué muestra la grabación

Abre la URL que contiene el vector
Pulsa el botón de la barra de herramientas: lee la página en vivo
La barra de direcciones no lleva .svg. No le hace falta.
Avanza hasta el vector que buscabas
Ponle nombre al archivo antes de guardarlo
Descargar el actual: el marcado real, desde esa URL
Guardado como star.svg. Nítido a cualquier tamaño.

La distinción que importa

Se llaman «URL de un SVG» a dos cosas completamente distintas

Antes que nada, averigua cuál de estas tienes de verdad: el método correcto es distinto en cada caso, y aquí es donde casi todo el mundo se atasca.

Una URL directa a un archivo vectorial, terminada en .svg, a menudo en una CDN. Ábrela en una pestaña y verás el gráfico sobre un fondo blanco vacío, sin nada más. Esta sí puede guardarla tu navegador por su cuenta: Ctrl/Cmd+S funciona bien, aunque puede guardarla con un nombre poco útil.
Una URL a una página que dibuja vectores. Casi todas las URL reales son de este tipo. La dirección acaba en /icons, en /precios o en nada, y los gráficos que quieres son marcado en línea dentro del HTML que devuelve la página. No hay archivo en ninguna dirección que descargar, así que no hay nada que guardar directamente.

Las webs conversoras de «pega una URL» solo cubren el primer caso, y por eso tan a menudo devuelven un error o el HTML de la página renombrado a .svg. Descargan la dirección; no la dibujan.

Guardar desde la URL de una página

Este es el segundo caso, el habitual. El truco es dejar de tratar la URL como un archivo y dejar que la página se dibuje primero.

Abre la URL en una pestaña. Deja que la página termine de cargar. Importa más de lo que parece: los iconos que JavaScript inyecta después de la carga también se encuentran, porque el escaneo lee el DOM tal y como está cuando pulsas, no el HTML que envió el servidor al principio.
Pulsa el botón de la barra de herramientas. El popup se abre contra la pestaña en la que estás. No hay nada que pegar ni que configurar.
Lee el contador. Indica cuántos vectores dibuja realmente esa URL. Ese número suele ser mayor de lo que la gente espera, porque incluye el logotipo, la interfaz y los iconos del pie.
Avanza hasta el que buscabas. Usa Ant. y Sig.. La vista previa muestra cada uno aislado, que es la forma más rápida de distinguir dos iconos parecidos.
Ponle nombre y descárgalo. Escribe un nombre de archivo y pulsa Descargar el actual. Obtienes el marcado original de esa URL, con el espacio de nombres xmlns reparado para que el archivo abra en cualquier sitio.

Si tu URL sí acaba en .svg

Entonces tienes el caso fácil, y tienes opciones. Abrirla y pulsar Ctrl/Cmd+S la guardará. También la extensión, que además te deja ponerle un nombre decente y reparar el espacio de nombres si el origen viene mal formado, algo que compensa para todo lo que vayas a subir a un repositorio.

Una advertencia sobre las URL directas: muchos enlaces de CDN sirven el archivo con un Content-Type de text/plain, y en ese caso tu navegador te enseña el marcado como texto en vez de dibujarlo. El archivo está bien; la cabecera está mal. Guardarlo te sigue dando un SVG funcional.

URLs a las que la extensión no puede llegar

Funciona en páginas que puedas abrir, así que lo que tú no puedas abrir, ella tampoco lo puede leer. En la práctica eso significa chrome:// y otras páginas internas del navegador, la Chrome Web Store y las galerías de complementos (los navegadores bloquean ahí las extensiones a propósito), páginas locales file:// salvo que le des acceso a archivos, y cualquier cosa tras un inicio de sesión que no tengas. Ahora bien, si sí has iniciado sesión, funciona con normalidad, y eso es algo que ninguna herramienta en línea puede hacer con una URL que pegues.

Entrada: Cualquier URL de página que puedas abrir; no hace falta extensión .svg.
Resuelve: Iconos dibujados por JavaScript, páginas con sesión iniciada y marcado en línea sin ninguna dirección detrás.
Resultado: El vector original, con el espacio de nombres reparado, con el nombre que quieras.
Ver también: Desde un enlace · Por qué los extractores en línea se pierden esto

Conviene saber

Preguntas frecuentes

¿Puedo simplemente pegar una URL en un descargador de SVG en línea?

Solo si la URL apunta directamente a un archivo .svg. Una herramienta en línea descarga la dirección pero nunca dibuja la página, así que cualquier vector puesto como marcado en línea —que son la mayoría— le resulta invisible. Una extensión se ejecuta dentro de la página ya dibujada, y por eso sí los ve.

La URL no lleva .svg. ¿Es un problema?

No. El escaneo lee lo que la página dibujó, no lo que prometía la dirección. Una URL que acaba en /icons o /precios funciona exactamente igual que una que acaba en .svg.

¿Por qué al abrir la URL .svg me sale código en vez de una imagen?

El servidor lo envía con un tipo de contenido text/plain en lugar de image/svg+xml, así que el navegador lo muestra en vez de dibujarlo. El archivo en sí está bien: guardarlo te da un SVG funcional.

¿Funciona en una página en la que he tenido que iniciar sesión?

Sí. Se ejecuta dentro de tu navegador sobre la página que ya estás mirando, así que tu sesión se aplica con normalidad. Esto es lo principal que un servicio de «pega una URL» no puede hacer.

¿Y una URL que redirige?

Síguela primero en la pestaña. La página en la que acabes es la que se escanea, que casi siempre es la que querías de todos modos.

Apunta a una URL y llévate el vector

Sin pegar nada, sin subidas, y funciona en páginas que requieren sesión.

Instalar la extensión Los 15 tutoriales →