Trabajo con recursos SVG desde Illustrator. Parte 4


A lo largo de esta serie te comentado sobre cómo aplicar efectos SVG a los objetos de tus diseños, cuáles son las opciones de exportación que nos ofrece Illustrator para este formato y cómo agregar interactividad a tus ilustraciones, así que hoy, para concluir esta serie, te muestro cómo exportar los estilos CSS de nuestros archivos SVG.

El código CSS permite controlar el aspecto del texto y los objetos (como ocurre con los estilos gráficos y los estilos de caracter), y recordarás que ya una vez te expliqué cómo exportar o extraer este código para todos los elementos de tu diseño, pero hoy nos centraremos en los archivos SVG, cuyo procedimiento es distinto.

En primer lugar debes saber que Illustrator nos permite exportar los estilos CSS de nuestros elementos SVG con sus nombres asociados, lo cual nos permite detectarlos y volver a utilizarlos luego de forma más adecuada. Además, puedes elegir si prefieres exportar sólo los estilos que has utilizado en una ilustración concreta o todos los que has creado, aunque éstos no se utilicen en dicha ilustración.

Esta última opción te permitirá utilizar en otro proyecto los estilos no usados sin tener que volver a crearlos, lo cual será también de gran ayuda para cualquier otro diseñador o desarrollador que esté trabajando con ellos o importándolos.

Como comprobarás ahora, exportar estos estilos es muy fácil, sólo debes hacer clic en Archivo > Guardar como y seleccionar el formato SVG, con lo cual te aparecerá el cuadro de diálogo Opciones SVG, donde debes hacer clic en el botón Más opciones para ver todas las posibilidades de exportación:
![exportar][1]

Asegúrate de seleccionar Atributos de estilo (referencias a entidades) o bien Elementos de estilo en el área de Propiedades CSS, donde el primero permite conseguir archivos de menor tamaño, y el segundo crea una sola hoja de estilos que define el formato de los archivos HTML y SVG, siendo un poco más lento, pero mucho más completo.

Si deseas exportar los estilos no usados en tu ilustración, selecciona la opción Incluir estilos gráficos no utilizados, y para que observes la diferencia que existe en la exportación de todos los estilos o sólo la parte utilizada, mira cómo luce su código, el cual puedes ver haciendo clic en el botón Código SVG:
![codigo][2]

En el código CSS exportado se pueden incluir sólo los estilos gráficos utilizados (izquierda), o todos los estilos creados (derecha)

Una vez hecho esto, ya puedes guardar tu archivo haciendo clic en OK, aunque antes puedes comprobar cómo ha quedado tu ilustración abriéndola en un navegador web a partir del botón que se encuentra en la parte inferior del panel con el ícono de un mapamundi. Verás entonces que tu ilustración se mantiene en el navegador con la misma calidad visual que tenías en tu mesa de trabajo de Illustrator:
![pantalla][3]

Conclusiones

A diferencia de otro tipo de formatos, un archivo SVG contiene ya dentro de sí su propio código, con lo cual tanto tú como el desarrollador se ahorrarán mucho tiempo en el proceso de desarrollo, además de que tendrás la garantía de que al final tu trabajo llegará al usuario tal cual lo diseñaste.

Y hasta aquí llega la serie de entradas sobre el trabajo con recursos SVG, un formato que, como habrás podido comprobar, nos permite obtener elementos poco voluminosos y de gran calidad que pueden a su vez convertirse en elementos interactivos o contener efectos escalables a cualquier pantalla, además de otras bondades que lo convierten en un formato muy útil para el diseño web y móvil.

Espero que el tema te haya sido de ayuda, y si fue así no olvides compartirme tus impresiones o experiencias con un comentario. ¡Hasta la próxima!