Consejos sobre el formato de imágenes vectorial SVG

Actualizado el viernes, 19 mayo, 2023

Uno de los formatos más estandarizados en la web es el formato de imágenes vectorial SVG. En el post de hoy te explicaremos como trabajar con él y que cualidades tiene. No te pierdas detalle.

Optimizar los recursos de tu web, te hará escalar posiciones en los rankings de búsqueda. En el pasado los únicos formatos de imagen soportados eran los bitmap, pero con el tiempo esto ha cambiado.

Características

SVG viene de Scalable Vector Graphics. De su nombre ya podemos sacar bastante información. Aunque pueda parecer evidente, SVG es:

• Un archivo vectorial
• Fácilmente escalable
• Sobre todo empleado para gráficos

Los archivos SVG no dejan de ser archivos XML con etiquetas sobre las diferentes formas básicas que componen la ilustración. En otras palabras: código.

Es un formato altamente soportado por los navegadores. Si no te visitan desde un navegador muy antiguo, no te dará ningún conflicto. Por su bajo peso, reducirá el tiempo de la carga de archivos en tu web. Podrás representarlo a cualquier tamaño necesario sin pérdida de calidad.

Al estar compuesto por formas vectoriales bastante simples, no se recomienda su uso para imágenes con mucho detalle (No sustituyas una fotografía por un SVG).

Uno de sus inconvenientes es que WordPress no los admite de manera nativa, pero siempre puedes importarlos a través de algún plugin como SVG Suport.

Creación de archivos SVG

Como bien hemos dicho un archivo SVG, no deja de ser código XML, lo que significa que podríamos realizar una imagen SVG con un simple editor de texto (como el bloc de notas) escribiendo el código necesario. Sin embargo, esta no es la opción más cómoda, ya que no es nada visual, y en cuanto queramos introducir formas más complejas que círculos y cuadrados será bastante complicado no hacerse un lío.

Creación básica

Como bien hemos dicho, un SVG no es más que un XML; una sucesión de etiquetas encerrando información. A continuación explicaremos las etiquetas básicas más habituales en un archivo SVG.

• <svg>…</svg> Etiqueta principal. Dentro de esta etiqueta es dónde definiremos las diferentes formas que crearán nuestra ilustración.
• <rect x=”” y=”” widht=”” height =””/> Etiqueta rectángulo. Los atributos x e y indican el inicio del primer vértice, y los atributos widht y height su anchura y altura, respectivamente.
• <circle cx=”” cy=”” r=””/> Etiqueta círculo. Los atributos cx y cy indican la posición del centro del círculo, y el atributo r, el radio.
• <line x1=”” y1=”” x2=”” y2=”” stroke=”” stroke-widht=””/> Etiqueta línea. Los atributos x1,y1 indican el punto de inicio de la línea y los atributos x2, y2 el final de la misma. En este caso podemos definir el color con la propiedad stroke, así como el grosor con stroke-widht.

Creación a través de Software

Hoy en día cualquier tipo de herramienta de dibujo vectorial, nos permitirá exportar nuestras ilustraciones en formato SVG. De esta manera no tendrás necesidad de escribir una sola línea de código. Entre las herramientas más populares encontramos:

• Illustrator
• Sketch
• InkSpace

Pero como siempre, a día de hoy, existen herramientas online que te permiten crear SVG sin necesidad de descargar nada en tu equipo. Un ejemplo de ello es Method Draw

Incorporación de SVG a tu web

Incorporar un archivo SVG a tu web es muy sencillo. Puedes incluir el código tal cual dentro de las etiquetas <svg></svg> (forma inline), o si lo prefieres tratarlo como una imagen. SI quieres incluirlo como una imagen, los pasos son los siguientes:

1. Guarda el archivo con extensión .svg en tu hosting
2. Añade la etiqueta: <img src=”ejemplo.svg” alt=”Texto descriptivo”>
3. ¡Y listo!, es tan sencillo como añadir cualquier otro tipo de imagen

La ventaja de incluirlo nativamente (inline) es que posteriormente mediante CSS podrás modificar los atributos concretos de cada forma para realizar animaciones o cambios de estilo.

Recuerda que también se pueden emplear en las instrucciones CSS, como por ejemplo:

background-image: url(archivo.svg);

Ventajas SVG: animación y fluidez

Además de su ligereza, SVG aporta muchas funcionalidades frente a los habituales formatos bitmap (JPG y PNG). La principal es que al ser un formato raster, no sufre pérdida de calidad por aumentar su tamaño. Si además lo incluimos de forma nativa (inline), podremos aprovecharnos de las media queries para modificar el dibujo en función de la resolución. Échale un vistazo a esta interesante muestra de Joe Harrison.

También el formato es muy empleado para crear sistemas de iconos personalizados. Podemos cargar el código SVG a través de un sprite (recopilación de varios SVG en un mismo archivo externo). Para después realizar los siguientes pasos:

1. Crear un archivo con los iconos. Cada uno de ellos en un con su id correspondiente.
2. Para usarlos, utilizaremos <use xlink:href=”iconos.svg#icono”/> donde xlink:href haga referencia al nombre (y la ruta) del archivo, y acabe en # y el id del icono a usar.

De esta manera, seguirá siendo manipulable por CSS y JS, pero toda la complejidad del dibujado queda en el archivo externo (iconos.svg) que se puede cachear sin problemas.

SVG y accesibilidad

Otra de las cualidades, es que permite añadir etiquetas para aumentar su accesibilidad. En lugar de un simple alt, en el formato SVG nos encontramos con:

• <title></title> Qué permite dar un título a nuestra imagen, para que los lectores de pantalla reconozcan rápidamente ante que nos encontramos. Además, es compatible con el atributo aria-labellledy, que mejora la accesibilidad.
• <desc></desc> Con esta etiqueta podremos realizar una descripción más detallada de la imagen si fuera necesario, aunque en la mayor parte de los casos con la etiqueta title es más que suficiente.

Como has podido ver, las ilustraciones SVG son altamente personalizables, accesibles y nos aportan muchísimas más capacidades que otros formatos como el JPEG o los PNG. ¿Ya estás usando este formato en tu web? Te leemos en comentarios.