Trabajo con recursos SVG desde Illustrator


Uno de los problemas que se nos presentan muchas veces como diseñadores web es la exportación de recursos que mantengan su calidad y se visualicen de forma correcta, sobre todo si se trata de imágenes, pues los formatos de mapa de bits (GIF, JPEG, WBMP y PNG) tienden a ser voluminosos, limitados a una sola resolución (normalmente baja) y consumen mucho ancho de banda.

Necesitamos, entonces, un formato que sea compacto y ofrezca gráficos de gran calidad, y es por eso que hoy vengo a mostrarte, a partir de Illustrator, cómo solucionar este problema utilizando el formato SVG, cuyo nombre proviene del inglés Scalable Vector Graphics, o sea: Gráficos Vectoriales Redimensionables, un formato que ofrece mejor compatibilidad con texto y colores, lo que garantiza que los usuarios vean las imágenes tal y como las ves tú en tu mesa de trabajo.

Sus ventajas son increíbles, ya que los archivos SVG están basados en XML, y por tanto puedes utilizar tanto XML como JavaScript para crear imágenes que respondan a las acciones del usuario. A esto se suma que SVG ofrece gráficos de alta calidad y bajo peso, cuya vista puede aumentarse en la pantalla sin perder enfoque, detalles o claridad. Compara el escalado de una imagen SVG con las de otros formatos para que veas de lo que hablo:

formatos

Además, con este formato puedes aplicar a tus imágenes toda una serie de efectos, como sombras paralelas o desenfoques, que no dependerán de la resolución para verse bien, pues consisten en un conjunto de propiedades XML y por tanto no se rasterizan.

Y es precisamente sobre cómo aplicar efectos SVG con Illustrator que vengo a comentarte en esta primera entrega, y ya verás lo sencillo que es. Así que ahora comencemos:

1. Selecciona

Selecciona el objeto o el grupo al que deseas aplicar el efecto. Para crear un grupo sólo debes seleccionar todos los objetos que deseas manteniendo presionada tecla Mayús, y luego hacer clic derecho y seleccionar Agrupar. No obstante, si lo que deseas es seleccionar todos los elementos, presiona Ctrl A (Windows) o Cmd A (Mac OS).

No obstante, también puedes trabajar a partir de las capas de la ilustración identificando la capa de destino en el panel Capas. Sin embargo, si deseas que los objetos de diferentes capas sean transparentes ajusta la opacidad de cada uno y no la de las capas, pues de lo contrario el archivo SVG resultante no será transparente cuando aparezca en Illustrator.

2. Aplica el efecto

Ve al menú Efecto y selecciona Filtros SVG > Aplicar filtro SVG. Verás que enseguida te aparece el panel de filtros:

filtros

A: Eliminar filtro, B: Crear nuevo filtro, C: Editar filtro

Como ves, puedes seleccionar un efecto con sus ajustes por defecto, pero si necesitas cambiar algo sólo debes hacer clic en el botón fx, con lo cual podrás editar el código a tu conveniencia:

editar

Y si ninguno de estos efectos te agrada sólo debes crear el tuyo propio haciendo clic en el botón Crear nuevo filtro SVG y escribiendo el código nuevo que prefieres.

Puedes añadirle a tus objetos todos los efectos que desees, pero te recomiendo utilizar sólo efectos SVG, ya que los de otros tipos se rasterizan al guardarse en este formato y por tanto no son escalables. No obstante, y siempre que tengas esto en cuenta, también puedes hacer uso de ellos si lo consideras imprescindible, aunque siempre tomando la medida de mover el efecto SVG hacia la parte inferior del panel Apariencia para que sea el último en mostrarse.

3. Guarda

Ve a Archivo > Guardar como, o bien Archivo > Guardar una copia y elije el tipo de formato SVG en el que guardarás tu archivo. Aquí tienes dos opciones: SVG o SVG comprimido (SVGZ), este último puede comprimir el peso del archivo a la mitad pero no puede editarse con editores de texto.

Cuando hagas clic en Guardar notarás que aparece el cuadro de diálogo Opciones SVG, y aquí tienes una buena cantidad de opciones de exportación:

opciones

Entre estas opciones puedes escoger las que mejor se adapten a tus necesidades, pero para que tengas un poco más de información te comentaré sobre cada una de ellas en la siguiente entrada, y ya verás lo sencillo que es exportar tus recursos.

Conclusiones

SVG te ofrece un sinnúmero de oportunidades para crear y exportar recursos de calidad, pero ten en cuenta, como siempre, la compatibilidad de este formato para no sufrir contratiempos. En este caso, la mayor parte de los navegadores web son capaces de mostrar imágenes en SVG, a excepción de las versiones anteriores a la 9 de Internet Explorer, que deben instalar un conector o plug-in para soportar gráficos hechos con este formato.

No obstante, lo que sí es cierto es que SVG nos ofrece muchísimas ventajas que podemos explotar para llegar a donde queremos, y sobre cada una de ellas conocerás en esta pequeña serie que he preparado para ti. Así que espera las próximas entradas para conocer más, y mientras tanto déjame saber si el tema te ha interesado. ¡Hasta la próxima!