A lo largo de este artículo vamos a ver las diferentes opciones a la hora de exportar nuestros archivos en formato SVG a través de Adobe Illustrator.
Antes de nada, una buena práctica es guardar nuestro archivo en formato de Illustrator y a continuación hacer una copia del mismo en formato SVG.
Lo primero que se hará será ir al menu archivo, y seleccionaremos la opción de «Guardar como», tal como muestra la imagen.
Una vez elegida la ruta donde se guardará el archivo, iremos a la pestaña de formato, donde encontraremos las opciones de: guardar como SVG, y guardar como SVGZ comprimido. Seleccionaremos la opción de guardar SVG y clicaremos en guardar. Aparecerá un menú con múltiples opciones. A continuación, citaremos las más importantes e interesantes que nos ofrece.
1. Perfiles SVG
Aquí existe la posibilidad de seleccionar el tipo de perfil entre todas las especificaciones de SVG. Se dejará la opción que viene por defecto.
2. Fuentes
La primera opción es la de texto, y en ella podemos seleccionar entre trazarlo de nuestro SVG a contornos o dejarlo tal y como está. En esta ocasión lo dejaremos sin trazar.
En el subconjunto también dejaremos la opción que viene por defecto, que es la de Ninguno (usar fuentes del sistema).
3. Opciones
En ubicación de imagen existen dos opciones, incrustar, que incluirá la imagen en el archivo SVG incrementando su tamaño considerablemente, y la otra opción es enlazar, que incluirá una etiqueta image que vinculará la imagen a nuestro SVG.
4. Opciones Avanzadas
En las propiedades CSS nos fijaremos en dos opciones, la primera de ella es atributos de presentación. Si seleccionamos esta opción daremos el color de relleno y el color del borde a los propios elementos, es decir fill=»» y stroke=»» con sus colores correspondientes irán dentro del elemento. En cambio, si seleccionamos elementos de estilo Illustrator creará una serie de estilos CSS que serán los que se encargarán de gestionar el color de relleno (fill) y el color del borde (stroke) asignando a cada de los elementos una clase de CSS que será la que gestionara estos atributos.
La más importante de todas las opciones es decimales, por defecto viene seleccionado con 3. Para reducir el tamaño de nuestro archivo y no perder precisión en él vamos a indicarle que exporte los SVG solamente con un decimal.
La opción flexible (responsive) hará que los archivos se adapten al tamaño de la web. No se recomienda esta opción ya que elimina tanto el width como el height del documento, y sin ellos deshabilitaremos el zoom al usuario, siendo ésta una de las múltiples ventajas de SVG.
5. Código SVG
Al final del menú se encuentra la opción Código SVG, si se hace click en ella se abrirá el editor de texto que tenga por defecto el sistema operativo del que seamos usuario. Se mostrará un archivo con todo el código que ha generado nuestro SVG.
A la derecha de esta opción tenemos una bola del mundo, si se clicka sobre ella se abrirá nuestro navegador por defecto y previsualizaremos nuestro archivo SVG.
Por último, se hará click sobre el botón de OK y tendremos el archivo SVG guardado.
Un último apunte, aquellos usuarios que trabajen con las versiones CC de Adobe Illustrator podrán seleccionar todo el SVG, clickar en edicion>copiar en Illustrator, y si se van a un editor de texto o al IDE con el que se trabaje, tendrán la posibilidad de pegar, de manera que se tendrá todo el código que genera el SVG con las opciones que indicabamos en el menú. Así, nos ahorramos unos cuantos pasos. Cabe recordad que esta funcionalidad no esta presente en Adobe Illustrator CS6 ni en versiones inferiores.
Si necesitas saber más sobre diseño y desarrollo de portales de última generación visita nuestra web para más información.
