Cómo descargar los SVG de una página web

Míralo — 17 segundos

Cuenta, comprueba y luego llévatelos

tutorial · inventario

El contador subiendo desde cero es la página contándote de qué está hecha en realidad, y rara vez es el número que la gente supone.

Qué muestra la grabación

1. ¿Cuántos vectores tiene realmente esta página?
2. El contador responde: 24 encontrados
3. Recórrelos para ver qué te llevas
4. Y luego llévatelos todos en un clic
5. Lo que no se haya podido resolver se nombra, no se descarta en silencio

Por qué el número sorprende

Una página dibuja muchos más vectores de los que parece

Cuando miras una página ves el contenido. El escaneo ve todo lo que el navegador dibujó, y una página moderna dibuja vectores constantemente en sitios que nunca contarías.

• El logotipo, hoy casi siempre <svg> en línea y no un archivo de imagen.
• La interfaz: la lupa de búsqueda, las barras de menú, las cruces de cerrar, cada chevrón de cada desplegable.
• Marcas sociales y de pago en el pie, normalmente una docena.
• Formas decorativas: separadores de sección, fondos con manchas, fragmentos de ilustración, dibujados como vectores de fondo CSS.
• Iconos de componentes que ahora mismo no se ven, como un menú cerrado que ya está en el DOM.

Por eso contar antes de coger vale treinta segundos: una página que parece tener seis iconos suele informar de veinticuatro, y saber cuál es cuál antes de construir un ZIP te ahorra ordenarlo después.

Hacer inventario

Aquí el orden importa: la idea es saber lo que tienes antes de comprometerte con ello.

1. Deja la página en el estado que quieres capturar. Haz visibles las secciones con carga diferida; abre el menú si los iconos que quieres viven dentro. El escaneo lee el DOM tal y como está, así que lo que aún no se ha dibujado todavía no está.
2. Abre el popup y lee el contador. El contador indica el número de vectores distintos encontrados, ya sin duplicados. Ese es tu inventario.
3. Recorre las vistas previas. Ant. y Sig., con el paginador mostrando tu posición en el conjunto. Aquí es donde descubres que ocho de los veinticuatro son marcas de pago del pie.
4. Llévate lo que quieras. O nombras y descargas vectores sueltos según los encuentras, o pulsas Descargar todo en ZIP para el lote. La línea de estado informa de lo guardado y nombra lo que no ha podido resolver.

Vuelve a escanear si cambias la página

El escaneo es una instantánea, no un flujo en vivo. Si abres un modal, cambias de pestaña, despliegas un acordeón o haces visible una rejilla con carga diferida después de escanear, esos vectores nuevos aún no están en la lista. El botón de reescanear de la cabecera del popup vuelve a leer la página tal y como está ahora. Este es, de lejos, el motivo más común por el que alguien informa de que «falta» un icono: es que de verdad no estaba en el DOM cuando corrió el escaneo.

Qué no incluye el contador

Los vectores dentro de <iframe> de otro origen no se cuentan, porque la política de mismo origen del navegador implica que ni la propia página puede leerlos: un mapa incrustado o un widget de pago es otro documento con otras reglas. Lo dibujado en un <canvas> tampoco se cuenta, porque a esas alturas ya son píxeles y no queda vector que extraer.

El contador

Vectores distintos tras eliminar duplicados, no el recuento bruto de elementos.

Instantánea

Lee el DOM tal y como está. Vuelve a escanear tras cambiar la página.

No se cuenta

Los iframes de otro origen y todo lo ya rasterizado en un <canvas>.

Ver también

Llévate el set entero · La función de ZIP

Conviene saber

Preguntas frecuentes