- Inicio
- Tutoriales
- Extraer todos los SVG
Tutorial — el conjunto entero de una vez
Cómo extraer todos los SVG de una web
Recorrer cuarenta iconos de uno en uno no es la tarde de nadie. Un escaneo los encuentra todos; un clic se los lleva todos.
Míralo — 17 segundos
Un escaneo, un ZIP
El paso intermedio de recorrerlos no es relleno: es el que casi todo el mundo se salta y luego lamenta, porque es tu única oportunidad de ver qué te vas a llevar.
Qué muestra la grabación
- Un escaneo encuentra todos los vectores que dibuja la página
- Comprueba el conjunto antes de llevártelo
- Ant. y Sig. recorren la lista entera
- Descargar todo en ZIP: el conjunto entero de una vez
- Sin duplicados, numerados y con lo omitido nombrado en la línea de estado
Qué recoge realmente una pasada
Cuatro fuentes, resueltas en una sola carpeta
El escaneo no busca archivos .svg. Lee la página dibujada y resuelve cada vector al que puede llegar hasta convertirlo en marcado independiente, y por eso el recuento suele ser mayor que el número de iconos evidentes en pantalla.
- Elementos
<svg>en línea: el grueso de cualquier set de iconos moderno, más el logotipo y casi toda la interfaz. - Vectores en
background-imagede CSS, incluidos los URIdata:incrustados leídos de la hoja de estilos. - Referencias
<use>a sprites del mismo documento, resueltas de vuelta al símbolo al que apuntan para que cada una se convierta en un archivo real y autocontenido. - Fuentes
<img>y<object>, descargadas e incrustadas.
Los duplicados se eliminan antes de construir el ZIP. Una página que dibuja el mismo chevrón en diecinueve sitios te da un chevrón, no diecinueve, y esa es la diferencia entre una carpeta útil y un desastre.
Llevarte el conjunto
Cuatro pasos, y el tercero es el que no conviene saltarse.
- Abre el popup en la página. Pulsa el botón de la barra de herramientas. El contador indica cuántos vectores distintos dibuja la página.
- Vuelve a escanear si la página ha cambiado. Si desde entonces has abierto un menú, cambiado de pestaña o hecho visible una rejilla con carga diferida, pulsa el botón de reescanear de la cabecera para que se incluyan los iconos nuevos.
- Recórrelos para comprobar el conjunto. Camínalo con Ant. y Sig.. Treinta segundos aquí te dicen si vas a llevarte el set de iconos que querías o el set más todas las florituras decorativas de la página.
- Pulsa Descargar todo en ZIP. El conjunto entero se empaqueta, sin duplicados y numerado. La línea de estado informa de cuántos se guardaron y nombra lo que no se ha podido extraer por separado, en vez de descartarlo en silencio.
Lee la línea de estado
Cuando todo se resuelve, ves un simple Descargados 24 SVG en ZIP. Cuando algo no, ves el recuento de los que salieron bien y los nombres de los que no, porque una herramienta masiva que descarta archivos en silencio es peor que una que falla en voz alta. Los motivos habituales de que un vector no se pueda extraer por separado son una referencia de sprite que apunta a otro documento que la página nunca cargó, o una fuente de imagen en un dominio que rechaza las lecturas de origen cruzado.
Páginas muy grandes
Escanear todas las hojas de estilo de una página con miles de reglas es caro, así que el escaneo de fondos CSS está acotado. Si se alcanza ese límite verás Esta página es demasiado grande para escanear fondos CSS; se han encontrado los demás SVG, lo que significa que los elementos en línea, los sprites y las fuentes de imagen sí se recogieron. En la práctica los vectores de fondo CSS son los más raros de los cuatro, así que es una pérdida pequeña en una página donde la alternativa es una pestaña colgada.
Nombrar lo que sale
Los archivos del ZIP se numeran a partir de un prefijo que puedes cambiar en los ajustes de la extensión, junto con el nombre del propio ZIP. Si sueles sacar sets de sitios distintos, poner un prefijo por proyecto es más rápido que renombrar veinte archivos después.
- Una pasada
- En línea, fondo CSS,
<use>de sprite y fuentes de imagen, juntos. - Sin duplicados
- El mismo icono dibujado diecinueve veces llega una vez.
- Honesto
- Lo que no se ha podido resolver se nombra en la línea de estado.
- Ver también
- La función masiva · Inventario de la página
Conviene saber
Preguntas frecuentes
¿Consigue todos los SVG de la página?
Todos los que puede resolver como archivo independiente: elementos en línea, imágenes de fondo CSS, referencias a sprites del mismo documento y fuentes img u object. Lo que no puede resolver se nombra en la línea de estado en vez de descartarse en silencio.
¿Me llevaré el mismo icono veinte veces?
No. Los duplicados se eliminan antes de construir el ZIP, así que un chevrón dibujado en diecinueve sitios llega una vez.
Algunos iconos solo aparecieron después de hacer scroll.
El contenido con carga diferida no está en el DOM hasta que se dibuja. Hazlo visible y luego pulsa el botón de reescanear de la cabecera del popup para recogerlo.
¿Qué significa «demasiado grande para escanear fondos CSS»?
La página tiene tanto CSS que escanearlo todo colgaría la pestaña, así que se omitió esa fuente. Los elementos en línea, los sprites y las fuentes de imagen sí se recogieron.
¿Puedo cambiar los nombres de archivo del ZIP?
Sí: el prefijo de numeración y el nombre del ZIP se configuran en los ajustes de la extensión.
Llévate el set entero en un clic
Sin duplicados, numerado y honesto con todo lo que no ha podido alcanzar.