Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
font awesome vs svg

De Font Awesome a SVG para mejorar el WPO

Siempre me ha gustado Font Awesome, es una librería variada y versátil con la que puedes añadir iconos a botones sociales, campos de formularios, etiquetas, widgets, etc… dándole un diseño y toque atractivo al sitio web.

Para añadir Font Awesome a tu sitio simplemente tienes que descargarte la librería e incorporarla a tu tema. Esta librería, en su versión 4.7, consta de una hoja de estilos CSS que minimizada ocupa 31KB, y la propia fuente que está disponible en .otf (132KB), .eot (162KB), .svg (434KB), .ttf (162KB), .woff (96KB) y .woff2 (76KB).

En la versión 4.7 hay disponibles 675 iconos. Hace unos meses hice un fork, y eliminé de la hoja de estilos todos los iconos que no utilizaba, me quedé simplemente con los 20 que utilizaba (facebook, twitter, mail, lupa, etc…) de tal modo que conseguí reducir el peso del CSS hasta los 2KB, es decir, ahorré 29KB de peso.

Ahora he ido un paso más allá, cambiando de Font Awesome a SVG. SVG son las siglas de Scalable Vector Graphics, que se puede traducir como Gráficos Vectoriales Redimensionables. Es un formato de gráficos vectoriales en formato XML, cuya especificación es un estándar abierto desarrollado por el W3C desde el año 1999.

SVG se convirtió en una recomendación del W3C en septiembre de 2001, por lo que ya ha sido incluido de forma nativa en el navegador web del W3C Amaya. Las versiones 1.5 y posteriores de Mozilla Firefox soportan gráficos hechos con SVG, así como el navegador Opera que desde su versión 8 ha implementado SVG 1.1 Tiny en su núcleo. Navegadores como Google Chrome, Safari e Internet Explorer 9 también son capaces de mostrar imágenes en formato SVG sin necesidad de complementos externos. Otros navegadores web, como versiones anteriores a la 9 de Internet Explorer, necesitan un conector o plug-in.

Fuente: Wikipedia

He de decir que soy neófito con el uso de SVG, pero leyendo en varios sitios de referencia constaté que son muchas las ventajas que tienen respecto a las librerías de iconos o los iconos de imágenes: ahorro de peso, ahorro de peticiones http, mayor semántica y accesibilidad, mayores posibilidades para dotarlos de estilo, etc… Aquí os dejo un enlace por si queréis profundizar en el asunto.

Además me animé a escribir este artículo después de la conversación que tuvimos el otro día en twitter Darío Balbontín, Fernando Puente, Mauricio Gelves, Luis Montoya y yo mismo.

Ahora que había decidido pasarme a SVG, me faltaba saber cómo, y he de decir que encontré varias maneras de hacerlo: a través de una etiqueta img, en línea, en base 64, utilizando sprites… y la mayor duda que tenía era cómo generarlos o dónde encontrarlos.

Al final me decanté por introducir los SVGs en línea, para ahorrar peticiones http y tener más control sobre la accesibilidad y semántica, aunque os adelanto que como neófito que soy, no sé si es la mejor opción.

Y encontré los iconos que necesitaba en Icon Finder, de hecho encontré la librería Font Awesome en este repositorio, y me descargué los iconos que necesitaba.

A continuación un ejemplo sobre cómo es el icono de Facebook en SVG descargado de esta librería:

Podía haber almacenado el icono como un archivo llamado facebook.svg dentro de una carpeta icons en mi tema, y cargarlo de la siguiente manera:

Pero preferí ponerlos en línea del siguiente modo:

Si tienes cualquier consejo o indicación al respecto sobre cómo optimizar el uso de SVGs en un sitio web, por favor no dudes en utilizar la sección de comentarios y participar en el debate.

Puede que también te interese

Cómo añadir un enlace para los ajustes en el listado de plugins
Cómo añadir un enlace para los ajustes en el listado de plugins
Si estas desarrollando un plugin o vas a desarrollarlo, puede resultarte de utilidad saber cómo añadir un enlace para los ajustes de tu plugin en el…
Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS
Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Cómo cambiar WordPress Multisite de subdominios a subdirectorios ó viceversa
Cómo cambiar WordPress Multisite de subdominios a subdirectorios ó viceversa
Si alguna vez has instalado WordPress Multisite sabrás que lo primero que te pide es que tomes una decisión: subdominios o subdirectorios. Por favor, elige…
Site Icon, mucho más que un favicon
Site Icon, mucho más que un favicon
En la versión 4.3 de WordPress se introdujo una nueva característica: el Site Icon. Antes de esta versión teníamos que introducir el favicon manualmente, o…