DevExtractor: descarga SVG inline, imágenes y fuentes de cualquier web, y cambia imágenes en vivo
Una extensión de Chrome para quien hace webs. Saca todos los SVG incrustados, las imágenes, los fondos CSS, los enlaces y las fuentes de una página, los descarga en un ZIP y te deja sustituir imágenes en vivo para enseñar alternativas a un cliente. Qué hace y cómo se usa.
Si haces webs, seguro que te ha pasado. Necesitas los iconos de una página que montaste hace meses y resulta que no son archivos: son <svg> metidos directamente en el HTML. El camino de siempre es abrir el inspector, buscar el elemento, copiar su HTML, pegarlo en un bloc de notas y guardarlo como .svg. Uno. Y luego el siguiente. Y el siguiente.
O esta otra escena: tienes al cliente delante, mirando su web, y duda entre dos logos. O entre la foto de la portada y otra que le mandaste ayer. Tocar el código, desplegar y volver a enseñárselo es mucho trabajo para un "¿y si probamos la otra?".
DevExtractor nació para lo primero y acabó siendo muy útil para lo segundo. Es una extensión de Chrome que encuentra todos los medios de una página (imágenes, SVG inline, vídeos, fondos de CSS), sus enlaces y sus fuentes, te deja descargarlos de golpe y cambiar imágenes en vivo sin tocar el código.
Está en la Chrome Web Store. Cómo está hecha por dentro lo cuento en DevExtractor por dentro; este artículo es para usarla.
Todas las capturas son de una web de demostración que monté para el artículo: un estudio de diseño inventado, con fotos generadas y fuentes de licencia libre.
Qué es, en una frase
Abres DevExtractor en una página, pulsas Extraer y tienes en una lista todo lo que hay en ella para descargarlo, copiarlo o cambiarlo, sin que nada salga de tu navegador.
Dónde se abre
Hay dos formas, con la misma interfaz:
- El popup: el icono de la extensión en la barra de Chrome. Es lo más rápido.
- El panel de DevTools: abre las herramientas de desarrollador (F12) y busca la pestaña DevExtractor. Es más ancho, así que se ve mejor cuando la página tiene muchos elementos. Las capturas de este artículo son del panel.
Arriba hay tres pestañas: Multimedia, Enlaces y Fuentes.
SVG inline y el resto de medios
Es para lo que la hice, y lo que más tiempo me ahorra.
- En Multimedia, pulsa Extraer Multimedia. La extensión recorre la página y te enseña una tarjeta por cada imagen, SVG inline, vídeo, audio e imagen de fondo de CSS que encuentra.
- Filtra si hace falta. Puedes quedarte con un tipo (Imágenes, Videos, Audio, SVGs, Fondos), buscar por dominio (por ejemplo, solo lo que viene de tu CDN), buscar por texto en la URL o limitar por tamaño en KB. Los filtros se recuerdan para la próxima vez.
- Marca las tarjetas que quieras o pulsa Seleccionar Todo.
- Pulsa Descargar. Van todas en un ZIP, y una barra te dice por dónde va. Si solo quieres una, cada tarjeta tiene su propio botón de descarga.
Con los SVG inline está la gracia. Cada <svg> del HTML aparece como una tarjeta más, con su vista previa, y se descarga como un archivo .svg de verdad que puedes abrir en Figma, en Illustrator o meter en otro proyecto. Si la página repite el mismo icono diez veces, aparece una sola vez.
Así me llevo los recursos de una web mía a otra: filtro por SVGs, selecciono todo, descargo, y en un ZIP tengo todos los iconos. Lo mismo con las imágenes o los fondos.
Al pasar el ratón por una tarjeta salen más acciones:
- Ubicar en página: hace scroll hasta el elemento en la web, útil cuando no sabes de dónde sale una imagen.
- Descargar, Abrir en nueva pestaña y Copiar URL.
- Copiar fragmento CSS: copia al portapapeles las propiedades de maquetación del elemento (tamaño,
position,object-fit,border-radius,clip-path, márgenes, fondo…). - Extraer paleta de colores: saca los colores dominantes de la imagen y copia el que pulses.
Cambiar imágenes en vivo
Es el uso que más me ha sorprendido, y lo que más uso con clientes. Cuando alguien duda entre dos imágenes, se las enseño las dos sobre su propia web, en el momento, sin tocar una línea de código.
- Extrae los medios como antes.
- Busca la tarjeta de la imagen que quieres cambiar: el logo, la foto de portada, un fondo.
- Arrastra tu imagen desde el escritorio y suéltala sobre esa tarjeta (en la vista de cuadrícula).
- La página cambia al instante. Si no convence, sueltas otra. Y para volver a la original, el botón de Restaurar de la tarjeta.
Si solo quieres ver cómo queda la página sin esa imagen, el botón Sustituir de la tarjeta la cambia por un rectángulo gris, y el mismo botón pasa a ser Restaurar.
Funciona con imágenes normales, con las de <picture>, con los SVG inline, con las imágenes de fondo de CSS (también las de ::before y ::after) y con el póster de los vídeos. En la captura, el logo era un SVG inline y ahora es un PNG.
Si quieres cambiar varias a la vez, selecciónalas y usa la barra de Aplicar que aparece arriba. Con Marcador se sustituyen por el rectángulo gris. Con Imagen personalizada eliges un archivo y se cambian todas por él.
Hay que tener en cuenta dos cosas:
- Es un cambio solo en tu pantalla. No toca el servidor ni el código. Si recargas la página, vuelve a estar como antes. Para enseñar alternativas es justo lo que quieres.
- Si la web cambia de página sin recargar (las que están hechas con React, Vue y similares), la extensión deshace los cambios al navegar, para no dejar imágenes cambiadas en un sitio donde no tocaba.
Yo lo he usado siempre con webs propias o de clientes. En la página de cualquier otro también funciona, pero el sentido es el mismo: probar cómo quedaría algo.
En las mismas tarjetas tienes otras dos herramientas que sirven para lo mismo:
- Ocultar en página: hace desaparecer el elemento. Sirve para ver cómo queda una sección sin un banner, por ejemplo. Con la selección puedes Ocultar Seleccionados de una vez, y el icono del ojo tachado de los filtros oculta todo lo filtrado.
- Editar filtros: desenfoque, escala de grises y brillo aplicados al elemento en la propia página.
Fuentes
En la pestaña Fuentes, Extraer Fuentes te dice qué tipografías usa la página. De cada una ves si es una fuente web (cargada por la página) o una del sistema, en cuántos elementos se usa, y una vista previa con un texto real de la página que puedes cambiar por el tuyo.
El botón del ojo, Destacar en la página, recuadra en la web todos los textos que usan esa fuente. Muy útil para entender una web que no hiciste tú, o para descubrir ese título que se quedó con la tipografía equivocada.
Además puedes copiar el nombre de la fuente y exportar la lista en .json.
En las fuentes web aparece también Descargar archivos de fuente, con los archivos (.woff2, .woff, .ttf…) que carga la página. Aquí hay que tener cuidado: que puedas descargar una fuente no quiere decir que puedas usarla. Muchas tipografías son de pago o tienen licencias que no permiten usarlas en otro proyecto. Descárgala solo si su licencia lo permite, como las que tienen licencia OFL (casi todas las de Google Fonts, por ejemplo). Si no lo tienes claro, busca la fuente por su nombre y lee la licencia antes.
Enlaces
La pestaña Enlaces saca todos los enlaces de la página, con su texto y su dominio, y marca cuáles son externos. Puedes buscar por URL, texto o dominio, copiar los filtrados o exportarlos a .txt o .json.
Lo uso para revisar los enlaces de una web antes de entregarla, o para sacar una lista de URLs sin copiarlas una a una.
DevExtractor también tiene botones de descarga en Instagram. Yo no lo uso, porque no tengo Instagram, pero cuando estaba con la extensión vi que mucha gente se quejaba de que las extensiones para descargar de Instagram habían dejado de funcionar, así que lo añadí.
En Instagram aparecen botones encima del propio contenido: en las historias y destacadas (la actual o todas en un ZIP), en los posts y reels (la foto o el vídeo que estás viendo, o el carrusel entero), al pasar el ratón por el feed y sobre la foto de perfil.
Lo mismo que con las fuentes: descarga lo tuyo o aquello para lo que tengas permiso. Que algo se pueda descargar no lo convierte en tuyo.
Todo pasa en tu navegador
DevExtractor no tiene servidor. Lee la página que tienes abierta, la procesa ahí mismo y las descargas se guardan en tu equipo (Chrome te pregunta dónde). No hay cuentas, ni analíticas, ni nada que se envíe a ningún sitio.
Arriba a la derecha puedes cambiar el idioma (español o inglés) y pasar a tema oscuro.
Pruébala
Instálala desde la Chrome Web Store, abre una web tuya y pulsa Extraer Multimedia. La primera vez que te bajes todos los SVG de una página en un ZIP vas a entender por qué la hice.