{"id":9,"date":"2021-01-28T07:32:44","date_gmt":"2021-01-28T07:32:44","guid":{"rendered":"http:\/\/davidlozanopro.local\/?p=1"},"modified":"2021-01-28T07:32:44","modified_gmt":"2021-01-28T07:32:44","slug":"svg-wordpress-illustrator","status":"publish","type":"post","link":"https:\/\/davidlozano.pro\/en\/svg-wordpress-illustrator\/","title":{"rendered":"C\u00f3mo exportar SVG con Illustrator para WordPress"},"content":{"rendered":"<p>\u00bfSoy el \u00fanico enamorado de los archivos vectoriales? \u00a1Todo son ventajas! Cada vez hay m\u00e1s p\u00e1ginas web que utilizan este formato escalable y progresivamente se ha ido trasladando al dise\u00f1o, aunque <strong>WordPress no lo integra de forma nativa<\/strong>.<\/p>\n\n\n\n<p>No es un formato nuevo precisamente. La World Wide Web Consortium (W3C) empez\u00f3 a trabajar con \u00e9l hace ya 20 a\u00f1os. Desde entonces <strong>la organizaci\u00f3n recomienda el uso de la versi\u00f3n SVG 1.1<\/strong> por ser compatible con la gran mayor\u00eda de navegadores web en todas sus versiones (Escritorio y Mobile).<\/p>\n\n\n\n<p>Te preguntar\u00e1s&#8230; \u00bfSi tiene tantos a\u00f1os, por qu\u00e9 no se utiliz\u00f3 antes?<\/p>\n\n\n\n<p>El renacimiento del formato SVG es <strong>la respuesta al aumento imparable (y desmesurado) de dispositivos m\u00f3viles<\/strong> y la irrupci\u00f3n de las plantallas de alta resoluci\u00f3n (Retina display) que superan los 300 p\u00edxeles por pulgada.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"que-es-un-archivo-svg\">\u00bfQu\u00e9 es un archivo SVG?<\/h2>\n\n\n\n<p>Es un formato de archivo est\u00e1ndar, pero que contiene <strong>gr\u00e1ficos vectoriales escalables<\/strong> basados en <strong>XML<\/strong> (un meta-lenguaje de programaci\u00f3n)<strong>.<\/strong> Este formato permite generar gr\u00e1ficos bidimensionales, animados e interactivos. \u00bfEn qu\u00e9 se traduce esto? En una mejor experiencia de usuario, muy relacionada con el consumo de contenido a trav\u00e9s de smartphone y tablet.<\/p>\n\n\n\n<p><strong>Esta misma web utiliza muchos elementos en formato SVG<\/strong>, y cada vez son m\u00e1s las p\u00e1ginas que adoptan este formato. De momento, se estima que solo un 3,4% de las p\u00e1ginas utilizan este formato, pero ofrece tantas ventajas sobre otros formatos que acabar\u00e1 estandariz\u00e1ndose. Como puedes observar, el formato vectorial es cada vez m\u00e1s popular y ha venido para quedarse.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/navegadores-mas-utilizados-2018-1024x624-1.png\" alt=\"navegadores web m\u00e1s utilizados 2018\" class=\"wp-image-2507\" srcset=\"https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/navegadores-mas-utilizados-2018-1024x624-1.png 1024w, https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/navegadores-mas-utilizados-2018-1024x624-1-300x183.png 300w, https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/navegadores-mas-utilizados-2018-1024x624-1-768x468.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Por suerte los navegadores web m\u00e1s populares son totalmente compatibles con SVG, excepto el viejo y querido Microsoft Internet Explorer 8, que como muestra la gr\u00e1fica, tiene los d\u00edas contados. <strong>Google Chrome sigue siendo el navegador preferido<\/strong> por los usuarios, y su nivel de adopci\u00f3n es imparable.<\/p>\n\n\n\n<p>Los gr\u00e1ficos vectoriales son muy atractivos para los dise\u00f1adores web o los especialistas en experiencia de usuario (UX), ya que <strong>permiten mostrar logotipos, iconos y botones siempre a la m\u00e1xima calidad<\/strong> sin importar el tipo de pantalla que utilice el usuario. Adem\u00e1s, su tiempo de carga es much\u00edsimo m\u00e1s bajo y pueden ser comprimidos mediante la funci\u00f3n gzip.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ventajas-de-utilizar-svg-en-wordpress\">Ventajas de utilizar SVG en WordPress<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Son escalables y mantienen siempre una m\u00e1xima nitidez.<\/li><li>Son indexables por Google, lo que es genial para el SEO.<\/li><li>Pesan mucho menos que los JPEG \/ PNG, lo que agiliza el tiempo de carga.<\/li><li>Creatividad, ya que tienen una est\u00e9tica muy limpia y colorida.<\/li><\/ul>\n\n\n\n<p>Fijaos que la mayor\u00eda&nbsp;<strong>afectan directamente al SEO<\/strong>. La primera mejora la experiencia de usuario y puede generar un aumento de permanencia en la web. La indexaci\u00f3n y el tiempo de carga son factores directos. La \u00faltima&#8230; es una opini\u00f3n personal \ud83d\ude09<\/p>\n\n\n\n<p>Ahora que ya sabes qu\u00e9 es un archivo SVG, porque se utiliza y cuales son sus principales ventajas, vamos a abordar como <strong>crear, editar y exportar un archivo SVG<\/strong>. Para hacer esto, necesitar\u00e1s tener el todopoderoso&nbsp;<strong>Adobe Illustrator CC,<\/strong> el mejor software del mercado para el dise\u00f1o gr\u00e1fico vectorial. Si no lo tienes licenciado, puedes descargarte su <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator\/free-trial-download.html\" target=\"_blank\" rel=\"noreferrer noopener\">versi\u00f3n de prueba de 7 d\u00edas<\/a>.<\/p>\n\n\n\n<p>\u00bfQuieres empezar YA a utilizar archivos SVG?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Puedes descargar iconos vectoriales gratuitos en&nbsp;<a href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flaticon<\/a> y <a href=\"https:\/\/www.freepik.es\/\" target=\"_blank\" rel=\"noreferrer noopener\">Freepik<\/a><\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"como-exportar-archivos-svg-con-adobe-illustrator\">\u00bfC\u00f3mo exportar archivos SVG con Adobe Illustrator?<\/h2>\n\n\n\n<p>Hago este post porqu\u00e9 hay varias maneras de exportar un archivo SVG con Illustrator CC. En la \u00faltima versi\u00f3n de CC, las 3 opciones son v\u00e1lidas, pero no en versiones anteriores donde el formato SVG aparece solo en &#8220;Guardar como&#8221;. Veamos cuales son estas opciones&#8230;<strong>Archivo &gt; Exportar &gt;&nbsp;Exportar Como<\/strong><br>En la versi\u00f3n CC s\u00ed se puede exportar SVG desde este panel.<strong>Archivo &gt; Guardar para web (heredado)<\/strong><br>Perfecta para exportar archivos JPEG, PNG o GIF. Ni rastro del SVG aqu\u00ed \ud83d\ude41<strong>Archivo &gt; Guardar Como<\/strong><br>La mejor opci\u00f3n para las versiones CS6 y CC al ser 100% compatible.<\/p>\n\n\n\n<p>As\u00ed pues, para exportar correctamente los archivos SVG desde Illustrator, <strong>la opci\u00f3n&nbsp;Archivo&gt; Guardar como funcionar\u00e1 en todas las versiones de Illustrator.<\/strong><\/p>\n\n\n\n<p>\u00a1No hemos acabado! Veamos las opciones de guardado&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"824\" height=\"582\" src=\"https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/SVG-Mesas-de-trabajo-1-min.png\" alt=\"mesas de trabajo svg illustrator\" class=\"wp-image-2508\" srcset=\"https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/SVG-Mesas-de-trabajo-1-min.png 824w, https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/SVG-Mesas-de-trabajo-1-min-300x212.png 300w, https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/SVG-Mesas-de-trabajo-1-min-768x542.png 768w\" sizes=\"auto, (max-width: 824px) 100vw, 824px\" \/><\/figure>\n\n\n\n<p>Si tienes varios dise\u00f1os vectoriales dentro de la mesa de trabajo (por ejemplo 10 iconos web), puedes marcar la opci\u00f3n <strong>&#8220;Usar mesas de trabajo&#8221;<\/strong>. De esta manera, Illustrator exportar\u00e1 los 10 archivos de golpe, ahorr\u00e1ndote as\u00ed unos cuantos minutos de trabajo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configuracion-perfecta-para-exportar-svg\">Configuraci\u00f3n perfecta para exportar SVG<\/h2>\n\n\n\n<p>Una vez se abra el primer cuadro de di\u00e1logo, click en &#8220;<strong>M\u00e1s opciones<\/strong>&#8221; para acceder a toda la informaci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"745\" height=\"756\" src=\"https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/SVG-Propiedades-1-min.png\" alt=\"Exportar SVG con Adobe Illustrator\" class=\"wp-image-2509\" srcset=\"https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/SVG-Propiedades-1-min.png 745w, https:\/\/davidlozano.pro\/wp-content\/uploads\/2021\/01\/SVG-Propiedades-1-min-296x300.png 296w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Perfiles SVG<\/em>: SVG 1.1<\/li><li><em>Fuentes<\/em>: Texto: SVG y Subconjunto: Ninguno<\/li><li><em>Opciones<\/em>: Ubicaci\u00f3n de la imagen: Enlazar<\/li><li>Propiedades CSS: Elementos de estilo<\/li><li>Decimales: 1<\/li><li>Codificaci\u00f3n: Unicode (UTF-8)<\/li><li><em>S\u00ed<\/em> &#8211; Imprimir menos elementos &lt;tspan&gt;<\/li><li><em>S\u00ed<\/em> &#8211; Utilizar elemento &lt;textPath&gt; para el Texto en un trazado<\/li><\/ul>\n\n\n\n<p>Como he comentado anteriormente, <strong>es importante utilizar SVG 1.1<\/strong> por ser la opci\u00f3n recomendada por la W3C. La versi\u00f3n &#8220;Tiny&#8221; fue dise\u00f1ada hace ya muchos a\u00f1os para dar soporte a sistemas operativos m\u00e1s minoritarios. Por otra parte, siempre uso&nbsp;<strong>1 decimal porqu\u00e9 ofrece una calidad suficientemente alta<\/strong>. Subir esta cifra a 5, generar\u00eda un vector con m\u00e1s puntos, lo que se traduce en <strong>un archivo m\u00e1s pesado (el doble)<\/strong>. Lo he comprobado incluso con ilustraciones con muchos trazos y a ojos del usuario, la diferencia es imperceptible.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Si trabajas con tipografias, debes <strong>transformar el texto en objeto<\/strong> antes de exportar a SVG.<\/p><\/blockquote>\n\n\n\n<p>Es un proceso muy simple. Basta con seleccionar el texto en Illustrator, bot\u00f3n derecho y seleccionar &#8220;Crear contornos&#8221;. Con este proceso, nos garantizamos <strong>un texto bien vectorizado, escalable y sin deformaciones<\/strong> una vez creado el archivo SVG.<\/p>\n\n\n\n<p>Ten muy presente que a diferencia de los mapas de bits formatos por p\u00edxeles de colores como JPEG o PNG, los SVG est\u00e1n formados por c\u00f3digos de programaci\u00f3n XML y podr\u00e1n ser editados f\u00e1cilmente una vez exportados. M\u00e1s adelante hablaremos sobre la <strong>seguridad de los archivos SVG en WordPress<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"comprimir-y-blindar-el-archivo-svg\">Comprimir y blindar el archivo SVG<\/h2>\n\n\n\n<p>Ya hemos exportado el archivo SVG desde Illustrator de forma correcta. \u00bfSe puede subir ya a WordPress? S\u00ed, se puede. Pero antes de publicar nuestro archivo, vamos a <strong>comprimirlo y&nbsp; a sanearlo.&nbsp;<\/strong>Para hacer este proceso, yo utilizo la <strong>herramienta online gratuita de Vecta.io<\/strong> llamada <a href=\"https:\/\/vecta.io\/nano\" target=\"_blank\" rel=\"noreferrer noopener\">Nano SVG<\/a>. Puedes subir archivos de uno en uno o en modo bulk.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Compresi\u00f3n sin perdida de hasta un 80%<\/li><li>Incrustaci\u00f3n de fuentes \u2013por si te has saltado el paso anterior \ud83d\ude09<\/li><li>Limpieza de c\u00f3digo XML (espacios en blanco, saltos de l\u00ednea innecesarios&#8230;)<\/li><li>Eliminaci\u00f3n de etiquetas, events y scripts innecesarios (seguridad)<\/li><li>Minificaci\u00f3n de estilos y colores<\/li><\/ul>\n\n\n\n<p>Como pod\u00e9is ver, es una <em>herramienta todo en uno<\/em> que nos garantiza un archivo ligero y seguro. Por \u00faltimo, solo nos quedar\u00e1 <strong>habilitar SVG en WordPress<\/strong>. Se puede hacer de dos formas; mediante c\u00f3digo o utilizando un plugin gratuito. En mi caso, opto por la segunda opci\u00f3n por motivos de eficiencia.<\/p>\n\n\n\n<p>Por ejemplo, he descargado el logo de WordPress en formato SVG desde Flaticon. Al pasarlo por el compresor&#8230;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u00bfResultado?<em> 2.039 bytes<\/em> versus <em>1.213 bytes<\/em>, una <strong>compresi\u00f3n del 40%<\/strong><\/p><\/blockquote>\n\n\n\n<p>Adem\u00e1s, el c\u00f3digo ha sido saneado y comprimido. Fijaos la diferencia al abrirlo con Sublime text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"habilitar-el-uso-de-svg-en-wordpress\">Habilitar el uso de SVG en WordPress<\/h2>\n\n\n\n<p>\u00a1El \u00faltimo paso! Los que utiliz\u00e1is WordPress y hab\u00e9is intentado cargar un archivo vectorial como si de una foto se tratase, os habr\u00e9is encontrado con esto:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Por razones de seguridad, este tipo de archivo no est\u00e1 permitido.<\/p><\/blockquote>\n\n\n\n<p>Uhhh&#8230; \u00bfda miedo, eh? WordPress debe advertirnos y hace bien. <\/p>\n\n\n\n<p>Como hemos visto, <strong>un archivo SVG puede contener scripts maliciosos<\/strong> y poner en peligro nuestra p\u00e1gina web. Para solucionar esto, instalaremos el plugin <a rel=\"noreferrer noopener\" href=\"https:\/\/es.wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\">Safe SVG<\/a> (SVG Segura). Este complemento nos habilitar\u00e1 la subida de arhivos SVG y nos dar\u00e1 visibilidad de los mismos en la librer\u00eda del CMS. Adem\u00e1s, analizar\u00e1 el archivo en busca de potenciales c\u00f3digos maliciosos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"referencias\">Referencias<\/h2>\n\n\n\n<p>Gu\u00eda de uso SVG de <a href=\"https:\/\/helpx.adobe.com\/illustrator\/how-to\/export-svg.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe<\/a><br>Archivos SVG en <a href=\"https:\/\/www.w3.org\/standards\/webdesign\/graphics\" target=\"_blank\" rel=\"noreferrer noopener\">W3C<\/a><br>Sitio web de <a href=\"http:\/\/creativedroplets.com\/export-svg-for-the-web-with-illustrator-cc\/\" target=\"_blank\" rel=\"noreferrer noopener\">Creative DropLets<\/a><br>Sitio web de <a href=\"https:\/\/www.sitepoint.com\/crash-course-optimizing-and-exporting-svgs-in-adobe-illustrator\/\" target=\"_blank\" rel=\"noreferrer noopener\">SitePoint<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Poco a poco vamos diciendo adi\u00f3s al formato PNG para dar paso al formato SVG basado en vectores. \u00bfC\u00f3mo podemos crear iconos en Illustrator y exportarlos correctamente?<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":0,"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidlozano.pro\/en\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}