Los íconos constituyen una parte esencial de cualquier interfaz gráfica de usuario, y los sitios web no son la excepción. Todos los días navegamos por páginas que usan íconos para representar ideas o complementar gráficamente lo que expresa el texto. Una característica habitual de los íconos es que se muestran en tamaño pequeño y (a diferencia de, por ejemplo, la fotografía de un paisaje) siguen formas geométricas con contornos bien definidos. Por eso hoy, en una época con incontables resoluciones y densidades de píxeles, ya no es conveniente implementar íconos con PNG: en ese formato, los íconos pierden calidad cuando los agrandamos o achicamos, pudiendo quedar prácticamente irreconocibles. Para generar íconos responsivos necesitamos formatos escalables, y es allí donde se enfrentan SVG y los icon fonts.

SVG, por Scalable Vector Graphics, es un formato de imágenes vectoriales basado en XML, con soporte para interactividad y animación. Icon fonts es una técnica que, a través de la regla @font-face y una tipografía especial, representa caracteres de texto como íconos en la pantalla. Conozcamos las características de cada uno.

Íconos con SVG (Scalable Vector Graphics)

Ventajas

• Como son gráficos vectoriales, cambian de tamaño sin perder definición en los contornos.
• Como están implementados en XML, podemos manipular sus partes por separado. Así, es posible crear íconos multicolores. También tenemos mayores posibilidades de animación.
• Es más correcto en términos de semántica: mientras los icon fonts nos obligan a usar elementos vacíos o pseudoelementos de CSS, los íconos SVG se pueden representar con etiquetas como <img> o <svg>, que fueron hechas especialmente para mostrar imágenes.

Desventajas

• Para suplir los íconos SVG en browsers que no soportan el formato hay que usar fallbacks (reemplazos) con varios inconvenientes. Por ejemplo, la necesidad de generar un archivo alternativo en PNG.

Íconos con icon fonts

Ventajas

• Mayor compatibilidad: la regla @font-face es soportada, aunque con limitaciones, incluso en Internet Explorer 6.
• El color y el tamaño son más fáciles de manipular, ya que se manejan como cualquier texto a través de CSS.
• El tamaño de archivo es menor que en SVG, y las fuentes son almacenadas en caché. Esto garantiza un mejor rendimiento.
• Son más fáciles de integrar.

Desventajas

• Como son texto normal, el browser les aplica antialias, generando contornos borrosos.
• Como cada ícono es un carácter, no es posible crear íconos multicolores (aunque se puede crear varios íconos por separado y apilarlos para lograr el mismo efecto).
• Suele suceder que el browser no logra cargar el archivo de la fuente (a veces no lo hace por cuestiones de seguridad), o bien tiene problemas con el soporte de @font-face. Por eso, muchos desarrolladores de icon fonts advierten que se trata de una tecnología experimental.
• Pueden no mostrarse debido a aplicaciones para bloquear contenido que tenga instaladas el usuario.
• Son más difíciles de crear.
• Los browsers presentan diferencias en la forma de mostrar las fuentes; por ejemplo, aplican más o menos grosor a cada carácter. Esto también aplica a los icon fonts y puede causar problemas para distinguir la forma de cada ícono.
• Son más difíciles de posicionar visualmente con respecto a otros elementos.

Conclusión

SVG es una tecnología más poderosa que icon fonts, y, a medida que vayan desapareciendo los browsers que no lo soportan, es probable que se convierta en la opción por excelencia para mostrar íconos. Sin embargo, icon fonts es una buena elección cuando necesitamos una solución rápida y no tenemos grandes exigencias.

En términos de adaptabilidad a múltiples pantallas, ambas técnicas son superiores a los tradicionales CSS Sprites realizados con una imagen en PNG. Sin embargo, es posible emular esta técnica con SVG.