[{"data":1,"prerenderedAt":538},["ShallowReactive",2],{"\u002Farticulos\u002Fdevextractor-svg-imagenes-y-fuentes-en-un-clic\u002F":3,"upcoming:\u002Farticulos\u002Fdevextractor-svg-imagenes-y-fuentes-en-un-clic\u002F":537},{"id":4,"title":5,"body":6,"date":521,"description":522,"draft":523,"extension":524,"meta":525,"navigation":526,"path":527,"seo":528,"stem":529,"tags":530,"type":535,"__hash__":536},"posts\u002Farticulos\u002Fdevextractor-svg-imagenes-y-fuentes-en-un-clic.md","DevExtractor: descarga SVG inline, imágenes y fuentes de cualquier web, y cambia imágenes en vivo",{"type":7,"value":8,"toc":508},"minimark",[9,22,25,32,48,57,60,65,72,76,79,98,113,117,120,165,172,181,184,187,230,234,237,245,266,275,281,295,310,313,327,330,333,351,354,371,378,385,393,403,424,427,443,450,453,457,460,478,481,485,488,494,498],[10,11,12,13,17,18,21],"p",{},"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 ",[14,15,16],"code",{},"\u003Csvg>"," 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 ",[14,19,20],{},".svg",". Uno. Y luego el siguiente. Y el siguiente.",[10,23,24],{},"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?\".",[10,26,27,31],{},[28,29,30],"strong",{},"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.",[10,33,34,35,42,43,47],{},"Está en la ",[36,37,41],"a",{"href":38,"rel":39},"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fdevextractor\u002Flkgndoalgpfelahmogbddekpbhcdinjb",[40],"nofollow","Chrome Web Store",". Cómo está hecha por dentro lo cuento en ",[36,44,46],{"href":45},"\u002Farticulos\u002Fdevextractor-por-dentro","DevExtractor por dentro","; este artículo es para usarla.",[10,49,50],{},[51,52],"img",{"alt":53,"height":54,"src":55,"width":56},"El panel de DevExtractor con solo los SVG inline de una web, los cinco seleccionados y la descarga en ZIP completada",1120,"\u002Fimages\u002Fposts\u002Fdevextractor\u002Fportada.webp",1105,[10,58,59],{},"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.",[61,62,64],"h2",{"id":63},"qué-es-en-una-frase","Qué es, en una frase",[10,66,67,68,71],{},"Abres DevExtractor en una página, pulsas ",[28,69,70],{},"Extraer"," y tienes en una lista todo lo que hay en ella para descargarlo, copiarlo o cambiarlo, sin que nada salga de tu navegador.",[61,73,75],{"id":74},"dónde-se-abre","Dónde se abre",[10,77,78],{},"Hay dos formas, con la misma interfaz:",[80,81,82,89],"ul",{},[83,84,85,88],"li",{},[28,86,87],{},"El popup",": el icono de la extensión en la barra de Chrome. Es lo más rápido.",[83,90,91,94,95,97],{},[28,92,93],{},"El panel de DevTools",": abre las herramientas de desarrollador (F12) y busca la pestaña ",[28,96,30],{},". 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.",[10,99,100,101,104,105,108,109,112],{},"Arriba hay tres pestañas: ",[28,102,103],{},"Multimedia",", ",[28,106,107],{},"Enlaces"," y ",[28,110,111],{},"Fuentes",".",[61,114,116],{"id":115},"svg-inline-y-el-resto-de-medios","SVG inline y el resto de medios",[10,118,119],{},"Es para lo que la hice, y lo que más tiempo me ahorra.",[121,122,123,133,152,158],"ol",{},[83,124,125,126,128,129,132],{},"En ",[28,127,103],{},", pulsa ",[28,130,131],{},"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.",[83,134,135,136,139,140,143,144,147,148,151],{},"Filtra si hace falta. Puedes quedarte con un ",[28,137,138],{},"tipo"," (Imágenes, Videos, Audio, SVGs, Fondos), buscar por ",[28,141,142],{},"dominio"," (por ejemplo, solo lo que viene de tu CDN), buscar por texto en la ",[28,145,146],{},"URL"," o limitar por ",[28,149,150],{},"tamaño"," en KB. Los filtros se recuerdan para la próxima vez.",[83,153,154,155,112],{},"Marca las tarjetas que quieras o pulsa ",[28,156,157],{},"Seleccionar Todo",[83,159,160,161,164],{},"Pulsa ",[28,162,163],{},"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.",[10,166,167],{},[51,168],{"alt":169,"height":170,"src":171,"width":56},"La galería de medios de la web de demostración: cuatro imágenes, cinco SVG inline y un fondo de CSS",1260,"\u002Fimages\u002Fposts\u002Fdevextractor\u002Fgaleria.webp",[10,173,174,175,177,178,180],{},"Con los SVG inline está la gracia. Cada ",[14,176,16],{}," del HTML aparece como una tarjeta más, con su vista previa, y se descarga como un archivo ",[14,179,20],{}," 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.",[10,182,183],{},"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.",[10,185,186],{},"Al pasar el ratón por una tarjeta salen más acciones:",[80,188,189,195,205,224],{},[83,190,191,194],{},[28,192,193],{},"Ubicar en página",": hace scroll hasta el elemento en la web, útil cuando no sabes de dónde sale una imagen.",[83,196,197,104,199,108,202,112],{},[28,198,163],{},[28,200,201],{},"Abrir en nueva pestaña",[28,203,204],{},"Copiar URL",[83,206,207,210,211,104,214,104,217,104,220,223],{},[28,208,209],{},"Copiar fragmento CSS",": copia al portapapeles las propiedades de maquetación del elemento (tamaño, ",[14,212,213],{},"position",[14,215,216],{},"object-fit",[14,218,219],{},"border-radius",[14,221,222],{},"clip-path",", márgenes, fondo…).",[83,225,226,229],{},[28,227,228],{},"Extraer paleta de colores",": saca los colores dominantes de la imagen y copia el que pulses.",[61,231,233],{"id":232},"cambiar-imágenes-en-vivo","Cambiar imágenes en vivo",[10,235,236],{},"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.",[10,238,239],{},[51,240],{"alt":241,"height":242,"src":243,"width":244},"La web de demostración antes del cambio, con el logo naranja y la imagen de portada original",600,"\u002Fimages\u002Fposts\u002Fdevextractor\u002Freemplazo-antes.webp",1440,[121,246,247,250,253,259],{},[83,248,249],{},"Extrae los medios como antes.",[83,251,252],{},"Busca la tarjeta de la imagen que quieres cambiar: el logo, la foto de portada, un fondo.",[83,254,255,258],{},[28,256,257],{},"Arrastra tu imagen desde el escritorio y suéltala sobre esa tarjeta"," (en la vista de cuadrícula).",[83,260,261,262,265],{},"La página cambia al instante. Si no convence, sueltas otra. Y para volver a la original, el botón de ",[28,263,264],{},"Restaurar"," de la tarjeta.",[10,267,268,269,272,273,112],{},"Si solo quieres ver cómo queda la página sin esa imagen, el botón ",[28,270,271],{},"Sustituir"," de la tarjeta la cambia por un rectángulo gris, y el mismo botón pasa a ser ",[28,274,264],{},[10,276,277],{},[51,278],{"alt":279,"height":242,"src":280,"width":244},"La misma web con el logo cambiado por uno verde y otra imagen en la portada","\u002Fimages\u002Fposts\u002Fdevextractor\u002Freemplazo-despues.webp",[10,282,283,284,287,288,108,291,294],{},"Funciona con imágenes normales, con las de ",[14,285,286],{},"\u003Cpicture>",", con los SVG inline, con las imágenes de fondo de CSS (también las de ",[14,289,290],{},"::before",[14,292,293],{},"::after",") y con el póster de los vídeos. En la captura, el logo era un SVG inline y ahora es un PNG.",[10,296,297,298,301,302,305,306,309],{},"Si quieres cambiar varias a la vez, selecciónalas y usa la barra de ",[28,299,300],{},"Aplicar"," que aparece arriba. Con ",[28,303,304],{},"Marcador"," se sustituyen por el rectángulo gris. Con ",[28,307,308],{},"Imagen personalizada"," eliges un archivo y se cambian todas por él.",[10,311,312],{},"Hay que tener en cuenta dos cosas:",[80,314,315,321],{},[83,316,317,320],{},[28,318,319],{},"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.",[83,322,323,326],{},[28,324,325],{},"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.",[10,328,329],{},"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.",[10,331,332],{},"En las mismas tarjetas tienes otras dos herramientas que sirven para lo mismo:",[80,334,335,345],{},[83,336,337,340,341,344],{},[28,338,339],{},"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 ",[28,342,343],{},"Ocultar Seleccionados"," de una vez, y el icono del ojo tachado de los filtros oculta todo lo filtrado.",[83,346,347,350],{},[28,348,349],{},"Editar filtros",": desenfoque, escala de grises y brillo aplicados al elemento en la propia página.",[61,352,111],{"id":353},"fuentes",[10,355,356,357,104,359,362,363,366,367,370],{},"En la pestaña ",[28,358,111],{},[28,360,361],{},"Extraer Fuentes"," te dice qué tipografías usa la página. De cada una ves si es una ",[28,364,365],{},"fuente web"," (cargada por la página) o una ",[28,368,369],{},"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.",[10,372,373],{},[51,374],{"alt":375,"height":376,"src":377,"width":56},"La pestaña de fuentes con Hubot Sans, fuente web usada en 12 elementos, y Georgia, fuente del sistema",775,"\u002Fimages\u002Fposts\u002Fdevextractor\u002Ffuentes.webp",[10,379,380,381,384],{},"El botón del ojo, ",[28,382,383],{},"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.",[10,386,387],{},[51,388],{"alt":389,"height":390,"src":391,"width":392},"La web de demostración con los textos en Hubot Sans recuadrados en verde",820,"\u002Fimages\u002Fposts\u002Fdevextractor\u002Ffuentes-destacado.webp",1425,[10,394,395,396,399,400,112],{},"Además puedes ",[28,397,398],{},"copiar el nombre"," de la fuente y exportar la lista en ",[14,401,402],{},".json",[10,404,405,406,409,410,104,413,104,416,419,420,423],{},"En las fuentes web aparece también ",[28,407,408],{},"Descargar archivos de fuente",", con los archivos (",[14,411,412],{},".woff2",[14,414,415],{},".woff",[14,417,418],{},".ttf","…) que carga la página. Aquí hay que tener cuidado: ",[28,421,422],{},"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.",[61,425,107],{"id":426},"enlaces",[10,428,429,430,432,433,436,437,440,441,112],{},"La pestaña ",[28,431,107],{}," 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, ",[28,434,435],{},"copiar"," los filtrados o exportarlos a ",[14,438,439],{},".txt"," o ",[14,442,402],{},[10,444,445],{},[51,446],{"alt":447,"height":448,"src":449,"width":56},"La pestaña de enlaces con los nueve enlaces de la web de demostración y los botones para copiarlos y exportarlos",1110,"\u002Fimages\u002Fposts\u002Fdevextractor\u002Fenlaces.webp",[10,451,452],{},"Lo uso para revisar los enlaces de una web antes de entregarla, o para sacar una lista de URLs sin copiarlas una a una.",[61,454,456],{"id":455},"instagram","Instagram",[10,458,459],{},"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í.",[10,461,462,463,466,467,470,471,474,475,112],{},"En Instagram aparecen botones encima del propio contenido: en las ",[28,464,465],{},"historias"," y destacadas (la actual o todas en un ZIP), en los ",[28,468,469],{},"posts y reels"," (la foto o el vídeo que estás viendo, o el carrusel entero), al pasar el ratón por el ",[28,472,473],{},"feed"," y sobre la ",[28,476,477],{},"foto de perfil",[10,479,480],{},"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.",[61,482,484],{"id":483},"todo-pasa-en-tu-navegador","Todo pasa en tu navegador",[10,486,487],{},"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.",[10,489,490,491,112],{},"Arriba a la derecha puedes cambiar el idioma (español o inglés) y pasar a ",[28,492,493],{},"tema oscuro",[61,495,497],{"id":496},"pruébala","Pruébala",[10,499,500,501,504,505,507],{},"Instálala desde la ",[36,502,41],{"href":38,"rel":503},[40],", abre una web tuya y pulsa ",[28,506,131],{},". La primera vez que te bajes todos los SVG de una página en un ZIP vas a entender por qué la hice.",{"title":509,"searchDepth":510,"depth":510,"links":511},"",2,[512,513,514,515,516,517,518,519,520],{"id":63,"depth":510,"text":64},{"id":74,"depth":510,"text":75},{"id":115,"depth":510,"text":116},{"id":232,"depth":510,"text":233},{"id":353,"depth":510,"text":111},{"id":426,"depth":510,"text":107},{"id":455,"depth":510,"text":456},{"id":483,"depth":510,"text":484},{"id":496,"depth":510,"text":497},"2026-10-25","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.",false,"md",{},true,"\u002Farticulos\u002Fdevextractor-svg-imagenes-y-fuentes-en-un-clic",{"title":5,"description":522},"articulos\u002Fdevextractor-svg-imagenes-y-fuentes-en-un-clic",[531,532,533,534],"devextractor","productividad","privacidad","proyectos","guia","KUR2Yb60sA3sn4z69oISFNPPVOudnHl9wpufWB-zTrI",null,1793761188395]