Trabajar con SVG en un flujo de trabajo RWD (Responsive Web Design) por lo general implica una fase de diseño y una fase de desarrollo. La fase de diseño está a cargo de los diseñadores que pueden saber o no cómo codificar. Y debido a la naturaleza del SVG tanto como formato de imagen, como formato de documento, cada paso que se da en el editor de gráficos al crear el SVG afecta directamente al código resultante y por lo tanto al trabajo del desarrollador a cargo de la incrustación, scripting o animación del SVG.
Es muy frecuente que el código resultante después de una optimización de un archivo SVG requiera una revisión debido a que la creación del SVG por parte de los diseñadores no está orientado a una mejor optimización del código, lo tratan como un formato de imagen más.
Por ello, hay una serie de consejos aplicables que en la creación del SVG que mejoran el resultado. En este artículo nos centraremos en el editor de gráficos Adobe Illustrator (AI).
También vamos a repasar las actuales opciones de exportación de SVG disponibles en Ai y cuáles elegir y por qué.
1. Crear Formas simples usando elementos de forma simple, no trazados (<path>).
Hay una razón por la que hay diferentes formas básicas para crear SVG. Se podría crear prácticamente cualquier forma utilizando un elemento <path>.
Los elementos de forma simple existen (<line>, <circle>, <rect>, <ellipse>, <polygon> y <polyline>) por la razón de que son más legibles, fáciles de mantener y editables que sus alternativas de trazados <path>.
Las formas básicas vienen con un conjunto de atributos que permiten controlar las características de forma, tales como la posición (x, y, cx, cy) y dimensiones (anchura y altura), mientras que un trazado no viene con estos atributos.
Por ejemplo, el siguiente fragmento de código muestra la diferencia entre un círculo creado y exportado como una forma simple, en comparación con un creado y exportado como un trazado <path>:
<circle fill="#FFFFFF" stroke="#000" cx="28.1" cy="28.1" r="27.6"/> <!-- versus --> <path fill="#FFFFFF" stroke="#000" d="M55.7,28.1c0,15.2-12.4,27.6-27.6,27.6 S0.5,43.3,0.5,28.1 S12.9,0.5,28.1,0.5 S55.7,12.9,55.7,28.1z"/>
Si deseas aplicar una animación a la forma, digamos, mover la posición del círculo o hacerlo más grande, puedes animar la posición del centro a través de la coordenadas X e Y (cx y cy) y el radio del círculo (r). Mientras que si estás trabajando con un círculo generado como un trazado, tendrás que recurrir a transformaciones CSS/SVG para hacerlo. Y a continuación, supongamos que deseas animar ese trazado, puede transformase fácilmente en algo muy complejo.
Otra ventaja de utilizar las formas simples es que, en la mayoría de los casos, el código necesario para crear una forma usando elementos de forma simples es menor que el necesario para crear la misma forma utilizando un elemento <path>, por lo que utilizando formas simples también se traducirá el tamaño del archivo, algo beneficioso.
2. Convertir texto en contornos .. o no.
Para convertir un texto en contorno debes seleccionarlo e ir al menú Texto/Crear contornos.
Pros:
El texto convertido a contornos conservará el tipo de letra utilizado, sin tener que utilizar una fuente web para mostrarlo. Esto significa que te evitas algunas peticiones HTTP adicionales y que no corres el riesgo de mostrar el texto con una fuente de reserva que por lo general no mantiene ni la calidad ni el diseño de la elegida.
Convertir el texto y conservar el tipo de letra utilizado es bueno para la conservación de la identidad de una marca cuando ésta se define tipo de letra, por ejemplo: en un logotipo.
Contras:
El texto convertido a contornos no es texto real: se trata de un conjunto de trazados que forman el contorno (forma) del texto. En consecuencia, el texto se convierte en irreal e inaccesible, no se puede buscar ni seleccionar.
En el caso de un titular o un logotipo en el que se convierte el texto en contornos, utilizar el texto alt (si el logotipo se incrusta como una imagen) o los elementos de accesibilidad del SVG (<title> y &>) es una buena idea para proporcionar alternativas en texto para los lectores de pantalla.
La conversión del texto en contornos puede aumentar significativamente el tamaño del archivo SVG, dependiendo de la complejidad del tipo de letra utilizado.
Los trazados no son tan fácilmente controlados y animados como los elementos <text> (incluyendo los<tspan>) están. Estos últimos tienen un conjunto de atributos que le dan más control sobre sus animaciones, mientras que los datos de los trazados están limitados en ese sentido.
3. Simplificar los trazados.
Una trazado se define por un conjunto de puntos donde a su vez cada uno de ellos se definen por un par de coordenadas.
Cuanto menor sea el número de puntos menos datos habrá y, en consecuencia, menor es el tamaño total del archivo SVG. Esto siempre es positivo ya que un archivo de tamaño más pequeño favorece el rendimiento.
Para simplificar un trazado ir al menú Objeto/Trazado/Simplificar.
Hay un tutorial de vídeo creado por Adobe para explicar el proceso.
4. Evita la Fusión de trazados a menos que no necesites un control por trazados individuales.
Muchos diseñadores tienden a combinar o fusionar trazados siempre que sea posible.
Para combinar trazados, después de seleccionarlos ir a Ventana/Buscatrazos. Y pulsar en la tercera opción del Apartado Buscatrazos: Combinar
La combinación de caminos pueden tener sus beneficios, pero evítalo si tú o el desarrollador necesitáis controlar y/o animar los trazados por separado. Algunas animaciones se han diseñado para que varios elementos se animen por separado, o utilicen diferentes colores de relleno. Si se combinan los trazados, ya no será posible.
5. Crear filtros con los filtros SVG, no con efectos de Photoshop.
Si utilizas los filtros en la sección de Efectos de Photoshop, Illustrator los exporta como imágenes de mapa de bits. Por ejemplo, si creas una sombra paralela mediante el efecto Desenfoque de Photoshop, la sombra generada será una imagen de trama incrustada dentro del SVG, ya sea en línea o externamente, utilizando la etiqueta <imagen>.
Para generar efectos como código SVG, es necesario utilizar los filtros SVG disponibles:
Están en el menú Efecto/Filtros SVG
6. Ajustar la mesa de trabajo al dibujo.
¿Alguna vez has incrustado un SVG en una página, le has dado un alto y ancho específico y luego has descubierto que se muestra en un tamaño más pequeño de lo que has especificado?
En la mayoría de los casos, esto es causa de un espacio en blanco no deseado dentro de la mesa de trabajo del SVG. La mesa de trabajo se muestra en el tamaño que está especificado en su hoja de estilo, pero el espacio extra en blanco dentro de ella hace que tu imagen se reduzca, porque ese espacio en blanco forma parte de la imagen del SVG.
Para evitar esto, es necesario asegurarse de que la mesa de trabajo es lo suficientemente grande para encajar el dibujo dentro de ella, pero no más grande.
Las dimensiones de la mesa de trabajo serán las dimensiones del SVG exportado, y cualquier espacio en blanco en la mesa de trabajo se generará como espacio en blanco dentro de la imagen.
Para adaptar la mesa de trabajo al dibujo debes seleccionar el trazado e ir al menú Objeto/Mesas de trabajo/Encajar en límites de ilustración.
7. Utiliza un buen Naming, agrupación de elementos y utilización de capas.
Las identificaciones y los nombres de clase que utilizas en el editor de gráficos van a ser traducidos a los ID y nombres de clase en el código generado. Cuanto más sentido tengan estos nombres, menos dificultades tendrá el desarrollador cuando trabaje con el código.Por esto es importante aplicar nombres que de forma simple identifique nos elementos que contienen, sean trazados o agrupaciones y capas.
Utiliza capas para agrupar elementos relacionados. Las capas se convierten en grupos de código, asígnales un buen nombre también. Crea capas/grupos para agrupar elementos relacionados entre sí, especialmente aquellos que podrían ser animados en su conjunto. Esto ahorrará una gran cantidad de tiempo al desarrollador al evitar tener que reordenar y agrupar los elementos. Estar en comunicación el desarrollador y el diseñador en la fase de diseño ahorra bastante tiempo al final.
8. Selecciona las opciones de exportación más adecuadas para Web.
Illustrator tiene muchas opciones de exportación que te permiten generar un mejor código SVG.
Para exportar tu SVG ir al menú Archivo/Guardar como, y elegir SVG en el desplegable.
Una vez que hagas clic en Guardar, el cuadro de diálogo que aparecerá contiene un conjunto de opciones que se pueden personalizar, y que afectarán al código SVG generado:
Las opciones que se muestran en la imagen de arriba son las recomendadas para la generación de SVG para web.
La opción de Ubicación de imagen es por si alguna de las imágenes de mapa de bits se pueden incrustar en línea en tu SVG o serán externas con un enlace dentro del SVG. Esto, de nuevo, depende de lo que necesites. Hacerlo puede aumentar el tamaño de archivo de forma espectacular.
La opción Propiedades CSS opción te da la opción de elegir cómo deseas que sean los estilos aplicados al SVG: usando atributos de presentación, estilos en línea, o en una etiqueta <style>. Esto también es una cuestión de preferencia y depende de cómo vas a manipular el SVG. Si no eres el que va a hacer eso, asegúrate de consultar con el desarrollador para elegir la opción que mejor se adapte a sus necesidades.
Cuanto menor sea el número de decimales, menor es el tamaño de archivo del SVG. Un decimal en general, debería ser suficiente.
Ten en cuenta que si eliges 3 ó 4 decimales, por ejemplo, y luego utilizas una herramienta de optimización para optimizar el SVG y llevas ese número de nuevo a 1, el SVG podría terminar roto visualmente; así que lo mejor es elegir esta opción desde el principio.
Hay más opciones en el panel que las descritas aquí. En el siguiente enlace puedes aprender sobre todas las opciones: Exportar SVG para Web con Illustrator CC
Pero antes de saltar a la sección Optimización, es importante señalar una opción adicional en el panel donde se selecciona la opción SVG: Usar mesas de trabajo.
Esta opción es útil cuando se trabaja con múltiples imágenes SVG (por ejemplo: iconos) y está utilizando una mesa de trabajo para cada icono.
La exportación de varias mesas de trabajo generará múltiples archivos .svg archivos, uno por cada mesa de trabajo (uno por cada icono).
Si estás trabajando con una sola mesa de trabajo, esta opción estará desactivada de forma predeterminada.
La elección de exportar uno o varios archivos SVG depende de cómo se va a incorporar el SVG.
Por ejemplo, si vas a crear un sprite de SVG para un sistema de icono SVG, hay varias maneras que puedes crear y utilizar el sprite, y cada uno requerirá un enfoque diferente: una técnica requiere que los iconos puedan ser separados en un primer momento, y otro requiere que sean parte de una imagen.
Optimizar o no Optimizar ...
Por lo general se recomienda optimizar el SVG después de la exportación desde un editor de gráficos usando una herramienta de optimización independiente. La herramienta actual de optimización más popular es la herramienta basada en NodeJS llamada SVGO. Pero no siempre puede ser una buena idea optimizar tu SVG, especialmente si tienes la intención de animarlo.
Las herramientas de optimización suelen eliminar cualquier grupo utilizado y también los identificadores, así como aplican muchos cambios al SVG para asegurarse de que se ha optimizado.
Optimizar un SVG después de animarlo con <animate> puede causar cambios en la estructura y que deje de funcionar. Así que esto es algo a tener en cuenta antes de la optimización del SVG.
Si has editado de forma manual y/o generado un SVG con una cierta estructura necesaria, evita optimizarlo con una herramienta de optimización, y optimiza a mano tanto como sea posible.
La herramienta de optimización SVGO trae muchos plugins que puede utilizarse en prácticamente cualquier tipo de flujo de trabajo.
9. Comunicar. Comunicar temprano.
Posiblemente el consejo más importante es el de comunicarse, y hacerlo al principio del proceso de diseño.
Casi cada uno de los consejos anteriores requiere el conocimiento de la fase de desarrollo y lo que el desarrollador tiene la intención de hacer con el SVG, cómo lo va a incrustar, su escritura, el estilo y la animación. Así que a menos que seas la misma persona la que va a tomar las decisiones para ambas fases, y a menos que quieras perder un montón de tiempo, es necesario asegurarse de que sabes el enfoque que el desarrollador va a aplicar al SVG. Si estás trabajando en un proyecto que tiene un plazo muy corto, probablemente no puedes permitirte el lujo de perder una gran cantidad de tiempo en hacer cambios y revisiones a las imágenes, cuando además lo puedes evitar mediante la comunicación temprana.
Comentarios