- Inicio
- Tutoriales
- Desde el HTML
Tutorial — para quien lee el código fuente
Cómo descargar un SVG del HTML
Puedes hacerlo perfectamente a mano en DevTools. También pasarás diez minutos averiguando por qué el archivo que has guardado se niega a abrir, así que aquí tienes la ruta manual y el motivo de que muerda.
Míralo — 17 segundos
El marcado fuera, sin el panel Elements
Aquí se ven las dos salidas: el marcado al portapapeles y el mismo vector como archivo. La diferencia entre ellas es solo dónde acaba.
Qué muestra la grabación
- El marcado está en línea en el HTML: no hay archivo que descargar
- Encuentra el elemento que quieres
- Copiar código se lleva el marcado en sí
- Ver el código fuente te daría la misma etiqueta, sin el xmlns
- O guárdalo como archivo, con el espacio de nombres reparado
La ruta manual y su única trampa
Copiar y pegar desde Elements te da un archivo que no abre
El método a mano es directo: abre DevTools, encuentra el elemento <svg> en el panel Elements, haz clic derecho, elige Copy → Copy outerHTML, pega en un archivo nuevo y guárdalo como .svg. Luego haz doble clic y tu navegador te muestra un error o una página en blanco.
El motivo es un espacio de nombres. Un documento SVG independiente debe declarar xmlns="http://www.w3.org/2000/svg" en su elemento raíz. El SVG en línea casi nunca lleva ese atributo, porque el analizador de HTML mete los elementos en el espacio de nombres de SVG automáticamente según dónde aparecen: el atributo es genuinamente innecesario dentro del HTML. Saca el marcado de ese contexto y pasa a ser necesario, y no está.
Así que el arreglo manual es real pero fácil de olvidar: añade tú el atributo xmlns a la etiqueta <svg> raíz, cada vez. Hay otras dos cosas que conviene hacer ya que estás, y son menos obvias.
- Elimina todo lo ejecutable. El marcado de una página puede llevar elementos
<script>, atributos de manejadoreson*y referencias externas. No los quieres en un archivo que vas a subir a un repositorio o abrir en una herramienta de diseño. - Comprueba si hay
currentColor. Si el icono hereda su color del CSS, el archivo extraído no tiene color propio y se dibujará en negro. Eso es comportamiento correcto, no corrupción.
La ruta que hace las tres cosas por ti
Reparación del espacio de nombres, saneado y dos salidas a elegir, sin salir de la página ni abrir un panel.
- Abre el popup en la página. Pulsa el botón de la barra de herramientas. Se recoge cada
<svg>en línea del documento, junto con los vectores de fondo CSS, las referencias a sprites y las fuentes de imagen. - Encuentra el elemento que quieres. Recórrelos con Ant. y Sig.. La vista previa aislada es bastante más fácil de reconocer que un nodo resaltado en el árbol de Elements.
- Llévatelo como marcado o como archivo. Copiar código pone el marcado saneado en tu portapapeles, con espacio de nombres incluido, listo para pegar en un componente. Descargar el actual escribe lo mismo en un archivo
.svg. - Pégalo o ábrelo. En ambos casos el resultado es un documento independiente y válido: abre en Figma, Illustrator, VS Code y todos los navegadores sin retoques.
Qué te enseña y qué no el código fuente
Ver el código fuente muestra el HTML que envió el servidor. Ese no es el mismo documento que el de tu pantalla. Todo lo que un framework haya dibujado en el cliente —que, en un sitio React, Vue o Svelte, son la mayoría de los iconos— no aparece nunca en el código fuente. El DOM es el registro honesto de lo que es la página, y es lo que leen tanto DevTools como esta extensión.
Los sprites son el otro motivo por el que copiar a mano decepciona
Copia el outerHTML de un icono basado en sprite y obtendrás algo como <svg><use href="#star"/></svg>: un puntero, no una forma. Guardado como archivo no dibuja nada, porque el símbolo al que apunta vivía en otra parte del documento que no copiaste. Resolver esa referencia de vuelta a su símbolo es una de las cosas que el escaneo hace por ti. Más sobre sprites →
Si lo que quieres es una tubería en tiempo de compilación
Para extraer iconos como parte de una compilación, esta es la herramienta equivocada y un navegador headless es la correcta: conduce la página, lee el DOM, escribe los archivos. La extensión es para el caso interactivo: estás mirando una página y quieres ese icono ahora.
- La trampa
- El SVG en línea omite
xmlns, así que el marcado copiado a mano no abrirá. - Reparado
- Se añade el espacio de nombres y se eliminan scripts, manejadores y referencias externas.
- Sprites
- Los punteros
<use>se resuelven de vuelta al símbolo, no se guardan como punteros. - Código fuente
- Muestra el HTML del servidor, no lo que un framework dibujó en el cliente.
Conviene saber
Preguntas frecuentes
¿Por qué no abre el SVG que copié de DevTools?
Le falta el atributo xmlns="http://www.w3.org/2000/svg". El SVG en línea no lo necesita porque el analizador de HTML aporta el espacio de nombres, pero un documento .svg independiente sí. Añádelo a la etiqueta raíz o deja que la extensión lo repare por ti.
¿Puedo sacar el SVG del código fuente?
Solo si lo envió el servidor. Todo lo que React, Vue o Svelte dibujen en el cliente no aparece nunca en el código fuente. El DOM es lo que realmente se dibujó, y es lo que lee el escaneo.
He copiado un icono de sprite y el archivo está vacío.
Copiaste un puntero <use> en vez de la forma a la que apunta. El símbolo vive en otra parte del documento. El escaneo resuelve esa referencia de vuelta al símbolo real para que obtengas un archivo autocontenido.
¿Se modifica el marcado extraído?
Solo de maneras que lo convierten en un archivo independiente válido: se añade el espacio de nombres xmlns y se eliminan los elementos script, los atributos de manejadores de eventos y las referencias externas. Las formas quedan intactas.
¿Puedo automatizar esto en una compilación?
Con la extensión no: para eso usa un navegador headless. Esto es para el caso interactivo, cuando estás mirando una página y quieres el icono ahora.
Sáltate el panel y quédate el marcado
Espacio de nombres reparado, scripts eliminados, sprites resueltos.