¿Soy el único enamorado de los archivos vectoriales? ¡Todo son ventajas! Cada vez hay más páginas web que utilizan este formato escalable y progresivamente se ha ido trasladando al diseño, aunque WordPress no lo integra de forma nativa.

No es un formato nuevo precisamente. La World Wide Web Consortium (W3C) empezó a trabajar con él hace ya 20 años. Desde entonces la organización recomienda el uso de la versión SVG 1.1 por ser compatible con la gran mayoría de navegadores web en todas sus versiones (Escritorio y Mobile).

Te preguntarás… ¿Si tiene tantos años, por qué no se utilizó antes?

El renacimiento del formato SVG es la respuesta al aumento imparable (y desmesurado) de dispositivos móviles y la irrupción de las plantallas de alta resolución (Retina display) que superan los 300 píxeles por pulgada.

¿Qué es un archivo SVG?

Es un formato de archivo estándar, pero que contiene gráficos vectoriales escalables basados en XML (un meta-lenguaje de programación). Este formato permite generar gráficos bidimensionales, animados e interactivos. ¿En qué se traduce esto? En una mejor experiencia de usuario, muy relacionada con el consumo de contenido a través de smartphone y tablet.

Esta misma web utiliza muchos elementos en formato SVG, y cada vez son más las páginas que adoptan este formato. De momento, se estima que solo un 3,4% de las páginas utilizan este formato, pero ofrece tantas ventajas sobre otros formatos que acabará estandarizándose. Como puedes observar, el formato vectorial es cada vez más popular y ha venido para quedarse.

Por suerte los navegadores web más populares son totalmente compatibles con SVG, excepto el viejo y querido Microsoft Internet Explorer 8, que como muestra la gráfica, tiene los días contados. Google Chrome sigue siendo el navegador preferido por los usuarios, y su nivel de adopción es imparable.

Los gráficos vectoriales son muy atractivos para los diseñadores web o los especialistas en experiencia de usuario (UX), ya que permiten mostrar logotipos, iconos y botones siempre a la máxima calidad sin importar el tipo de pantalla que utilice el usuario. Además, su tiempo de carga es muchísimo más bajo y pueden ser comprimidos mediante la función gzip.

Ventajas de utilizar SVG en WordPress

• Son escalables y mantienen siempre una máxima nitidez.
• Son indexables por Google, lo que es genial para el SEO.
• Pesan mucho menos que los JPEG / PNG, lo que agiliza el tiempo de carga.
• Creatividad, ya que tienen una estética muy limpia y colorida.

Fijaos que la mayoría afectan directamente al SEO. La primera mejora la experiencia de usuario y puede generar un aumento de permanencia en la web. La indexación y el tiempo de carga son factores directos. La última… es una opinión personal 😉

Ahora que ya sabes qué es un archivo SVG, porque se utiliza y cuales son sus principales ventajas, vamos a abordar como crear, editar y exportar un archivo SVG. Para hacer esto, necesitarás tener el todopoderoso Adobe Illustrator CC, el mejor software del mercado para el diseño gráfico vectorial. Si no lo tienes licenciado, puedes descargarte su versión de prueba de 7 días.

¿Quieres empezar YA a utilizar archivos SVG?

Puedes descargar iconos vectoriales gratuitos en Flaticon y Freepik

¿Cómo exportar archivos SVG con Adobe Illustrator?

Hago este post porqué hay varias maneras de exportar un archivo SVG con Illustrator CC. En la última versión de CC, las 3 opciones son válidas, pero no en versiones anteriores donde el formato SVG aparece solo en “Guardar como”. Veamos cuales son estas opciones…Archivo > Exportar > Exportar Como
En la versión CC sí se puede exportar SVG desde este panel.Archivo > Guardar para web (heredado)
Perfecta para exportar archivos JPEG, PNG o GIF. Ni rastro del SVG aquí 🙁Archivo > Guardar Como
La mejor opción para las versiones CS6 y CC al ser 100% compatible.

Así pues, para exportar correctamente los archivos SVG desde Illustrator, la opción Archivo> Guardar como funcionará en todas las versiones de Illustrator.

¡No hemos acabado! Veamos las opciones de guardado…

