Cómo guardar un SVG cuando el clic derecho no te deja

Míralo — 19 segundos

Guardar lo que el menú no ofrece

tutorial · sin clic derecho

La grabación se abre en una página donde ni un solo icono ofrece opción de guardado. No es una página rara: así es como se publica la mayoría de los sistemas de iconos.

Qué muestra la grabación

1. Falta «Guardar imagen como…» en todos los iconos de aquí
2. La extensión lee el DOM en vez del menú
3. En línea, fondo CSS, sprite, img: todos encontrados
4. Elige el que realmente quieres
5. Ponle nombre
6. Guardado: un vector real, no una captura

El motivo real

El navegador solo ofrece guardar lo que puede descargar

Guardar imagen como… aparece cuando el navegador tiene una imagen con una dirección que puede pedir. Esa categoría es más estrecha de lo que parece, y los sistemas de iconos modernos se quedan casi por completo fuera. Hay cuatro sitios donde se esconde un SVG en una página, y solo uno se porta bien.

• <svg> en línea. El marcado está escrito directamente en el HTML. Sin src, sin URL, sin nada que descargar, así que el menú no ofrece nada. Así se publica hoy la inmensa mayoría de los iconos. Cómo se lee →
• background-image de CSS. El vector se define en una hoja de estilos, a menudo como URI data: incrustado. El navegador lo archiva como decoración y no como contenido. Cómo se lee →
• Referencias <use> a un sprite. Un sprite oculto contiene todos los iconos; cada sitio donde aparece uno es solo un puntero hacia él. Guardar el puntero te da un archivo vacío. Cómo se lee →
• Fuentes <img> y <object>. El caso amable, y aun así la fuente puede ser un URI data: que el diálogo de guardado destroza, o una URL de otro origen que se guarda con un nombre sin sentido.

Así que tres de los cuatro no se pueden guardar así ni en principio. Leer el DOM funciona con los cuatro, porque a esas alturas el propio navegador ya ha resuelto cada uno en marcado real.

Guardarlo igualmente

No necesitas saber cuál de los cuatro tienes delante. Esa es la gracia.

1. Deja en paz el menú del clic derecho. Si falta Guardar imagen como… o está atenuado, por mucho que insistas no aparecerá. La ausencia es información, no un fallo.
2. Abre el popup. Pulsa el botón de la barra de herramientas en la página. El escaneo resuelve las cuatro fuentes en marcado independiente: en línea, fondo CSS, referencia de sprite y fuente de imagen por igual.
3. Previsualiza para identificar el correcto. La vista previa aislada es la forma más rápida de distinguir dos iconos parecidos, sobre todo en un set donde la página los muestra a 16 px.
4. Ponle nombre y guarda. Escribe un nombre de archivo y pulsa Descargar el actual. El espacio de nombres se repara al salir, así que el archivo abre en Figma, Illustrator y todos los navegadores.

Cosas que parecen arreglos pero no lo son

• Hacerle una captura. Esto convierte un vector independiente de la resolución en una rejilla fija de píxeles, para siempre. Se emborronará en cuanto alguien lo escale, y no se puede recolorear. La comparación completa →
• Copiar el marcado desde DevTools. Funciona, pero es engorroso, y al marcado que copias le falta el espacio de nombres xmlns, así que el archivo resultante no abrirá hasta que lo añadas a mano. Si lo que quieres es el marcado y no un archivo, Copiar código hace lo mismo con el espacio de nombres ya arreglado.
• Buscar el archivo en la pestaña Network. Vale para las fuentes <img>. Inútil para las otras tres, porque nunca se hizo ninguna petición: el marcado llegó dentro del documento HTML.

Por qué falla

Tres de las cuatro fuentes de SVG no tienen dirección descargable.

Qué sí funciona

Leer el DOM dibujado, donde las cuatro ya se han resuelto en marcado real.

Extra

El xmlns que falta se repara, así que el archivo abre de verdad.

Ver también

Una vía más rápida para un icono · SVG en línea

Conviene saber

Preguntas frecuentes