Llega el momento en la vida en el que un desarrollador web necesita implementar alguna iconografía para un sitio que está creando, ya sea porque el cliente se lo solicitó o necesita hacer algo en específico. Lo más común en esta era es utilizar icon fonts, lo cual tiempo atrás fue una revolución en el diseño web, pero hoy hablaremos de por qué debes olvidarte de los icon fonts para empezar a utilizar SVG.
Icon fonts, ¿siguen valiendo la pena?
Si a día de hoy le preguntas a alguien las ventajas de usar icon fonts te dirá siempre lo mismo: realizan pocas peticiones al servidor, son escalables, puedes ponerle el color que quieras, son ligeros, fáciles de implementar, etc. Todo eso suena genial, ¿cierto? Pero hay algo que debemos recordar, y es que los icon fonts son fuentes, ¿qué quiero dar a entender con eso? Como tú sabes (y si no lo sabes, aprenderás en este momento) las fuentes tienen ciertos estilos bases aplicados que si bien se pueden setear, pueden llegar a ser un dolor de cabeza. También al ser fuentes de texto sólo pueden tener colores monocromáticos (aunque se pueden hacer ciertos hacks para tener algo más, pero sólo es complicarnos la vida), por lo que olvídate de un ícono con dos colores utilizando icon fonts. Además de que cada nevegador puede interpretar las fuentes a su manera llegando incluso a aplicar estilos que no hayas sobreescrito.
Comparación entre icon font y SVG
¿Por qué SVG?
Acabamos de mencionar las ventajas y desventajas en generales sobre utilizar icon fonts, ahora adentrémonos a ver por qué debes utilizar SVG.
SVG son las siglas de Scalable Vector Graphics, leíste bien, Scalable, por lo que la parte de íconos escalables ya lo tenemos resuelto (algo que no se podía hacer con imágenes en PNG y por lo que la gente decidía utilizar icon fonts). Para utilizar SVG se necesitan las etiquetas <img> o <svg>, lo cual es una sintaxis para dar a entender que lo que se encuentra ahí es una imagen, en cambio con icon fonts debemos utilizar <i>, <span>, pseudoelementos, entre otros. También al comportarse como imágenes y no texto, podemos utilizarlos como fondos en CSS.
SVG en diferentes escalas
Los archivos SVG están compuestos por código XML, esto nos permite poder modificar el color de un SVG. Estarás pensando si eso también se puede hacer con icon fonts, ¿cuál es la novedad? La gran diferencia es que, al ser todo por código, tienes control total sobre cada parte del vector, sin importar su tamaño o forma, por lo que podrías tener un ícono con más de un color, degradados e inclusive llegar crear animaciones de transiciones de color o cambio de formas. Para mayor información te recomiendo tomar el curso SVG Desde Cero.
Animación creada con SVG
<svg class="ed-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<style>
@keyframes ed-loader {
to {
transform: rotate(2turn);
}
}
.loader-group {
transform-origin: 50% 50%;
animation: ed-loader 2s infinite;
}
@keyframes loader-1 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
}
@keyframes loader-2 {
0%, 25% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes loader-3 {
0%, 50% {
opacity: 0;
}
75% {
opacity: 1;
}
}
.loader-1 {
animation: loader-1 2s infinite;
}
.loader-2 {
animation: loader-2 2s infinite;
}
.loader-3 {
animation: loader-3 2s infinite;
}
</style>
</defs>
<title>Logo EDteam</title>
<g class="loader-group">
<path class="loader-2" fill="#00caff" d="M75,93.29A49.9,49.9,0,0,0,87.74,82.8a15,15,0,0,1-20.21-15A25,25,0,0,1,28.35,62.5,12.5,12.5,0,0,0,6.7,75,50,50,0,0,0,75,93.29Z" />
<path class="loader-1" fill="#007adb" d="M93.31,25A49.87,49.87,0,0,0,59.57.95a15,15,0,0,1-2.89,25,25,25,0,0,1,15,36.58h0A12.5,12.5,0,0,0,93.31,75c.14-.25.26-.5.38-.75A49.92,49.92,0,0,0,93.31,25Z" />
<path class="loader-3" fill="#ee3f36" d="M62.5,12.5A12.5,12.5,0,0,0,50,0c-.25,0-.49,0-.74,0A50,50,0,0,0,2.73,66.28a15,15,0,0,1,23.07-10A25,25,0,0,1,50,25h0A12.5,12.5,0,0,0,62.5,12.5Z" />
</g>
</svg>
Un detalle extra a considerar es que, al hablar de código, puedes usar algún sistema de control de versiones (como lo es Git) e ir guardando los cambios que vayas generando en tu archivo.
Pero bien, ¿qué tal si lo único que quiero hacer es manejar gráficos y nada de código? ¿No es mejor los icon fonts? No olvides que estamos hablando de vectores, por lo que puedes abrir tu programa de edición vectorial preferido y así modificar o hasta crear los archivos SVG que desees.
Supongamos que por fin decidiste cambiar de icon fonts a SVG, ¿cuál es el siguiente paso? ¿Crear una carpeta donde almacenarás todos los archivos SVG para tu web? ¿Qué tal si es un proyecto enorme y hablamos más de 100 archivos? Eso ya no suena tan tentador, ¿cierto? Pero adivina qué, también hay una solución para eso, tan fácil como crear un archivo SVG principal en donde por medio de id y símbolos podrás llamar el SVG que requieras en su momento y así te olvidas de tener de cientos o hasta miles de archivos.
Mira cómo lo hace EDteam dando click aqui
Tal vez a estas alturas piensas que es mucho trabajo y que debes aprender un nuevo lenguaje para uno simples íconos, pero debes ver más a lo lejos. SVG es el futuro de la web, ya sea que hablemos de íconos, ilustraciones animaciones, etc. SVG cada día va tomando más fuerzas y sería un gran error no querer incursionar en este nuevo mundo.
Ya para finalizar te recomiendo una página llamada Flaticon en donde encontrarás miles de vectores gratis que puedes usar paratu web.