Dale color a tus iconos SVG.

En los inicios de la web, el único formato que entendían los navegadores era el mapa de bits. Formato gif para iconos y gráficos de colores planos y/o transparencias y formato jpg (o jpeg) para fotos e imágenes. Incluso, cuentan que algún loco se dedicó a subir imágenes en formato TIFF.

Al poco tiempo, aparecieron los primeros formatos vectoriales, que suponían menor peso (muy necesario por aquel entonces) y escalado sin pérdidas. Autodesk propuso en 1998 el formato VML, el cual parece que sólo hizo uso Microsoft en Internet Explorer y sus productos de MS Office, pero que acabó cayendo en el olvido. Hubo otros… aunque de Flash no quiero hablar, ya que ni era un formato de imagen ni fue un estándar.

No fue hasta 2001 cuando se propuso el estándar abierto “Scalable Vector Images”, SVG para los amigos. Desde entonces, los navegadores han ido implementando dicho formato muy lentamente, tanto que hasta el 2009 no fue soportado por la totalidad de los navegadores más usados.

Las grandes ventajas de usar SVG son las siguientes:

• Accesibilidad web, contenido indexable, estándar abierto.
• Mejor rendimiento (CPU).
• Escalado uniforme y sin “comportamientos raros”.
• Pueden realizarse animaciones, inclusión de mapas de bits y textos.
• Carga progresiva y posibilidad de compresión GZIP
• Modificable mediante javascript y CSS.

En relación a este último punto, veremos varios métodos para modificar el color de los iconos SVG (o determinados subelementos de un icono) mediante CSS, que, básicamente, es de lo que trata el post.

Método 1: SVG en línea

Si queremos usar CSS para controlar el color de un SVG, debemos declarar la imagen SVG en línea.

A continuación, vemos un ejemplo de cómo aplicar estilos a un SVG en línea, usando la propiedad CSS fill que es la que aplica el color a un elemento de una imagen SVG. Con la propiedad stroke modificaremos al borde del polígono SVG seleccionado. También podemos establecer propiedades para el estado :hover.

See the Pen vYEvPpo by @avara on CodePen.

Método 2: usando SVG <symbol>

Como hemos visto en el ejemplo anterior, si quisiéramos añadir a un sitio varias imágenes SVG, estaríamos clonando todo el tiempo muchas líneas de código, por lo que no es lo más óptimo.

Este método consiste en crear un mapa de imágenes SVG que se declaran de forma no visible en el DOM, agrupando cada una de las imágenes mediante el elemento <symbol>, para luego ser instanciadas utilizando el elemento <use>.

A continuación vemos un ejemplo (reutilizando el mismo CSS del apartado anterior).

Nota: Anteriormente se venía utilizando <use xlink:href=”...”>, pero esta forma está deprecada, se debe usar directamente el atributo href.

See the Pen gObZEea by @avara on CodePen.

Aplicando variables CSS

Hace dos años vimos algunas propiedades CSS que ya se empezaban a usar con normalidad, como es el caso de las variables CSS, pero que todavía algunos navegadores se resistían a adoptar. Ahora ya podemos comprobar que podemos utilizarlo sin miedo.

Sin miedo, teniendo en cuenta que Internet Explorer no entiende estas variables, pero aprovechando la salida de Microsoft Edge Chromium, el cual asume también la compatibilidad con sistemas operativos anteriores, deberíamos empezar esta nueva década marcándonos un 100% IE free.

La forma de crear variables consiste en definir propiedades que deben empezar con dos guiones -- junto a su valor, para luego poder llamarlas mediante la función var(). También podemos crear variables que contienen a su vez otra variable.

Podemos declarar dentro del selector :root por ejemplo todos los colores necesarios para aplicar posteriormente al SVG. Hay que tener en cuenta que su prioridad es la más baja, por lo que podemos sobrescribir fácilmente estas clases con otras.

See the Pen MWYZQJa by @avara on CodePen.

También es posible usar estas variables en línea, añadiéndolas dentro del atributo fill de un SVG.

Aquí puedes echar un vistazo a la compatibilidad de las variables CSS.

¡SVG para todos!

Si vas a querer ...

• usar SVG como mapas y aplicarlos de forma automática,
• tenerlos centralizados en un único archivo externo y cacheable,
• tener fallback para navegadores del pasado,
• y poder modificar el color de subelementos del SVG,

… necesitas usar una librería js del tipo svg4everybody

Este tipo de librerías nacieron principalmente para mejorar el rendimiento de carga y añadir soporte a versiones antiguas de navegadores, incluso disponen de un sistema de fallback que genera versiones de imágenes de mapa de bits para navegadores antiguos (IE 6-8).

La potencia de esta librería consiste en integrar de forma automática el mapa de SVG´s en cada una de las páginas, haciendo una llamada ajax a la ruta donde está ubicado el archivo: mapa.svg; lo lee y lo inyecta en el DOM declarándolo en línea, de tal manera que podemos acceder tanto a los SVG como a sus subelementos, para poder darles color mediante CSS. Si llamásemos a un archivo externo sin el uso de esta librería, podríamos instanciar también los iconos svg, pero no podríamos acceder al interior de los mismos mediante CSS, al no estar declarados en línea.

Código con el que instanciamos una imagen mediante esta librería.

<svg role="img" title="icon3" class="blackbg">
    <use href="/path/mapa.svg#circle1"/>
</svg>

Nota: El archivo se consume mediante llamada ajax, por lo que si usas un servidor específico para los estáticos, debes tener habilitado CORS.

Lo normal es usar también algún task runner tipo gulp para generar este mapa de forma automática, leyendo todos los SVG´s contenidos en una determinada carpeta.

Más posibilidades

Para acabar, es posible que te parezca que todo esto de los SVG añade bastante complejidad frente al uso de las típicas imágenes de mapas de bits o de los glyph/icon-fonts, pero también ofrecen muchas posibilidades y mejoras que de otra manera no sería posible realizar, incluso animaciones. Además, es un formato abierto, escalable, y desarrollado por la W3C, ¿qué más se puede pedir? Animaros y… ¡¡¡pasaros a SVG!!!