{"id":2871,"date":"2015-09-22T17:13:21","date_gmt":"2015-09-22T15:13:21","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=2871"},"modified":"2023-11-28T11:12:15","modified_gmt":"2023-11-28T10:12:15","slug":"como-exportar-svg-desde-adobe-illustrator","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/como-exportar-svg-desde-adobe-illustrator\/","title":{"rendered":"C\u00f3mo exportar SVG desde Adobe Illustrator"},"content":{"rendered":"

A lo largo de este art\u00edculo vamos a ver las diferentes opciones a la hora de exportar nuestros archivos en formato SVG a trav\u00e9s de Adobe Illustrator.<\/strong><\/p>\n

Antes de nada, una buena pr\u00e1ctica es guardar nuestro archivo en formato de Illustrator y a continuaci\u00f3n hacer una copia del mismo en formato SVG.<\/p>\n

Lo primero que se har\u00e1 ser\u00e1\u00a0ir al menu archivo, y seleccionaremos\u00a0la opci\u00f3n de \u00abGuardar como\u00bb<\/strong>, tal como muestra la imagen.<\/p>\n

Una vez elegida la ruta donde se guardar\u00e1 el\u00a0archivo, iremos a la pesta\u00f1a de formato, donde encontraremos\u00a0las opciones de: guardar como SVG, y guardar como SVGZ comprimido. Seleccionaremos\u00a0la opci\u00f3n de guardar SVG<\/strong> y clicaremos en\u00a0guardar. Aparecer\u00e1\u00a0un men\u00fa con m\u00faltiples opciones. A continuaci\u00f3n, citaremos las m\u00e1s importantes e interesantes que nos ofrece.<\/p>\n

1. Perfiles SVG<\/strong><\/p>\n

Aqu\u00ed existe la posibilidad de\u00a0seleccionar el tipo de perfil entre todas las especificaciones de SVG. Se dejar\u00e1 la opci\u00f3n que viene por defecto.<\/p>\n

2. Fuentes<\/strong><\/p>\n

La primera opci\u00f3n es la de texto, y en ella podemos seleccionar entre trazarlo de nuestro SVG a contornos o dejarlo tal y como est\u00e1. En esta ocasi\u00f3n lo dejaremos sin trazar.<\/p>\n

En el subconjunto tambi\u00e9n dejaremos la opci\u00f3n que viene por defecto, que es la de Ninguno (usar fuentes del sistema).<\/p>\n

3. Opciones<\/strong><\/p>\n

En ubicaci\u00f3n de imagen existen\u00a0dos opciones, incrustar, que incluir\u00e1 la imagen en el archivo SVG incrementando su tama\u00f1o considerablemente, \u00a0y la otra opci\u00f3n es enlazar, que incluir\u00e1 una etiqueta image<\/em>\u00a0que vincular\u00e1 la imagen a nuestro SVG.<\/p>\n

4. Opciones Avanzadas<\/strong><\/p>\n

En las propiedades CSS nos fijaremos\u00a0en dos opciones, la primera de ella es atributos de presentaci\u00f3n.<\/strong>\u00a0Si seleccionamos esta opci\u00f3n daremos\u00a0el color de relleno y el color del borde a los propios elementos, es decir fill<\/em>=\u00bb\u00bb y stroke<\/em>=\u00bb\u00bb con sus colores correspondientes ir\u00e1n dentro del elemento. En cambio, si seleccionamos elementos de estilo Illustrator<\/strong> crear\u00e1 una serie de estilos CSS que ser\u00e1n los que se encargar\u00e1n 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\u00e1 la que gestionara estos atributos.<\/p>\n

La m\u00e1s importante de todas las opciones es decimales<\/strong>, por defecto viene seleccionado con 3. Para reducir el tama\u00f1o de nuestro archivo y no perder precisi\u00f3n en \u00e9l vamos a indicarle que exporte los SVG solamente con un decimal.<\/strong><\/p>\n

La opci\u00f3n flexible (responsive) har\u00e1 que los\u00a0archivos se adapten al tama\u00f1o de la web. No\u00a0se recomienda\u00a0esta opci\u00f3n ya que elimina tanto el width<\/em> como el height<\/em> del documento, y sin ellos deshabilitaremos\u00a0el zoom al usuario, siendo \u00e9sta una de las m\u00faltiples ventajas de SVG.<\/p>\n

5. C\u00f3digo SVG<\/strong><\/p>\n

Al final del men\u00fa se encuentra\u00a0la opci\u00f3n C\u00f3digo SVG, si se hace\u00a0click en ella se \u00a0abrir\u00e1 el editor de texto que tenga por defecto el sistema operativo del que seamos usuario. Se\u00a0mostrar\u00e1\u00a0un archivo con todo el c\u00f3digo que ha generado nuestro SVG.<\/p>\n

A la derecha de esta opci\u00f3n tenemos una bola del mundo, si se clicka sobre\u00a0ella se abrir\u00e1 nuestro navegador por defecto y previsualizaremos\u00a0nuestro archivo SVG.<\/p>\n

Por\u00a0\u00faltimo, se har\u00e1\u00a0click sobre el bot\u00f3n de OK y tendremos\u00a0el archivo SVG guardado.<\/p>\n

Un \u00faltimo apunte, aquellos usuarios que trabajen con las versiones CC de Adobe Illustrator podr\u00e1n\u00a0seleccionar todo el SVG,\u00a0clickar\u00a0en edicion>copiar en Illustrator, y si se van a un editor de texto o al IDE con el\u00a0que se trabaje, tendr\u00e1n la posibilidad de\u00a0pegar, de manera que se tendr\u00e1 todo el c\u00f3digo que genera el SVG con las opciones que indicabamos en el men\u00fa. As\u00ed,\u00a0nos ahorramos unos cuantos pasos. Cabe recordad que esta funcionalidad no esta presente en Adobe Illustrator CS6 ni en versiones inferiores.<\/strong><\/p>\n

Si necesitas saber m\u00e1s sobre dise\u00f1o y desarrollo de portales de \u00faltima generaci\u00f3n visita nuestra web para m\u00e1s informaci\u00f3n<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

A lo largo de este art\u00edculo vamos a ver las diferentes opciones a la hora de exportar nuestros archivos en formato SVG…<\/p>\n","protected":false},"author":2,"featured_media":9631,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3],"tags":[31],"class_list":{"0":"post-2871","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"tag-diseno"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/2871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=2871"}],"version-history":[{"count":1,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/2871\/revisions"}],"predecessor-version":[{"id":14979,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/2871\/revisions\/14979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/9631"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=2871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=2871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=2871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}