Si tienes varios diseños vectoriales dentro de la mesa de trabajo (por ejemplo 10 iconos web), puedes marcar la opción “Usar mesas de trabajo”. De esta manera, Illustrator exportará los 10 archivos de golpe, ahorrándote así unos cuantos minutos de trabajo.

Configuración perfecta para exportar SVG

Una vez se abra el primer cuadro de diálogo, click en “Más opciones” para acceder a toda la información.

• Perfiles SVG: SVG 1.1
• Fuentes: Texto: SVG y Subconjunto: Ninguno
• Opciones: Ubicación de la imagen: Enlazar
• Propiedades CSS: Elementos de estilo
• Decimales: 1
• Codificación: Unicode (UTF-8)
• Sí – Imprimir menos elementos <tspan>
• Sí – Utilizar elemento <textPath> para el Texto en un trazado

Como he comentado anteriormente, es importante utilizar SVG 1.1 por ser la opción recomendada por la W3C. La versión “Tiny” fue diseñada hace ya muchos años para dar soporte a sistemas operativos más minoritarios. Por otra parte, siempre uso 1 decimal porqué ofrece una calidad suficientemente alta. Subir esta cifra a 5, generaría un vector con más puntos, lo que se traduce en un archivo más pesado (el doble). Lo he comprobado incluso con ilustraciones con muchos trazos y a ojos del usuario, la diferencia es imperceptible.

Si trabajas con tipografias, debes transformar el texto en objeto antes de exportar a SVG.

Es un proceso muy simple. Basta con seleccionar el texto en Illustrator, botón derecho y seleccionar “Crear contornos”. Con este proceso, nos garantizamos un texto bien vectorizado, escalable y sin deformaciones una vez creado el archivo SVG.

Ten muy presente que a diferencia de los mapas de bits formatos por píxeles de colores como JPEG o PNG, los SVG están formados por códigos de programación XML y podrán ser editados fácilmente una vez exportados. Más adelante hablaremos sobre la seguridad de los archivos SVG en WordPress.

Comprimir y blindar el archivo SVG

Ya hemos exportado el archivo SVG desde Illustrator de forma correcta. ¿Se puede subir ya a WordPress? Sí, se puede. Pero antes de publicar nuestro archivo, vamos a comprimirlo y  a sanearlo. Para hacer este proceso, yo utilizo la herramienta online gratuita de Vecta.io llamada Nano SVG. Puedes subir archivos de uno en uno o en modo bulk.

• Compresión sin perdida de hasta un 80%
• Incrustación de fuentes –por si te has saltado el paso anterior 😉
• Limpieza de código XML (espacios en blanco, saltos de línea innecesarios…)
• Eliminación de etiquetas, events y scripts innecesarios (seguridad)
• Minificación de estilos y colores

Como podéis ver, es una herramienta todo en uno que nos garantiza un archivo ligero y seguro. Por último, solo nos quedará habilitar SVG en WordPress. Se puede hacer de dos formas; mediante código o utilizando un plugin gratuito. En mi caso, opto por la segunda opción por motivos de eficiencia.

Por ejemplo, he descargado el logo de WordPress en formato SVG desde Flaticon. Al pasarlo por el compresor…

¿Resultado? 2.039 bytes versus 1.213 bytes, una compresión del 40%

Además, el código ha sido saneado y comprimido. Fijaos la diferencia al abrirlo con Sublime text.

Habilitar el uso de SVG en WordPress

¡El último paso! Los que utilizáis WordPress y habéis intentado cargar un archivo vectorial como si de una foto se tratase, os habréis encontrado con esto:

Por razones de seguridad, este tipo de archivo no está permitido.

Uhhh… ¿da miedo, eh? WordPress debe advertirnos y hace bien.

Como hemos visto, un archivo SVG puede contener scripts maliciosos y poner en peligro nuestra página web. Para solucionar esto, instalaremos el plugin Safe SVG (SVG Segura). Este complemento nos habilitará la subida de arhivos SVG y nos dará visibilidad de los mismos en la librería del CMS. Además, analizará el archivo en busca de potenciales códigos maliciosos.

Referencias

Guía de uso SVG de Adobe
Archivos SVG en W3C
Sitio web de Creative DropLets
Sitio web de SitePoint