was successfully added to your cart.

En el artículo 24 cosas que has estado haciendo mal al diseñar para móviles (Parte 1), menciono de manera general que el formato SVG es el estándar actual de la Web y me he dado cuenta que merece la pena hablar con mayor profundidad respecto a este.

Para hacer un poco de background, este formato tiene una larga historia (¡aproximadamente 20 años existiendo!); sin embargo no ha sido hasta los últimos años que ha cobrado una fuerza importante y su uso se ha generalizado como debió ser desde sus orígenes. ¿Qué es lo que cambió? Los dispositivos móviles, debido a que ahora todo contenido en la Web es desplegado mayormente en estos, es vital que las imágenes luzcan perfectas pese a desplegarse en pantallas que cuentan con más del doble o triple de resolución que la de un monitor.

En su artículo, Jay Eckert de Parachute Design, meciona algunas de las ventajas de utilizar el formato SVG (de las cuales ya he hablado con anterioridad); entre las que se encuentran: menor peso de archivos, mayor velocidad de navegación, una incomparable calidad gráfica y facilitar el trabajo con diseño responsivo.

Ahora bien, sé que seguramente amas el formato SVG (o lo amarás luego de probarlo), pero una de las complicaciones vienen al momento de implementarlo en nuestros proyectos; por eso en este artículo hablaremos acerca del proceso que debes seguir para exportar de manera eficiente y segura tus gráficos vectoriales para utilizarlos en tus sitios Web. En la segunda parte hablaremos acerca de las diferentes alternativas para embeber tus gráficos SVG en tu sitio Web.

Para el ejemplo utilizaré Adobe Illustrator debido a que es el software de ilustración vectorial utilizado por diseñadores Web; sin embargo, este proceso puede ser conseguido por otros software de edición vectorial con un proceso ligeramente distinto.

1. Abrimos el archivo en Adobe Illustrator

Para preparar nuestro archivo, es necesario que verifiquemos que todos los gráficos que exportaremos en formato SVG se encuentren expandidos, los objetos estén ya en forma de plastas, sin blendings y además, es muy importante que si utilizan cualquier tipo de línea, esta línea sea expandida para convertirla en Shape; por lo cual, el archivo SVG no tendrá ninguna línea realmente, todos los contenidos son formas. Esta recomentación surge porque cuando mostramos un archivo SVG en el navegador, la línea no cambia de tamaño, si en tu archivo original la habías marcado de 3px, la línea permanecerá de 3px en cualquier tamaño que se muestre el objeto; es decir, si el gráfico lo muestras muy pequeño, la línea se mostrará muy gruesa y si muestras el gráfico muy grande, la línea se mostrará muy delgada.

Paso 1

Nuestro archivo en Adobe Illustrator sin ninguna línea y con todas las formas listas para exportarse.

2. Copiar el gráfico a exportar

Cuando tu gráfico esté preparado para ser exportado, deberás seleccionar todas sus partes, preferentemente agruparlas en un solo objeto. Verifica que no tengas máscaras, porque éstas producen errores al exportarse en SVG. Una vez que seleccionaste los gráficos, deberás copiarlas con CTRL+C o CMD+C para Windows y Mac, respectivamente. Lo que queremos es guardar los gráficos en el portapapeles.

Nuestro gráfico agrupado, sin máscaras, sin líneas y listo para ser exportado.

Nuestro gráfico agrupado, sin máscaras, sin líneas y listo para ser exportado.

3. Pégalo en un nuevo documento

Con tu imagen en el portapapeles, es momento de crear un nuevo documento; en él vas a pegar tu gráfico. Es importante que verifiques que el documento que crees se encuentre en modo de color RGB debido a que es la forma en que lo exportarás más adelante.

Nuestro gráfico en el nuevo documento. Oh, qué bello es el sol :P

Nuestro gráfico en el nuevo documento. Oh, qué bello es el sol 😛

4. Ajusta el tamaño del canvas

