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

Creando un plugin para WordPress parte 3: Escribiendo el plugin
Creando un plugin para WordPress parte 3: Escribiendo el plugin
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…
WordPress transients, opciones que expiran en el tiempo
WordPress transients, opciones que expiran en el tiempo
En la entrada anterior vimos cómo trabajar con la API de opciones de WordPress. En ésta vamos a ver qué son los transients. Los transients…
No indexes las páginas de error 404
No indexes las páginas de error 404
En este post vamos a ver cómo indicar a los robots de búsqueda que no indexen las páginas de error 404 en WordPress. Un error 404…
Me han hackeado mi página web de WordPress, ¿qué puedo hacer?
Me han hackeado mi página web de WordPress, ¿qué puedo hacer?
Un día nos podemos levantar y encontrarnos con la desagradable noticia de que nuestro sitio ha sido infectado. Esto puede ocurrir por multitud de factores:…