Elysia Tools
Navegación
Workflow Playbook
Limpia iconos aprobados, elige referencias internas o externas, verifica identificadores y colores en la página real y exporta alternativas raster individuales.
Temas
Este recorrido entrega una colección reutilizable de iconos a un equipo de interfaz. Guarda un SVG independiente aprobado por icono y su función y tamaño pequeño previsto. Usa svg-minifier-analyzer y compara el resultado tras optimizar. Revisa viewBox ausentes antes de combinar: inferir un rectángulo desde dimensiones puede recortar un dibujo desplazado. Incluye degradados, máscaras y recortes en el inventario. Para iconos de pestaña o manifiestos, sigue svg-favicon-icon-workflows.
Con svg-sprite-generator combina hasta 30 archivos. Anota los identificadores generados con el prefijo elegido y los duplicados retirados; la deduplicación compara viewBox y contenido con espacios normalizados. No presupongas que los nombres originales sobreviven. Los identificadores superiores únicos no evitan colisiones entre degradados o recortes internos. Conserva arte multicolor. Si eliminas color monocromo, comprueba huecos y define relleno o trazo en el consumidor: retirar fill=none puede rellenar zonas antes vacías.
En modo symbol inserta el archivo descargado una vez y referencia los identificadores reales. Para archivos externos, usa la ruta definitiva y comprueba qué fragmento o grupo emitido consume la aplicación. Los ejemplos necesitan validación con cada icono, fondos claros y oscuros y estados activos. Una vista aislada correcta no garantiza la referencia desplegada. La eliminación de scripts y atributos de eventos no equivale a una limpieza completa de cualquier SVG; utiliza originales revisados. Añade un nombre accesible a controles que solo muestran un icono y trata aparte los elementos decorativos.
Cuando necesites imágenes raster, pasa cada SVG independiente a svg-to-png o svg-to-webp; no conviertas una colección de símbolos ocultos como una lámina visible. Comprueba píxeles, alfa y lectura al tamaño objetivo. Entrega sprite, mapa de archivos e identificadores, alternativas y notas de prueba. Usa css-authoring-layout-and-cascade-workflows para conflictos de reglas y web-accessibility-audits para la revisión completa de página.
Guía de flujo de trabajo
Analiza cada SVG, compara antes y después y conserva geometría, colores y viewBox aprobados en una copia recuperable.
Combina archivos con modo y prefijo elegidos, revisa duplicados y avisos de viewBox, y comprueba referencias internas de degradados y recortes.
Adapta los ejemplos a la ruta y fragmentos emitidos; prueba cada icono, estado de interfaz y nombre accesible en la aplicación.
Convierte originales aceptados a PNG o WebP según el destino y comprueba dimensiones, canal alfa y legibilidad pequeña.
Usa symbol para insertar una colección una vez; valida el destino del fragmento y la URL desplegada antes de elegir referencias externas.
Conserva colores de ilustraciones multicolor; elimina color solo en figuras monocromas revisadas y comprueba relleno y trazo, porque retirar fill=none puede alterar huecos.
Exporta PNG o WebP desde el SVG individual aceptado cuando el destino no admita sprites; no conviertas la colección oculta como una imagen visible.