Digital

Cómo exportar SVG desde Adobe Illustrator

3 Mins de lectura

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.

156 posts

Sobre el autor
En Hiberus trabajamos día a día para alcanzar tus objetivos. Sea cual sea tu proyecto, maximizamos tus resultados.
Artículos

Especialistas en estrategia digital, captación y fidelización

Evaluamos la estrategia, procesos y datos desde el prisma del marketing digital y sus distintas especialidades. Satisfechos de acompañar a nuestros clientes en el camino a obtener sus objetivos de sus negocios digitales: captar leads, maximizar tus ventas, conseguir más tráfico…

¿Te ayudamos?

Artículos relacionados
Digital

¿Qué es el lead scoring y cómo funciona?

4 Mins de lectura
Un error frecuente en los proyectos digitales es mantener una larga lista de contactos con el propósito de conseguir conversiones por igual….
DigitalNext Tech

Tipos de pruebas de software según la Pirámide de Cohn

4 Mins de lectura
Las pruebas son una parte integral del ciclo de vida del desarrollo de software (Software Development Lifecycle) y son la forma de…
Digital

Las 6 fases de un proyecto de CRO

5 Mins de lectura
En anteriores artículos abordamos el concepto de CRO, una estrategia clave para el marketing online que busca maximizar la conversión de usuarios…

Deja una respuesta

Tu dirección de correo electrónico no será publicada.