Al exportar nuestro gráfico desde Illustrator, en ocasiones el software almacena el tamaño del artboard que contiene al gráfico, lo cual provoca muchos problemas al trabajar con el SVG generado. Para evitar esa problemática, deberás cambiar el tamaño del artboard para que se ajuste exactamente al tamaño de la caja de tu gráfico.

La forma más fácil de lograr el ajuste perfecto es seleccionar la herramienta de artboard y, en la parte superior de la pantalla, seleccionar la opción de “Fit to artwork bounds” o “Ajustar al contenido“, lo que producirá que el área de trabajo se ajuste al tamaño exacto de tu gráfico.

5. Guarda el contenido

Ahora deberás guardar el contenido a través de la opción Save As Guardar Como; en el diálogo debes seleccionar el formato SVG y asegurarte que se encuentre seleccionada la opción Use Artboards para exportar únicamente el área que necesitas.

Paso 5b

Paso 5a

6. El díalogo de exportar SVG

Inmediatamente te aparecerá un diálogo con algunas de las opciones relacionadas con el formato SVG. Generalmente de lo único que tendrás que asegurarte es que se encuentre seleccionada la opción de SVG 1.1 en la parte superior.

Las opciones de la categoría Fonts, se refieren a la forma en que se embeberán las tipografías que pueda incluir el SVG en caso de que no hayas convertido el texto a outlines (cosa que siempre deberías hacer; por lo que normalmente no importará lo relacionado a la fuente).

En el área de opciones avanzadas, se muestran algunas opciones acerca de la manera en que se generará el código CSS para tu archivo de manera interna, normalmente estas tendrán importancia si pretendes usar el SVG para generar animaciones a través de CSS; debido a que el el formato en sí mismo es código XML (meramente texto), puedes editar su contenido en un editor de texto como el Bloc de Notas; cuestiones como el color de los elementos, a veces es más simple abrir el archivo y cambiar el color que volver a realizar el proceso de exportación.

En las versiones más recientes de Illustrator, se muestra un botón que dice SVG Code, si haces click en él, te mostrará el código que se generó para formar el archivo SVG, por si necesitas copiarlo por algún motivo en lugar de guardar el archivo en el disco duro.

El diálogo de exportar SVG ha cambiado un poco con el tiempo, pero en general, cuenta con las mismas opciones principales.

El diálogo de exportar SVG ha cambiado un poco con el tiempo, pero en general, cuenta con las mismas opciones principales.

Un camino más simple

Si cuentas con la versión CC de Adobe Illustrator, todo este proceso se simplifica bastante.

Lo único que debes hacer es preparar tu gráfico para exportarlo en SVG (generar plastas, eliminar blendings, generar outlines del texto, eliminar las líneas) y seleccionarlo.

Posteriormente puedes ir a la opción File > Export Selection o Archivo > Exportar Selección, con la que directamente puedes seleccionar la opción de SVG y no tendrás que generar un nuevo artboard para realizar el proceso.

Con Adobe Illustrator CC el proceso es un poco más simple y rápido.

Con Adobe Illustrator CC el proceso es un poco más simple y rápido.

Exportando SVG

Si no has utilizado el formato SVG con anterioridad, este es el momento para hacerlo. Todos los navegadores cuentan con compatibilidad y podrás gozar de todas sus ventajas desde el día uno (no como muchos que estuvimos esperando años a que los navegadores adoptaran el estándar).

Como te comenté antes, en el próximo artículo hablaremos acerca de cómo utilizar el archivo SVG dentro de tu proyecto en HTML y CSS.

¿Ya conocías el formato SVG? ¿En qué situaciones te ha sido de utilidad?

Sigue la revista de Catarsis en Flipboard
Suscríbete a Catarsis en Play Kiosco

Author Josué E. Pizano

Amante del diseño de Experiencia de Usuario (UX), evangelista de CSS, adicto a la tecnología y apasionado del desarrollo Web, el cine, la comida y la música.

Más entradas de Josué E. Pizano

Deja una respuesta