Trabajo con recursos SVG desde Illustrator. Parte 2


En la entrada anterior te estuve comentando sobre las bondades que nos ofrece el formato SVG y lo sencillo que es trabajar con él desde Illustrator, y ahora, cumpliendo mi promesa, te explico cuáles son las opciones de exportación que nos proporciona Illustrator para los archivos SVG.

Como ya te había explicado, cuando determines el formato SVG en el que exportarás tus archivos y hagas clic en Guardar, notarás que aparece el cuadro de diálogo Opciones SVG, y allí te recomiendo que selecciones Más opciones en el área de Opciones avanzadas para tener todas las posibilidades a tu disposición:
opcionesSvg

Como verás, son muchas las alternativas que posees, y por ello ahora te explico qué puedes encontrar en cada una y cómo te pueden ayudar, así que vayamos paso a paso y área a área:

Perfiles SVG

Esta opción describe el tipo de documento XML SVG que será el archivo, y aquí puedes seleccionar entre varias de acuerdo a lo que necesites:
perfiles

Por ejemplo, los archivos guardados en cualquiera de las opciones de SVG Tiny son menos pesados y están diseñados sobre todo para dispositivos móviles y portátiles, pero no admiten efectos como degradados, transparencias, recortes, máscaras, subrayados, tachados o filtros SVG, a excepción del Tiny 1.1+, que permite ver degradados y transparencias.

En cambio, SVG 1.0 y 1.1 constituyen la versión completa de la especificación SVG y admiten todo tipo de efectos, por lo que son muy útiles para archivos que se verán en pantallas grandes y con mayor necesidad de detalles.

Fuentes

En esta área encontrarás las opciones para especificar cómo exportarás las fuentes de tus archivos:
fuentes

Puedes escoger entre tres tipos de texto: Adobe CEF para las fuentes pequeñas, SVG para que el texto pueda verse en todos los visores SVG (aunque no posee mucha fidelidad visual) y Convertir en contorno para mantener la apariencia exacta del texto.

También puedes especificar el Subconjunto, que controla los tipos de fuentes que se incrustarán en el archivo, y puedes escoger Ninguno si sabes que la fuente que has seleccionado está disponible en todos los sistemas, o bien Solo se utilizan glifos para guardar cada caracter como un pictograma.

Por otra parte, si el texto de tu archivo es dinámico (como el texto generado por un servidor o el texto interactivo) puedes utilizar cualquiera de los otros valores que encontrarás.

Opciones

Si tu archivo posee imágenes rasterizadas (JPEG, PNG, etc.), en esta área podrás determinar qué hacer con ellas:
ubicación

Si deseas que estas imágenes se incrusten en el archivo SVG selecciona Incrustar, con lo cual las tendrás disponibles para otros proyectos, aunque esto también aumentará el tamaño del archivo. Y si por el contrario deseas tomarlas como un enlace de sus imágenes originales, selecciona Enlazar.

Además, y como puedes ver, tienes la opción de conservar las capacidades de edición de Illustrator si deseas volver a abrir y editar el archivo.

Opciones avanzadas

Esta es el área más grande de las opciones SVG, y aquí podrás disponer sobre varios aspectos, donde el primero, como ves, son las Propiedades CSS:
avanzadas

La opción de Propiedades CSS está hecha para que determines cómo exportar los atributos de tus objetos en código SVG, y aquí tienes varias posibilidades:

  • Atributos de presentación: ofrece mayor flexibilidad si deseas editar luego las propiedades de tus archivos.
  • Atributos de estilo: crea archivos más legibles aunque de mayor tamaño.
  • Atributos de estilo (referencias a entidades): ofrece archivos de menor tamaño.
  • Elementos de estilo: para compartir archivos con documentos HTML, aunque poseerán un tiempo de carga mayor.

Los Decimales definen el tamaño y la calidad de la imagen en una escala de 1 a 7, y mientras mayor sea el número, mayores serán el peso y la calidad del archivo. Por otra parte, la Codificación determina cómo codificar los caracteres del archivo, ya sea Unicode o ISO. Unicode es compatible con todos los procesadores XML, y su número se refiere a la cantidad de bits que posee el formato (UTF-8 o UTF-16). Eso sí: ni ISO ni UTF-16 conservan los metadatos de archivo.

Además podrás notar que tienes otras opciones:

  • Optimizar para Visor SVG de Adobe: para mantener los datos de Illustrator y generar más rápidamente algunas funciones como los efectos SVG.
  • Incluir datos de creación de sectores: si dividiste tu ilustración en sectores, esta opción te da la posibilidad de incluir su ubicación y ajustes.
  • Incluir XMP: para incluir los metadatos XMP del archivo si antes los habías agregado a partir de Archivo > Información de archivo.
  • Imprimir menos elementos <tspan>: para crear archivos más editables y compactos, aunque ignora los ajustes de kerning automático para el texto.
  • Utilizar elemento <textPath> para Texto en un trazado: para que el texto desbordado se vea en el visor SVG.

Conclusiones

Como has podido apreciar, las opciones de guardado que ofrece Illustrator para el formato SVG pueden facilitarte mucho la exportación de tus recursos, ya que puedes escoger entre ellas para llegar a lo que necesitas. Además, también tienes la posibilidad de visualizar el código de tu archivo o apreciar cómo se verá en el navegador con sólo hacer clic en los botones que aparecen en la parte inferior del panel.

En la próxima entrada te explicaré cómo agregarle interactividad a tus archivos SVG y cómo exportar su código CSS.

¿Te ha parecido útil? Coméntame tus impresiones.