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 sí 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.
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:
<?xml version="1.0" ?>
<svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/>
</svg>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:
<img src="<?php echo get_template_directory_uri() . '/icons/facebook.svg';?>" alt="Compartir en Facebook">Pero preferí ponerlos en línea del siguiente modo, y evitar una petición HTTP más:
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 1792 1792" aria-labelledby="icon_facebook">
<title id="icon_facebook">Comparte en Facebook</title>
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z" />
</svg>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
