Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Icon Fonts vs SVGs: ¿cuál debe usar en 2020?

Los iconos gráficos son un componente crucial de casi todos los sitios web o aplicaciones. Aunque los íconos suelen ser pequeños por naturaleza, seleccionar un formato para sus íconos web no es una decisión trivial. Además de los formatos de imagen estándar, los desarrolladores web tienen dos opciones principales: SVG o fuentes de iconos. ¿Cual deberías usar? Veamos cómo se comparan los dos formatos en términos de rendimiento, flexibilidad y accesibilidad.

La evolución de los iconos web#

En el tiempo anterior a CSS, los iconos web tenían que ser imágenes. Debido a que los archivos de imagen son grandes, los desarrolladores web siempre han tratado de encontrar métodos alternativos para mostrar iconos pequeños. Por ejemplo, los sprites CSS permitieron a los desarrolladores mantener todos sus íconos en un solo archivo de imagen, pero los problemas de accesibilidad los han dejado caer en desgracia desde que las fuentes de íconos llegaron a la escena alrededor de 2012. Sin embargo, más recientemente, los desarrolladores están cambiando a usar gráficos vectoriales escalables, o SVG, para sus iconos web.

¿Qué son las fuentes de iconos?# #

Las fuentes de iconos son archivos de texto que se pueden modificar mediante CSS. En consecuencia, se escalan mucho mejor que las imágenes ráster, por lo que cambiar el tamaño de una fuente de icono no degrada su calidad visual. Cambiar el color o agregar una sombra es tan simple como editar texto. Puede encontrar fácilmente fuentes de iconos gratuitas para usar en su sitio web, o puede diseñar las suyas propias. Una desventaja del uso de fuentes de iconos es que la mayoría de los conjuntos de fuentes contienen iconos que probablemente no usará, por lo que solo ocuparán espacio .
Al igual que los sprites CSS antes que ellos, las fuentes de íconos comienzan a caer en desgracia con los desarrolladores. La visualización correcta de las fuentes de iconos a menudo requiere que el navegador haga solicitudes adicionales al servidor, lo que puede conducir a FOIT, o flash de texto invisible, en los iconos mientras las bibliotecas de fuentes aún se están cargando. Si el navegador no puede interpretar las fuentes, el usuario solo verá caracteres vacíos. Dado que tales escenarios son inaceptables para sitios web profesionales, más desarrolladores ahora están recurriendo a SVG.

¿Qué son los SVG?# #

Los SVG (gráficos vectoriales escalables) permiten que los gráficos vectoriales se muestren en el navegador. Los SVG se están convirtiendo rápidamente en el nuevo estándar para iconos web y animaciones. No solo ofrecen una escala superior, sino que a menudo se renderizan de manera más rápida y confiable que las fuentes de iconos. Como los gráficos vectoriales están compuestos completamente de código, no es necesario importarlos desde archivos externos grandes. También son mucho más pequeños que su JPG o PNG típico, así como la mayoría de las bibliotecas de fuentes de iconos.
Aprovechar al máximo sus SVG puede requerir superar un poco la curva de aprendizaje, pero las recompensas bien valen la pena.

Cómo funcionan los SVG#

Es posible usar SVG como dentro de un <img>elemento regular en su HTML utilizando los atributos de ancho y alto para ajustar las dimensiones. Sin embargo, este método limita de alguna manera su capacidad de personalizar sus SVG.
Si desea la posibilidad de personalizar aún más sus iconos SVG directamente desde el HTML, deberá alinear su SVG simplemente pegando el código directamente en su documento HTML. Luego, puede cambiar el color o aplicar filtros apuntándolo con CSS. Así es como se ve un ejemplo de icono SVG:
<svg version="1.1"
        baseProfile="full"
        width="300" height="200"
        xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="#3686be" />
    <circle cx="150" cy="100" r="80" fill="white" />
    <text x="150" y="115" font-size="35" text-anchor="middle" fill="#3a3a3a">KeyCDN</text>
</svg>
El código anterior, inspirado en Mozilla , muestra un gráfico como este en un navegador:
keycdn svg example
Aunque el código SVG puede parecer intimidante a primera vista, diseñar y controlar iconos SVG es engañosamente fácil. De hecho, puede usar un programa como Adobe Illustrator para crear sus propios gráficos vectoriales para usarlos como iconos. Simplemente guárdelos como archivos SVG, o puede generar el código dentro de la interfaz de Illustrator. También puede exportar dibujos de Google Docs como archivos SVG.

¿Siguen siendo útiles las fuentes de iconos?# #

Las fuentes de iconos están lejos de ser obsoletas. Si bien no siempre son la opción más eficiente ni la más confiable, las fuentes de iconos siguen siendo relativamente simples y fáciles de implementar, por lo tanto, muchos desarrolladores continúan usándolas. Dependiendo de la cantidad de íconos utilizados, puede que no valga la pena cambiar las fuentes de íconos para SVG en sus proyectos más antiguos; sin embargo, los SVG son el camino definitivo del futuro, por lo que es mejor que te sientas cómodo usándolos en el futuro.

Comparación de SVGs frente a fuentes de íconos#

Para ayudarlo a decidir qué formato de icono elegir, veamos cómo se comparan las dos opciones en varios departamentos.

1. Tamaño#

