SVG, CSS y el elemento ‘use’

En el post sobre Illustrator y SVG ya planteé que la utilidad que veía a Illustrator para trabajar con SVG es la creación de elementos gráficos y de los gradientes y colores de los mismos. Ahora quiero usar una ilustración convertida a SVG desde Illustrator para manipularla mediante CSS y verificar las posibilidades del elemento ‘use’. Para ello, he localizado el logotipo de Iberdrola en formato vectorial y lo he abierto en Illustrator para exportarlo a SVG. He seleccionado este logotipo porque tiene varias formas y usa diversos tipos de gradientes.

El código generado por Illustrator lo voy a reformatear para que me sea más cómodo para trabajar.

• He quitado los comentarios de Illustrator
• He eliminado las coordenadas ‘x’ e ‘y’ de la etiqueta SVG ya que no tienen ningún efecto en etiquetas SVG no anidadas. También he eliminado los atributos ‘width’ and ‘height’ de esta etiqueta y al no especificar ningún valor a estos atributos su valor será del 100% que es lo que quiero que ocupe en el iframe en que insertaré el SVG.
• He renombrado los ‘class’ para darles nombre iguales a los ‘id’ que he usado en Illustrator para que sea más sencillo reconocer cada objeto al que modifica.
• He puesto por un lado todos los gradientes y por otro los grupos y paths dentro de un ‘symbol’ para dejar más organizado el código. Todo ello lo he metido dentro de una etiqueta ‘def’. Al ‘symbol’ le he asignado un atributo ‘viewbox’ con el tamaño del logotipo y el atributo preserveAspectRatio=”xMinYMin meet” para reescalarlo manteniendo las proporciones y la visibilidad de todo el logotipo cuando se instancia mediante ‘use’.
• He usado la etiqueta ‘use’ para mostrar el logotipo, de forma que pueda reutilizarlo las veces que necesite.
• He dejado el atributo ‘d’ de los paths en la misma línea al final del atributo ya que es un contenido que no voy a tocar ni manipular y es el que más ocupa.

Podemos incrustar el archivo SVG en nuestra página mediante las etiquetas ‘iframe’, ‘object’, ‘img’ o directamente en el HTML.

Ya tenemos el código mejor organizado en el siguiente SVG.

La etiqueta ‘use’ puede parecer una solución ideal para reutilizar elementos y manipularlos con CSS, así, simplemente cambiado el ‘class’ podría mostrar el mismo logotipo en color o en blanco y negro, pero hay que tener en cuenta que el DOM del elemento referenciado por la etiqueta ‘use’ no queda expuesto por lo que no se pueden modificar mediante CSS los diferentes elementos hijo del elemento referenciado. Es una pena, pero si queremos mostrar el logotipo en color y en blanco y negro tendremos que duplicar su código.

Lo que sí podemos hacer es manipular los diferentes atributos de la etiqueta ‘use’ para cambiar el elemento al que hace referencia o sus propiedades de tamaño y posición.