Cómo optimizar iconos SVG para sitios web y sistemas de diseño
Prepare iconos y logotipos SVG para sitios web rápidos y sistemas de diseño fáciles de mantener controlando viewBox, la complejidad de las rutas, la accesibilidad, el estilo y la entrega.
Respuesta rápida
Mantenga un viewBox válido, elimine los metadatos del editor, reduzca la precisión de la ruta innecesaria, use dimensiones de iconos consistentes y decida si los colores deben fijarse o controlarse mediante CSS. Asigne a los SVG informativos un nombre accesible y oculte los íconos decorativos de la tecnología de asistencia. Pruebe el archivo optimizado en el tamaño más pequeño admitido.
Elija primero el modelo de entrega
La mejor estructura SVG depende de cómo se utilizará.
| Modelo de entrega | Lo mejor para | Principal compensación |
|---|---|---|
Externo <img> | Logotipos e ilustraciones independientes | No se pueden diseñar rutas internas con CSS de página |
| SVG en línea | Iconos de interfaz temáticos y diagramas interactivos | Agrega marcado al HTML |
| Icono de componente | Sistemas de diseño de productos | Necesita convenciones API y de compilación controlada |
| Objeto SVG | Grandes conjuntos de iconos reutilizables | Más complejidad de configuración y referencia de símbolos |
| Fondo CSS | Imágenes decorativas | Mal ajuste para contenido significativo |
No incluya un SVG simplemente porque sea posible. Las imágenes externas repetidas se pueden almacenar en caché; Los íconos interactivos o temáticos se benefician más del marcado en línea.
Preservar el viewBox
El viewBox define el sistema de coordenadas interno y permite el escalado responsivo. Quitarlo a menudo crea un comportamiento frágil en ancho y alto. Estandarice los cuadros de visualización de íconos al crear una biblioteca de componentes, pero no estire las ilustraciones a una nueva proporción.
Compruebe que la geometría visible utilice el lienzo de manera eficiente. El exceso de espacio vacío hace que los iconos, que de otro modo serían idénticos, parezcan desalineados o de tamaño insuficiente.
Reducir la complejidad de forma segura
Las exportaciones de vectores pueden contener espacios de nombres de editor, comentarios, capas ocultas, grupos redundantes, precisión decimal excesiva y estilos duplicados. optimizador SVG elimina la sobrecarga segura, pero cada resultado optimizado aún debe recibir una verificación de regresión visual.
Compare estas métricas antes y después:
- Tamaño del archivo en bytes
- Número de caminos y grupos.
- Longitud total de los datos de ruta
- Renderizado a 16, 24, 32 y 64 píxeles
- Aparición en temas claros y oscuros.
No persiga el archivo más pequeño posible si la simplificación cambia una curva de marca o cierra una pequeña brecha.
Definir un contrato de color
Los iconos de productos suelen utilizar currentColor para que el componente circundante controle su color. Las marcas multicolores suelen necesitar rellenos explícitos. Documente la regla y manténgala consistente.
Utilice sustituto de color SVG para realizar cambios de relleno controlados y luego inspeccione las marcas para asegurarse de que no se hayan dejado trazos y degradados involuntariamente.
Hacer que la accesibilidad sea intencional
Para ver un ícono decorativo junto al texto visible, ocultelo de la tecnología de asistencia. Para obtener un gráfico informativo independiente, proporcione un nombre accesible a través del HTML circundante o el título SVG apropiado y las relaciones de etiquetado.
Evite colocar texto importante sólo dentro de rutas vectoriales delineadas. Los usuarios no pueden seleccionar ni traducir letras delineadas como texto normal y los motores de búsqueda reciben menos información semántica que la que recibirían de HTML.
Seguridad para SVG cargados
SVG es contenido XML activo. Los archivos proporcionados por el usuario pueden contener scripts, referencias externas o elementos inesperados. Desinfecte el SVG que no sea de confianza antes de renderizarlo en línea, o sírvalo a través de una ruta de rasterización/descarga controlada.
Ejecute Comprobador de diseño SVG como verificación previa estructural y luego aplique un desinfectante dedicado en la aplicación que acepta cargas públicas.
Lista de verificación del sistema de diseño
- Utilice un viewBox documentado y una cuadrícula de alineación óptica.
- Mantenga la coherencia en los nombres y los accesorios de los componentes.
- Defina el comportamiento de color fijo frente a color tematizable.
- Pruebe el comportamiento del teclado, el lector de pantalla y el alto contraste cuando sea relevante.
- Mida el impacto real del paquete y de la página en lugar de asumir que cada SVG es liviano.
Un sistema de iconos optimizado es una interfaz de producto, no solo una carpeta de archivos exportados.