soy Kseso y esto EsCSS

Inline SVG vs Icon Fonts [comparativa]

Traducción del artículo original de Chris Coyier "Inline SVG vs Icon Fonts [CAGEMATCH]" publicado en css-tricks.com

Inline SVG vs Icon Fonts [comparativa]

✎ 2
COLABORACIÓN AUTOR INVITADO
Inline SVG vs Icon Fonts [comparativa]

Si estás desarrollando un sistema de iconos para un sitio tienes varias opciones. Si sabes que los iconos van a mostrarse como imágenes de mapa de bits preferirás usar sprites Css. Si los iconos serán imágenes vectoriales (mucho más comunes hoy día) tienes algunas opciones. Dos de estas opciones son usar SVG en línea [inline SVG] e iconos tipográficos [icon fonts]

Comparémolos

Los Iconos son Vectores

Hay grandes ventajas con iconos vectoriales: reescalables sin perder calidad, nitidez extra en pantallas retina y menor peso de archivo.

Icon Font Inline SVG
Los navegadores lo consideran texto, así que los iconos son suavizados [anti-aliased] tambien. Puede suponer que sus contornos no sean tan nítidos como cabría esperar. Nítido como un vector

En un caso propio reciente, mientras convertía iconos tipográficos a SVG en CodePen, algunos de los iconos tipográficos eran manifiestamente menos nítidos que los ya pasados a SVG.

captura pantalla Icon font vs SVG

Control CSS

Icon Font Inline SVG
Puedes controlar su tamaño (via font-size), color, sombras, rotaciones, etc. vía CSS. Tienes exáctamente el mismo control CSS que con las tipografías, pero mejor, porque puedes 1) controlar individualmente cada parte de un icono compuesto (más de un trazo) y 2) usar el CSS específico de SVG como las propiedads del contorno (stroke).

EL punto ganador aquí para SVG en línea es posíblemente los iconos multicolores.

Posicionamiento

Icon Font Inline SVG
Puede llegar a ser frustante posicionar un icono tipográfico. Los iconos suelen ser mostrados vía pseudoelementos, y son dependientes de line-height, vertical-align, letter-spacing, word-spacing, del diseño del trazo de la fuente (¿tiene un espacio a su alrededor? ¿ajuste entre caracteres?). Además el tipo de display del pseudoelemento condiciona si estas propiedades tienen efecto o no. El tamaño del SVG es el que es.
tamaño de la caja del pseudoelemento y del icono
La caja del pseudoelemento no es el tamaño del grafo
La caja del SVG es exáctamente el tamaño del SVG

Fallos curiosos y extraños

Icon Font Inline SVG
Un icono tipográfico puede fallar porque: 1) está siendo cargado vía cross-domain sin los encabezados CORS oportunos y Firefox no lo soporta (por la especificación) [1]. 2) Fallar la carga del archivo por cualquier razón (red con hipo, fallo del servidor, etc) 3) Por bug de Chrome que se salta la regla @font-face y muestra una fuente alternativa en su lugar 4) Navegadores sorpresivos que no soportan @font-face.
Los fallos con las fuentes son bastantes comunes por razones de lo más variado. Además, si intentas hacer algo fuera de lo común como un mapa de iconos unicode acotados y la fuente falla puede ocurrir algo totalmente desagradable y mostrar emojis no deseados, porque estás en un mismo entorno. O porque los emoji invaliden tus iconos. 		Inline SVG está en el propio documento. Si el navegador lo soporta lo muestra

Fallos forzados

Icon Font Inline SVG
  • Navegadores alternativos como Opera Mini no soportan @font-face en absoluto, aunque a veces digan que lo hacen. Así que incluso aunque se intenten detectar, puede fallar la detección.
  • Algunas personas imponen sus propias fuentes a las tuyas, por ejemplo, si un usuario utiliza sus propias hojas de estilo o extensiones del navegador específicas para aplicar estilos personalizados. Un ejemplo es esta aplicación que para disléxicos que impone una tipografía mejor para ellos.
  • Bloqueadores de contenido pueden inhabilitar las tipografías personalizadas de forma automática o por configuración. (Una referencia)
 Incluso estos navegadores alternativos soportan SVG. Los bloqueadores no se preocupan del SVG
Bloqueo de fuentes personalizadas
Opción de bloqueador de publicidad para bloquear las tipografías.
Forzar la carga de una tipografía puede destrozar los iconos tipográficos.

Semántica

Icon Font Inline SVG
En un uso responsable el icono se introduce vía pseudoelemento en un <span> (vacío). Malo o no semántico, dependiendo de cómo veas este tipo de prácticas. Los iconos son pequeñas imágenes. La semántica de un SVG dice Soy una imagen. Yo lo veo mejor.

Accesibilidad

Icon Font Inline SVG
Has de ser un poco cuidadoso con las tipografías de iconos y asegurarte que las utilizas de forma accesible. Lo que deberías hacer básicamente lo tienes en este artículo. Te has de asegurar que el icono no es leído (pero indicado de alguna manera) y manejar los escenarios fallidos en su detección. No soy un experto, pero una búsqueda sugiere que conuna combinación adecuada de elementos y atributos (<title>, <desc> y aria-labelledby) puede transmitir una buena información en cualquier navegador. Además no conlleva estados fallidos.

Facilidad de uso

Icon Font Inline SVG
El uso de una tipografía de iconos pre-creada nunca fue particularmente responsive (demasiados iconos no son utilizados). Crear la tuya propia nunca fue demasiado cómodo. Creo que las mejores son Pictos Server (kimitada a iconos pictográficos) y IcoMoon (registro gratuito para salvar proyectos). Fontello tiene una API. No la vi utilizada para construir una buena herramienta. El método de SVG en línea es sencillo porque puedes hacerlo todo a mano si fuese necesario. O utilizar una herramienta como IcoMoon (los exporta como quieras). O un contructor.

Soporte de los navegadores

Icon Font Inline SVG
Muy amplio. Incluido IE6. Decente, los problemas están con IE8 y Android 2.3. Hay posibilidad de fallbacks pero no son una maravilla.

El ganador

Todo se reduce a la compatibilidad con los navegadores. Si sólo das soporte a IE 9+ / Android 3+, SVG en línea es mejor en casi todo que las fuentes de iconos. Si necesitas soportar a navegadores más antiguos, creo que los SVG en línea requieren de más trabajo por necesitar una alternativa (hacer una copia en PNG, insertar un elemento adicional para mostrar la versión PNG, ocultar al elemento SVG ... es pesado).

Créditos y autoría

chris coyier

La totalidad del artículo, imágenes incluidas (excepto la inicial en b&n) es una traducción del original "Inline SVG vs Icon Fonts [CAGEMATCH]" de @chriscoyier publicado originalmente en css-tricks.com el 22 de Abril de 2014 y actualizado hoy 21 de Octubre de 2015.
Respeto y mantengo la estructura y los estilos de las tablas comparativas originales para remarcar aún más el origen y autoría del artículo.
Chris Coyier además de ser el autor del blog css-tricks.com también es miembro fundador de CodePen y un autor de reconocido prestigio en la red.