SVG en línea frente a fuentes de iconos [CAGEMATCH] | Programar Plus ▷ Tutoriales

Si está creando un sistema de íconos para un sitio, tiene algunas opciones. Si sabe que los íconos deben ser imágenes rasterizadas, es probable que use sprites CSS. Si los íconos serán imágenes vectoriales (mucho más comunes en estos días), tienes algunas opciones. Dos de esas opciones son usar SVG en línea y usar fuentes de iconos.

Comparemos.

Los iconos son vectores

Los íconos vectoriales tienen grandes ventajas: redimensionables hacia arriba y hacia abajo sin perder calidad, extra nítidos en pantallas retina y tamaño de archivo pequeño entre ellos.

Fuente del icono	SVG en línea
Los navegadores lo consideran texto, por lo que los íconos tienen suavizado como tal. Puede hacer que los íconos no sean tan nítidos como cabría esperar.	Vector recto hacia arriba

En un ejemplo personal reciente, al convertir algunos íconos de fuentes a SVG en CodePen, algunos de los íconos de fuentes eran notablemente menos nítidos que los que convertí.

Control CSS

Fuente del icono	SVG en línea
Puede controlar el tamaño (a través de `font-size`), `color`, sombras, rotación, etc. a través de CSS.	Tiene el mismo control de CSS que con una fuente, pero mejor, porque puede 1) controlar partes individuales de un ícono de varias partes y 2) usar CSS específico de SVG como propiedades de trazo.

La gran victoria para SVG en línea aquí son probablemente los íconos multicolores.

Posicionamiento

Fuente del icono SVG en línea

Fuente del icono	SVG en línea
Puede ser frustrante colocar un icono de fuente. Los iconos se insertan a través de pseudo elemento, y depende de `line-height`, `vertical-align`, `letter-spacing`, `word-spacing`, cómo está diseñado el glifo de la fuente (¿tiene naturalmente espacio a su alrededor? ¿Tiene información de interletraje?). Entonces los pseudo elementos `display` tipo afecta si esas propiedades tienen un efecto o no.	SVG simplemente es del tamaño que es.

Puede ser frustrante colocar un icono de fuente. Los iconos se insertan a través de pseudo elemento, y depende de line-height, vertical-align, letter-spacing, word-spacing, cómo está diseñado el glifo de la fuente (¿tiene naturalmente espacio a su alrededor? ¿Tiene información de interletraje?). Entonces los pseudo elementos display tipo afecta si esas propiedades tienen un efecto o no.

SVG simplemente es del tamaño que es.

Vea cómo el cuadro de pseudoelemento no está exactamente donde está realmente el glifo.
El cuadro SVG tiene el tamaño del SVG.

Fracasos extraños

Fuente del icono	SVG en línea
Una fuente de icono puede fallar porque 1) se está cargando entre dominios sin los encabezados CORS adecuados y a Firefox no le gusta eso 2) por algún motivo, el archivo de fuente no se carga (problema de red, falla del servidor, etc.) 3) Hay es un error extraño de Chrome que descarga @font-face y muestra una fuente alternativa en su lugar 4) El navegador sorprendente no es compatible con @font-face. Las fallas de fuentes son bastante comunes por una variedad de razones. Además, si intenta hacer algo inteligente como asignar íconos al “Área de uso privado” de Unicode y la fuente falla, puede hacer algo realmente extraño como mostrar un emoji inesperado, porque el entorno en el que se encuentra usa esa misma área para emoji. . ¡O ese emoji podría incluso anular tus glifos!	SVG en línea está justo en el documento. Si el navegador lo admite, lo muestra.

Fuente del icono

SVG en línea

Una fuente de icono puede fallar porque 1) se está cargando entre dominios sin los encabezados CORS adecuados y a Firefox no le gusta eso 2) por algún motivo, el archivo de fuente no se carga (problema de red, falla del servidor, etc.) 3) Hay es un error extraño de Chrome que descarga @font-face y muestra una fuente alternativa en su lugar 4) El navegador sorprendente no es compatible con @font-face.

Las fallas de fuentes son bastante comunes por una variedad de razones. Además, si intenta hacer algo inteligente como asignar íconos al “Área de uso privado” de Unicode y la fuente falla, puede hacer algo realmente extraño como mostrar un emoji inesperado, porque el entorno en el que se encuentra usa esa misma área para emoji. . ¡O ese emoji podría incluso anular tus glifos!

SVG en línea está justo en el documento. Si el navegador lo admite, lo muestra.

fallas forzadas

