Por qué un extractor de SVG en línea no puede ver esta página

Pegaste la URL, encontró cuatro iconos y tú ves treinta. No hay nada roto: simplemente nunca ejecutó la página.

Míralo — 17 segundos

Lo que te da ejecutar la página

tutorial · comparativa

Ejecutarse dentro de la página es toda la diferencia. Todo lo demás se deriva de ahí.

La distinción no es de calidad ni de esfuerzo: es arquitectónica. Un enfoque lee un documento; el otro lee una página dibujada.

Qué muestra la grabación

Una herramienta en línea solo recibe la URL que pegas
Nunca ejecuta la página, así que los iconos en línea siguen invisibles
Una extensión se ejecuta dentro de la página en la que ya estás
Incluidas páginas con sesión iniciada y paneles privados
Y nada sale de tu equipo para que funcione

El motivo técnico

Descargar una URL y dibujar una página son cosas distintas

Cuando pegas una URL en un extractor en línea, su servidor envía una petición HTTP normal y recibe el HTML que el servidor decidió mandar. Luego busca en ese texto cosas que parezcan SVG. Es un enfoque razonable, y se pierde la mayor parte de un sitio moderno, por cuatro motivos distintos.

No se ejecuta JavaScript. En un sitio React, Vue, Svelte o Angular, el HTML inicial suele estar casi vacío: un elemento raíz y una etiqueta de script. Todos los iconos aparecen solo después de que el framework se ejecute. Una descarga ve el cascarón vacío.
No se aplica CSS. Un vector puesto como background-image en una hoja de estilos solo existe cuando los estilos se calculan contra los elementos. Buscar texto en el HTML no lo encontrará.
No hay sesión. El servidor que descarga tu URL no ha iniciado sesión como tú. Cualquier cosa tras autenticación devuelve una página de acceso, así que un panel, un área de administración o una herramienta de pago son sencillamente inalcanzables.
Los sprites no se resuelven. Un <use href="#star"> encontrado en HTML crudo es un puntero. Sin un documento dibujado no hay contra qué resolverlo, así que obtienes un archivo vacío.

Una extensión no tiene ninguno de estos problemas porque no está descargando nada. Se ejecuta dentro de la página que ya estás mirando, después de que el framework haya dibujado, después de que se hayan aplicado los estilos, con tu sesión intacta y el documento completo disponible para resolver referencias.

Hacerlo en la página en su lugar

No hay URL que pegar, y esa es la gracia.

Deja la página en el estado que quieres. Inicia sesión si hace falta. Haz scroll, abre el menú, cambia a la pestaña con los iconos. Todo lo que tú puedas ver, el escaneo puede leerlo.
Pulsa el botón de la barra de herramientas. El escaneo corre contra el DOM en vivo, incluidos los iconos dibujados por el framework, los fondos CSS y las referencias de sprite.
Compara el recuento. Este es el momento en que se nota la diferencia. El número que sale aquí suele ser varias veces el que informó una descarga por URL.
Llévatelos. Uno a uno con Descargar el actual, o el conjunto entero con Descargar todo en ZIP. Nada sale de tu equipo en ningún momento.

La otra pregunta: ¿adónde va tu archivo?

Una herramienta en línea tiene que recibir tus datos para trabajar con ellos. Según el servicio, eso puede significar la URL de una página en la que habías iniciado sesión, o un archivo subido, viviendo en el servidor de otro: sujeto a su política de retención, sus registros, su jurisdicción y su seguridad. Para una página pública de marketing puede ser un cambio aceptable. Para un panel interno, el entorno de pruebas de un cliente o un diseño sin publicar, es una transferencia de datos que probablemente no pretendías hacer.

La versión en dispositivo no implica ese cambio en absoluto, y no como compromiso de política: la política de seguridad de contenido de la extensión establece connect-src 'none', así que sus páginas no pueden abrir una conexión de red. No hay ningún destino al que enviar. También significa que todo funciona sin conexión.

Dónde una herramienta en línea es de verdad la mejor opción

Siendo justos: si la URL apunta directamente a un archivo .svg y lo único que quieres es convertirlo u optimizarlo, una herramienta en línea es rápida y no exige instalar nada. Si estás en un equipo bloqueado donde no puedes instalar una extensión, puede ser tu única opción. Y para optimizar SVG en concreto —pasarles SVGO, quitar metadatos, encoger trazados—, los buenos optimizadores en línea hacen un trabajo que esta extensión ni siquiera intenta.

Los límites honestos de este lado

Una extensión hay que instalarla, necesita un navegador Chromium y no puede hacer nada en una página que tú mismo no puedas abrir: páginas chrome://, la Web Store, galerías de extensiones. También es estrictamente interactiva: no hay API ni forma de pasarla por una lista de mil URL. Para eso, la herramienta correcta es un navegador headless.

Una descarga por URL se pierde: Los iconos dibujados por JavaScript, los fondos CSS, las páginas con sesión y los destinos de sprite.
Una extensión ve: El DOM dibujado: después del framework, después de los estilos, con tu sesión.
Privacidad: connect-src 'none'. Ningún destino al que subir; funciona sin conexión.
Las herramientas en línea ganan en: Optimizar un .svg que ya tienes, y equipos donde no puedes instalar nada.

Conviene saber

Preguntas frecuentes

¿Por qué el extractor en línea solo encontró unos pocos iconos?

Descargó el HTML pero nunca dibujó la página. En un sitio dibujado por JavaScript, la mayoría de los iconos no existen en el HTML inicial, los vectores de fondo CSS requieren estilos calculados, y las referencias de sprite no se pueden resolver sin un documento vivo.

¿Puede una herramienta en línea extraer de una página en la que tengo que iniciar sesión?

No. Su servidor no ha iniciado sesión como tú, así que recibe una página de acceso. Una extensión se ejecuta en tu navegador con tu sesión, así que funciona con normalidad.

¿Es seguro pegar una URL en un extractor en línea?

Para una página pública de marketing, en general sí. Para un panel interno, un entorno de pruebas o un diseño sin publicar, estás entregando a un tercero una URL y su contenido: merece la pena pensarlo antes de hacerlo.

¿La extensión sube algo?

No puede. Su política de seguridad de contenido pone connect-src en none, así que a sus páginas se les prohíbe abrir una conexión de red. Funciona con la red desconectada.

¿Cuándo es realmente mejor una herramienta en línea?

Cuando la URL apunta directamente a un archivo .svg y quieres optimizarlo o convertirlo, o cuando estás en un equipo donde no puedes instalar extensiones. Los optimizadores de SVG en línea, en particular, hacen un trabajo que esta extensión no intenta.

Lee la página, no una copia de su HTML

Iconos dibujados por el framework, páginas con sesión y nada subido.

Instalar la extensión Los 15 tutoriales →