Si elige alinear sus SVG para agregar estilos, pueden aumentar rápidamente de tamaño y el código puede volverse bastante engorroso. También vale la pena señalar que el código SVG en línea no se almacena en caché por el navegador del usuario. Los archivos SVG externos, por otro lado, se pueden almacenar en caché. Si tiene muchos íconos en una sola página, las fuentes de íconos pueden proporcionar una experiencia de usuario más fluida que los SVG en línea. Por supuesto, si está utilizando un conjunto de fuentes de íconos prefabricados, probablemente desperdiciará recursos en íconos no utilizados.
Lo que vale la pena señalar aquí es que 10 iconos SVG optimizados probablemente serán mucho más pequeños que una biblioteca de iconos completa. Sin embargo, si crea su propia biblioteca de iconos personalizada con solo los iconos que necesita, la fuente de la biblioteca de iconos terminará siendo más pequeña.

2. Rendimiento#

Las fuentes de iconos se pueden almacenar en caché, por lo que se cargan más rápido directamente desde el navegador. Sin embargo, la desventaja de esto es que crean una solicitud HTTP adicional. Por otro lado, si está alineando iconos SVG, no se necesitan solicitudes HTTP adicionales, sin embargo, el navegador no puede almacenarlas en caché.
Sin embargo, puede incluir sus archivos SVG en un archivo externo para que el navegador los pueda almacenar en caché. Una vez más, en cuanto al rendimiento, la diferencia de velocidad dependerá de cuán grande sea la fuente de su ícono / SVG. Intente ejecutar pruebas de rendimiento con ambas para determinar cuál se carga más rápido.

3. Flexibilidad#

Ambos formatos se pueden diseñar utilizando CSS, pero los SVG en línea le ofrecen muchas más opciones, como trazos de glifos e iconos multicolores. Incluso puedes tener íconos web animados.

4. Soporte del navegador#

Independientemente del formato que elija para los iconos, es posible que deba realizar algunos pasos adicionales para que sean compatibles con los navegadores más antiguos. Como han existido por más tiempo, las fuentes de íconos son más compatibles. Cualquier persona que use IE 6 o superior, que probablemente incluye a todos, debería poder ver las fuentes de sus íconos. Si usa SVG, es posible que desee incluir un polyfill JS para admitir aquellos que usan IE 8 o inferior.
Sin embargo, en 2018, como la mayoría de los usuarios se han alejado de las versiones de navegadores heredados, esto no debería ser una gran preocupación, independientemente de si elige fuentes de iconos o SVG. La única falta de soporte en términos de íconos SVG y navegadores modernos proviene tanto de IE como de Edge, que no escalan correctamente los archivos SVG (se recomiendan los atributos de altura y ancho).
svg browser support

5. Escalabilidad#

Aunque tanto los SVG como las fuentes de iconos están basadas en vectores, los navegadores interpretan las fuentes de iconos como texto, lo que significa que están sujetas a suavizado. Por lo tanto, los SVG tienden a verse un poco más nítidos que las fuentes de iconos.

6. Posicionamiento#

Debido a que las fuentes de íconos deben insertarse a través de un pseudo elemento, el posicionamiento de los íconos de fuentes puede ser complicado. Puede que tenga que considerar el line-height,, vertical-alignletter-spacingentre otros factores para que el pseudo elemento y el glifo real coincidan perfectamente. Para SVG, solo tiene que establecer el tamaño.

7. Accesibilidad#

A diferencia de las fuentes de iconos, los SVG tienen elementos semánticamente sensibles incorporados, por lo que no tiene que incluir ninguna solución alternativa para que sus fuentes sean accesibles para los lectores de pantalla.

Herramientas y recursos de iconos SVG#

La red de desarrolladores de Mozilla tiene un tutorial SVG muy completo que explica cómo estilizar sus iconos con CSS en línea. Además de Adobe Illustrator, hay varias herramientas para ayudarlo a implementar iconos SVG. IcoMoon es un excelente recurso para SVG preconfigurados e iconos de fuentes, y la aplicación IcoMoon le permite crear los suyos propios. Si está buscando algo de código abierto, Inkscape es un programa de dibujo vectorial gratuito que exporta archivos SVG. Herramientas como Convertio le permiten convertir otros formatos de imagen a archivos SVG.
Es importante tener en cuenta que los programas como Illustrator e Inkscape a menudo incorporan información adicional en archivos SVG exportados que no necesita . Por lo tanto, debe ejecutar sus iconos SVG a través de una herramienta de optimización como SVGO o el SVG Minifier para recortarlos antes de agregarlos a su sitio web.
Además de los recursos mencionados anteriormente, también hay una variedad de sitios web de iconos que ofrecen vectores de alta calidad como servicio pago o gratuito. Consulte nuestra guía completa de recursos de la biblioteca de iconos , así como nuestra publicación sobre cómo mejorar la velocidad de sus glificones mediante el uso de un CDN de glifos .

Resumen#

Todavía hay cierto debate en la comunidad sobre si las fuentes de íconos son mejores que las SVG o viceversa. La verdad es que lo que hace que uno u otro sea "mejor", en algunos casos, depende de la circunstancia en la que se está utilizando.
Sin embargo, la mayoría de las veces, los SVG son el método preferido . Son mucho más escalables, ofrecen una mejor experiencia de usuario y son compatibles con todos los principales navegadores. Incluso algunos de los mejores expertos en rendimiento web dicen que alejarse de las fuentes de iconos en favor de SVG es esencial en 2018.
Háganos saber sus pensamientos en los comentarios a continuación. ¿Está utilizando fuentes de iconos, iconos SVG o una combinación de ambos?

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas