Cómo encontrar sprites SVG e íconos web en un sitio web
Una guía práctica de los sistemas de iconos que los extractores de imágenes habituales suelen representar de forma diferente a las fotografías normales.
Un ícono web puede verse como una imagen normal sin tener un PNG o JPG independiente detrás. Puede ser un SVG en línea, un símbolo dentro de un objeto compartido, una máscara CSS o un glifo de una fuente de icono. Guardar una captura de pantalla proporciona píxeles, pero desperdicia la calidad y la estructura que hicieron que el ícono fuera nítido.
Identifique el sistema de iconos antes de guardar cualquier cosa. Una vez que sepa cómo la página dibuja el símbolo, puede realizar una copia de seguridad o migrar los activos que posee sin convertir los vectores en mapas de bits borrosos.
SVG en línea
Un SVG en línea se escribe directamente en el HTML:
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="..." />
</svg>
No hay ninguna URL de imagen porque las instrucciones vectoriales son parte del documento. Inspeccione el elemento en Herramientas de desarrollo y copie el marcado <svg> completo para un activo autorizado.
Mantenga el viewBox, las rutas, los grupos, los degradados, las máscaras y los atributos de accesibilidad. Copiar solo un <path> puede perder estilo o geometría.
Para obtener un icono significativo orientado al usuario, asegúrese de que la implementación final tenga un nombre accesible. Los íconos decorativos generalmente deben ocultarse de la tecnología de asistencia.
Archivos SVG externos
Algunas páginas utilizan un elemento de imagen normal:
<img src="/icons/download.svg" alt="Download">
Esto es sencillo. Abra la URL, inspeccione el archivo y guárdelo si tiene permiso. Un SVG está basado en texto, pero trátelo como contenido activo cuando proviene de una fuente que no es de confianza. Puede contener enlaces, estilos y otras características que merecen revisión antes de reutilizarse.
La guía de formato de archivos de imagen explica por qué SVG escala de manera diferente a las imágenes rasterizadas.
Sprites de símbolos SVG
Un sprite recopila muchos símbolos en un SVG:
<svg style="display:none">
<symbol id="icon-download" viewBox="0 0 24 24">
<path d="..." />
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="..." />
</symbol>
</svg>
El icono visible hace referencia a un símbolo:
<svg aria-hidden="true">
<use href="#icon-download"></use>
</svg>
El elemento <use> no contiene el dibujo en sí. Siga su href hasta el símbolo correspondiente. Si la referencia comienza con un nombre de archivo, como /icons/sprite.svg#download, abre ese sprite externo.
Para una migración completa del sitio, conserve el objeto y sus ID juntos. Cambiar el nombre de una identificación sin actualizar cada referencia <use> rompe los íconos silenciosamente.
Cómo inspeccionar una referencia de uso
Seleccione el SVG visible y busque <use>. Copie el valor href o anterior xlink:href. Busque en el documento o sprite cargado el ID al que se hace referencia.
Si el icono aparece en blanco después de copiar, verifique:
- Falta
viewBox - Estilos heredados de la página original.
fill="currentColor"sin color- Sprite externo bloqueado por cambios de origen o ruta
- ID renombrados durante la optimización
- Una máscara o ruta de clip definida en otro lugar
No aplanes todo en caminos hasta que comprendas la dependencia. Los símbolos compartidos son útiles precisamente porque evitan el marcado repetido.
Iconos de fondo CSS
Se puede pintar un icono como fondo CSS:
.download-button::before {
content: "";
background: url("/icons/download.svg") center / contain no-repeat;
}
Inspeccione el pseudoelemento y su imagen de fondo calculada. La guía de extracción de fondo CSS cubre URL relativas, múltiples capas y elementos generados.
Máscaras CSS
Las máscaras usan la forma de una imagen, mientras que CSS proporciona el color visible:
.icon {
background-color: currentColor;
mask: url("/icons/download.svg") center / contain no-repeat;
}
Guardar el archivo de máscara puede verse como una forma negra o un documento transparente. Eso es normal. La página aplica el color por separado.
Conserve tanto el activo como las reglas CSS durante una migración. Una captura de pantalla no puede reproducir claramente los colores al pasar el mouse ni los cambios de tema.
Fuentes de iconos
Las fuentes de iconos asignan caracteres o ligaduras a glifos. El HTML puede contener:
<span class="material-symbols-outlined">download</span>
La forma visible proviene de una fuente y su CSS, no de la URL de una imagen. Las herramientas de desarrollo pueden mostrar la fuente renderizada y las reglas de clase.
Para migrar una fuente de icono de su propiedad o para la que tiene licencia de uso, conserve:
- Font files
- Declaraciones
@font-face - Mapeo de caracteres o ligaduras
- Ajustes de peso y variación.
- Requisitos de licencia y atribución
El propio ExtractPics utiliza un subconjunto autohospedado de símbolos materiales. Agregar una nueva ligadura sin reconstruir ese subconjunto mostraría texto sin formato en lugar de un ícono. Este es un recordatorio útil: el nombre HTML y el glifo de fuente deben viajar juntos.
Iconos dibujados en lienzo
Un lienzo puede dibujar caminos o copiar íconos de un objeto en tiempo de ejecución. El DOM contiene solo <canvas>. Inspeccione los scripts y las solicitudes de red en una aplicación que controle. La fuente puede ser un atlas de imágenes, datos vectoriales o instrucciones generadas.
Si la aplicación proporciona una exportación, úsela. Se acepta una captura de pantalla cuando el estado del lienzo renderizado es el artefacto deseado, pero no es una fuente vectorial reutilizable.
Encuentre recursos de íconos en el panel Red
Filtre solicitudes por SVG, fuente o imagen. Vuelva a cargar la página e interactúe con los menús para que se carguen los activos diferidos. Busque nombres de archivos para sprite, icon, symbol o extensiones de fuente conocidas como WOFF2.
La columna Iniciador puede apuntar a la hoja de estilo o al script. Esto es especialmente útil cuando se generan nombres de clases y el DOM proporciona poco contexto.
Utilice la extracción renderizada para un inventario amplio
El extractor de imágenes ExtractPics puede recopilar archivos SVG vinculados y recursos de imágenes de una página renderizada pública. El marcado SVG en línea, las fuentes de los iconos y las instrucciones del lienzo necesitan una inspección adicional porque no son imágenes descargables normales.
Esa limitación no es un error. Un inventario de imágenes y un inventario de sistemas de diseño se superponen, pero no son idénticos.
Preservar el significado de accesibilidad
La forma de un icono es sólo una parte del activo. Durante la migración, registre si es:
- Decorativo
- Acompañado de texto visible
- Un control interactivo
- Un indicador de estado
- Una marca o marca comercial
Un botón de solo ícono necesita un nombre accesible, a menudo a través de texto visible, aria-label o un patrón equivalente. Copiar el SVG sin la semántica del botón puede hacer que la nueva interfaz sea inaccesible.
No confundas iconos genéricos con logos
Una flecha de descarga puede provenir de una biblioteca de íconos abierta. Es probable que la marca de una empresa esté protegida por derechos de autor y marcas comerciales. El método de extracción puede ser el mismo mientras que la reutilización permitida es muy diferente.
Utilice la guía de logotipos, favicons e imágenes sociales para recursos de identidad y verifique la licencia antes de publicar marcas de terceros.
Una lista de verificación de migración
Por cada familia de iconos que tengas:
- Identifique si es SVG en línea, SVG externo, sprite, máscara, fuente, fondo o lienzo.
- Registre archivos fuente y licencia.
- Preservar las identificaciones y referencias de los símbolos.
- Capture el CSS requerido, incluido el comportamiento
currentColor. - Documente nombres accesibles y estados decorativos.
- Pruebe en tamaños pequeños y grandes.
- Pruebe los estados de desplazamiento, enfoque, deshabilitado y de tema oscuro.
- Compruebe que no aparezca ningún texto de ligadura sin formato cuando las fuentes fallan.
Evite exportar cada vector como PNG "por simplicidad". Se pierde escala, color del tema y, a menudo, comportamiento de accesibilidad.
Comprobaciones de seguridad para SVG copiado
SVG puede contener más que formas. Antes de agregar un SVG de terceros a su sitio, inspeccione scripts, controladores de eventos, referencias externas, objetos extraños y datos incrustados. Utilice un desinfectante confiable y apropiado para su proceso de construcción.
No pegue etiquetas SVG desconocidas directamente en un CMS que las trate como HTML seguro. Para los activos que usted controla, minimícelos y valídelos como parte de la construcción.
Permiso y licencia
Las bibliotecas de iconos de código abierto tienen licencias y, a veces, requisitos de atribución. Los paquetes comprados pueden restringir la redistribución. Los íconos de marca pueden tener reglas de marca registrada incluso cuando un SVG descargable está disponible públicamente.
Mantenga la licencia al lado del inventario de activos. Si no estás seguro de la fuente, utiliza la lista de control de licencias y fuentes de imágenes.
Mantenga intacto el sistema vectorial
No empieces buscando un PNG. Primero pregunte cómo el navegador dibujó el ícono. La respuesta puede ser un SVG en línea, un símbolo en un objeto, una máscara CSS, un glifo de fuente o un comando de lienzo.
Una vez que conozca el sistema, conserve las piezas que lo hacen funcionar: fuente vectorial, ID, CSS relevante, nombre accesible y licencia. Una captura de pantalla es útil en un informe de auditoría, pero es un mal sustituto de un icono que se supone debe escalar, heredar el color y permanecer nítido.