Cómo crear un archivo SVG

Diseñador gráfico

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?

Icono 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?

Pantalla imágenes tablet

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.

Ruta guardado SVG Illustrator

 

Al seleccionar el tipo SVG, nos aparece un cuadro de dialogo donde nos muestran diferentes opciones que hay que tener en cuenta.

Opciones guardado SVG

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.

Pantalla opciones SVG

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.

Efectos SVG Illustrator

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.

Filtro turbulencia SVG Illustrator

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.


El contenido del artículo se adhiere a nuestros principios de ética editorial. Para notificar un error pincha aquí.

Sé el primero en comentar

Deja tu comentario

Tu dirección de correo electrónico no será publicada.

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

bool(true)