Las imágenes en formato png durante mucho tiempo han sido las líderes a la hora de usarse para poner iconos en nuestros botones, menús y diversas partes de nuestra web. Ahora son los SVG los que están ganando terreno, y debes saber que para usar uno o dos iconos puedes incrustar archivos svg dentro de css.
Piénsalo, hay infinidad de librerías que nos permiten cargar una tonelada de iconos dentro de los estilos de nuestra web, esto es genial, está por ejemplo Font Awesome, Materialdesignicons, y alguna otra. El problema viene cuando las descargamos las incluímos en nuestra web, y nos damos cuenta que de los cientos de iconos que podemos utilizar al final solo estamos usando 4 o 5, cosa bastante normal.
¿Realmente para usar 3 iconos que ocupan en total 5kbs nos hace falta cargar archivos de fuentes que ocupan 10 veces más? Desde tu punto de vista es indiferente, ya que al cargarse desde un cdn y si lo haces bien el usuario no lo notará, pero aquellos que entran con una conexión lenta por primera vez en tu página o bien tardarán más tiempo en tenerla cargada, o en cuanto se vean los estilos no lo verán todo correcto hasta que no termine de cargarse.
Cómo usar archivos SVG dentro de archivos CSS
Lo normal si haces esto, es que no quieras tener que cargar un archivo por cada icono que vas a utilizar en tu página, por eso debes saber que hay una forma de incluír archivos svg en el css de tu página, de forma que se cargue todo en un único archivo y de forma rápida. Para esto usaremos el truco del fondo de imagen, de manera que el sitio donde lo pongamos se convertirá en una capa (o propiedad de una etiqueta como before o after), en la que indicaremos que el background-image es el csv, pero no vale con pegarlo directamente, hay que tener un par de consideraciones.
Un ejemplo sería algo así:
.icono-cuadrado{
width: 24px;
height:24px;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15,15.5A2.5,11.61 12,10.87 12,10C12,8.9 13,8 14.25,8C15.5,8 16.5,8.9 16.5,10C16.5,10.87 15.87Z' /></svg>");
}
<li class="icono-cuadrado"></li>
De esta forma y teniendo en cuenta en este ejemplo que el contenedor tenga position:relative, el icono aparecerá de un tamaño determinado 24x24px y desplazado hacia la izquierda. Como puedes observar no se trata de un copy paste directamente del svg en la url del fondo, sino que tiene unas reglas.
- Debes encerrar todos los atributos con comillas simples ‘ ‘.
- Defines que es una imagen en formato svg empezando con data:image/svg+xml;utf8, .
- Pegamos únicamente el contenido de las etiquetas <svg>.
Utilizando este ejemplo y si cambiamos únicamente las propiedades width, height y viewBox por las que contenga nuestro csv, al colocar el path veremos que funciona correctamente.
Puedes ver el ejemplo funcionando en jsfiddle. De esta manera evitas cargar archivos de gran tamaño para utilizar solo un par de iconos, mejorando tanto el tiempo de carga como la cantidad de solicitudes que haga tu diseño al servidor o servidores. Además te ayudará a mejorar en Gtmetrix, pingdom y pagespeed.
También he de decir que en versiones antiguas de la mayoría de los navegadores, los archivos svg cargan de forma parcial, por lo que debemos tener ojo a la hora de usarlos siendo conscientes del público que tenemos para ellos.
¿Usas alguna librería de iconos? ¿Cuantos iconos usas de todos los que contiene?