A la hora de crear un sitio web, el diseñador web tiene que tener en cuenta cuatro puntos primordiales pensando en la maquetación y el diseño visual de la web, el texto, las imágenes, los colores y las tipografías empleadas.
De estos cuatro puntos, al que más importancia le vamos a dar en este post es al de las imágenes, ya que, vamos a hablar de cómo crear archivos SVG puesto que es muy importante tener en cuenta la calidad de las imágenes con las que se trabaja.
El tratamientos con archivos SVG, ha ido cada vez en aumento por parte de los profesionales y no tan profesionales del mundo del diseño.
¿Qué es un archivo SVG?
SVG es la abreviatura en inglés de Scalabe Vector Graphics, en español, Gráficos Vectoriales Escalables. Se trata de un formato abierto y gratuito con el que crear gráficos en 2D, dos dimensiones.
A diferencia de otros formatos de imagen, como JPG o PNG, SVG es un formato escalable, no importa cuánto se quiera aumentar su tamaño, dado que la calidad de la imagen se mantendrá. Es uno de los formatos más usados en páginas web para colocar gráficos o imágenes vectoriales.
¿Por qué debemos usar SVG?
Con este tipo de formato, las imágenes vectoriales mantendrán una alta calidad, sea cual sea su tamaño y resolución. Al contrario, que las imágenes compuestas por mapa de bits, formadas por pixeles, que pierden calidad si son redimensionadas. El formato SVG se define por su ligereza y versatilidad.
Otro de los puntos a favor para el uso de este formato, es su pequeño tamaño, es decir, gracias a ello se aumenta la velocidad de carga de las páginas donde se encuentren. Estas imágenes son construidas por medio del navegador, lo que ayuda a disminuir la carga y el consumo en el servidor.
Además, se pueden crear imágenes SVG animadas con las que dar a nuestro sitio web un aire de cercanía y llamar la atención de los espectadores que la visitan.
SVG es un formato abierto, es decir, puede sufrir mejoras y actualizaciones. Además los archivos SVG, se pueden editar con programas de edición vectorial, por ejemplo Adobe Illustartor sin perder calidad en su visualización, se puede ver en cualquier dispositivo. También nos permite su impresión sin perder calidad.
Cómo crear archivos SVG de manera sencilla
Tal vez, la manera más sencilla de crear archivos SVG, si estas familiarizado con ellos, sea mediante un programa de diseño gráfico, como puede ser Illustrator, Corel Draw, entre otros.
Centrándonos en el programa Illustrator, cuando vayamos a usar el formato SVG, tenemos que tener en cuenta si hemos usado degradados u otros efectos, como por ejemplo el efecto artístico, desenfocar, pinceles, pixelas, etc. ya que se rasterizan al guardarse en formato de archivo SVG. Lo recomendable es utilizar efectos de filtro SVG, para añadir efectos para que después no se puedan rasterizar.
Otro de los consejos que os damos, es que se utilicen símbolos y trazados simples en las ilustraciones para un mejor rendimiento de dicho formato. Evitar el uso de pinceles de mucho trazado ya que esto genera una carga de datos mayor.
Para crear un archivo SVG en este programa, lo primero que tenemos que tener abierto es un lienzo en blanco donde trabajaremos nuestra idea.
Una vez acabado nuestro trabajo, lo que vamos a hacer es ir a la barra de herramientas que se nos muestra arriba del programa, y seleccionaremos la opción de archivo, guardar como, y nos aparecerá una pantalla emergente dónde nos indica que demos un nombre a nuestro archivo e indicar el formato en el que lo queremos guardar. Es en este último apartado donde debemos marcar la opción SVG.
Al seleccionar el tipo SVG, nos aparece un cuadro de dialogo donde nos muestran diferentes opciones que hay que tener en cuenta.
Por norma general, en el primer campo que nos aparece en el cuadro, aparece el perfil SVG 1.1. En el siguiente nos da opción a escoger las fuentes, en el cual nos dan de forma predeterminada el texto marcado en SVG y el subconjunto, como ninguno. En nuestro caso, este trabajo no tiene tipografías, si las tuviese habría que cambiar la opción de subconjuntos, de ninguno, a todos los pictogramas.
El siguiente apartado es muy importante, si señalamos la opción de incrustar, las imágenes de la composición se incorporarán al archivo, lo que generará que este aumente de peso si usamos muchas imágenes de mapa de bits. Si por otro lado, marcamos la opción de enlazar, hay que tener cuidado con las imágenes si las vamos a usar en un sitio web, ya que debemos incluir los archivos de nuestras imágenes, y además muy importante, mantener la ruta de los mismos. La ventaja esta opción, es que los archivos pesarán bastante menos.
En la parte de opciones avanzadas encontramos la opción de código SVG, esta opción nos indicará como es el archivo por dentro, es decir, el código detrás de nuestro trabajo. Esta opción es fundamental si quieres añadir tu archivo SVG, por ejemplo a tu WordPress personal, solo tienes que copiar el código y añadirlo directamente en tu editor HTML de WordPress.
El último consejo que os damos, es que a la hora de guardar en formato SVG, tengáis en cuenta que si estáis trabajando con diferentes mesas de trabajo, solo se conservará la mesa de trabajo activa.
Si queremos ir más allá y aplicar efectos SVG a nuestra ilustración, Illustrator nos ofrece un conjunto de efectos. Para ello, tendremos que seleccionar un objeto o grupo. Para aplicar un efecto debemos seleccionar la ventana efectos, filtros SVG y lo aplicaremos.
Al aplicar un filtro SVG, el programa de diseño, nos muestra una ventana donde aparecen un listado de filtros que poder aplicar, una vez seleccionemos uno, Illustrator nos muestra cómo queda, pero en una versión rasterizada.
Como has podido observar, el formato SVG ha supuesto una revolución. Gracias a su potencial y la calidad que ofrece, hace que las páginas webs que nos encontramos sean mucho más atractivas sin sacrificar el rendimiento, siempre que hagan un uso correcto de dicho formato. SVG se ha convertido en la unión perfecta entre el mundo del diseño y el desarrollo web.