Fuente del icono	SVG en línea
Los navegadores proxy como Opera Mini o UC Browser no son compatibles con @font-face en absoluto, aunque a veces informan que sí lo son. Entonces, incluso si intenta detectar características, puede fallar. Algunas personas fuerzan sus propias fuentes sobre las suyas, por ejemplo, en una hoja de estilo de usuario o en una extensión del navegador específicamente para aplicar estilos personalizados. Por ejemplo, uno que aplica mejor una fuente para personas con dislexia. (Más sobre los problemas con la accesibilidad de fuentes de iconos de Seren D.) La tecnología de bloqueo puede bloquear automáticamente u ofrecer fuentes personalizadas. (referencia)	Incluso esos navegadores proxy son compatibles con SVG. A los bloqueadores no les importa SVG.

Fuente del icono

SVG en línea

Los navegadores proxy como Opera Mini o UC Browser no son compatibles con @font-face en absoluto, aunque a veces informan que sí lo son. Entonces, incluso si intenta detectar características, puede fallar.
Algunas personas fuerzan sus propias fuentes sobre las suyas, por ejemplo, en una hoja de estilo de usuario o en una extensión del navegador específicamente para aplicar estilos personalizados. Por ejemplo, uno que aplica mejor una fuente para personas con dislexia. (Más sobre los problemas con la accesibilidad de fuentes de iconos de Seren D.)
La tecnología de bloqueo puede bloquear automáticamente u ofrecer fuentes personalizadas. (referencia)

Incluso esos navegadores proxy son compatibles con SVG. A los bloqueadores no les importa SVG.

Bloqueador de anuncios que ofrece bloquear totalmente las fuentes personalizadas.
Forzar una fuente diferente en una página puede destruir un sistema de fuentes de iconos.

Semántica

Fuente del icono	SVG en línea
Para usar de manera responsable, está inyectando el ícono a través de un pseudo elemento en un (vacío) `<span>`. O mala o ninguna semántica, dependiendo de cómo te sientas acerca de ese tipo de cosas.	Los iconos son pequeñas imágenes. la semántica de `<svg>` dice “Soy una imagen”. me parece mejor

Accesibilidad

Fuente del icono	SVG en línea
Tienes que tener mucho cuidado con las fuentes de iconos para asegurarte de hacerlo de una manera accesible. Básicamente, debe hacer todo lo que se indica en este artículo. Siempre está luchando para asegurarse de que el ícono en sí no se lea (pero algo más sí) y que se manejen los estados de falla difíciles de detectar.	No soy un experto, pero la investigación sugiere usar la combinación adecuada de elementos y atributos (`<title>`, `<desc>`, y `aria-labelledby`) puede transmitir buena información a través del espectro del navegador. Además, no hay estados de falla extraños.

Facilidad de uso

Fuente del icono	SVG en línea
El uso de una fuente de íconos creada previamente nunca fue particularmente responsable (demasiados íconos sin usar). Crear su propia fuente de icono nunca fue demasiado cómodo. Creo que los mejores fueron Pictos Server (limitado a iconos de Pictos) e IcoMoon (inicio de sesión gratuito para guardar proyectos). Fontello tiene una API que no vi que se usara para hacer una buena herramienta de compilación.	El sistema SVG en línea es más fácil porque puede hacerlo todo a mano si es necesario. O use una herramienta como IcoMoon (exportaciones de cualquier manera). O use una herramienta de compilación.

Fuente del icono

SVG en línea

El uso de una fuente de íconos creada previamente nunca fue particularmente responsable (demasiados íconos sin usar). Crear su propia fuente de icono nunca fue demasiado cómodo. Creo que los mejores fueron Pictos Server (limitado a iconos de Pictos) e IcoMoon (inicio de sesión gratuito para guardar proyectos). Fontello tiene una API que no vi que se usara para hacer una buena herramienta de compilación.

El sistema SVG en línea es más fácil porque puede hacerlo todo a mano si es necesario. O use una herramienta como IcoMoon (exportaciones de cualquier manera). O use una herramienta de compilación.

Compatibilidad con navegador

Fuente del icono	SVG en línea
Muy profundo. Incluso IE 6.	Decente, pero los problemas son IE 8- y Android 2.3-. Alternativas factibles pero no maravillosas.

Ganador

Todo se reduce a la compatibilidad con el navegador. Si puede usar IE 9+ / Android 3+, el SVG en línea es mejor en casi todo que las fuentes de iconos. Si necesita un soporte de navegador más profundo, creo que un respaldo de SVG en línea sería demasiado doloroso para valer la pena (mantener una copia PNG, insertar un elemento adicional para mostrar la versión PNG, ocultar el elemento SVG … es pesado).