Ventajas de utilizar SVG en nuestros desarrollos web
El formato gráfico vectorial SVG (Scalable Vector Graphics) es un lenguaje de estándar abierto que forma parte de HTML5 y permite crear dibujos vectoriales (formas, imágenes y texto) en 2D por medio de etiquetas.
A la hora de crear una tienda online o una web, por las diversas ventajas que nos ofrece, SVG es una opción muy recomendable para todos los diseñadores y desarrolladores frente a los formatos tradicionales basados en Mapa de Bits, como explicamos en este artículo.
Además, ya no hay que tener miedo a su compatibilidad. Actualmente, está ampliamente soportado en los principales navegadores. Firefox comenzó a usarlo en 2004, Google Chrome lo empezó a utilizar en 2007 y Microsoft lo implementó en 2011 con Windows Internet Explorer 9.
Las posibilidades de SVG
SVG nos permite usar tres tipos de objetos gráficos: formas de vectores gráficos (polígonos, líneas, rectángulos, círculos, elipses…), imágenes y textos.
Además, a estos objetos se les pueden aplicar transformaciones, traslaciones, animaciones (sólo disponibles de momento para Chrome o Firefox) y también podemos aplicarles una gran cantidad de filtros…
SVG, formato vectorial en contraposición al mapa de bits
Lo mejor del formato SVG es que tiene «calidad infinita». Es decir, al hacer zoom sobre la pantalla, ya sea ampliando la web con el navegador de escritorio o con las pantallas táctiles de los dispositivos, aquellos elementos SVG ampliados no perderán calidad ni se verán deformados o pixelados.
Normalmente, las imágenes que solemos utilizar en un sitio web están almacenadas en los archivos gráficos como Mapa de Bits (extensiones como jpg, png, gif…). Comparados con éstos, los SVG ofrecen dos características muy interesantes:
Por una parte, el peso. El tamaño de los gráficos vectoriales generalmente es inferior al de los gráficos realizados con mapa de bits.
Por otra, la nitidez y el detalle que ofrecen es mucho mejor, algo que podremos apreciar cuando ampliemos la imagen. Mientras que en un mapa de bits los píxeles se aprecian si ampliamos la imagen; en SVG veremos que el objeto siempre tendrá una nitidez y unas líneas perfectas.
Otras de sus ventajas son:
- No necesitamos que el usuario haga zoom, también se pueden escalar como decisión de diseño con calidad infinita. Más grande o más pequeño siempre sin perder calidad.
- Al cargarlo en la web se mostrará de manera progresiva, no tendremos que esperar a que se cargue todo el archivo.
- Acepta la compresión. Podemos reducir el tamaño gracias al formato GZIP.
- Podemos aplicar estilos CSS (Cascading Style Sheets) para modificar cualquier aspecto del elemento o los elementos que forman parte de la composición, todos juntos o a cada uno de ellos por separado. Las posibilidades son tantas como te puedas imaginar, como vimos en el artículo Cómo animar con CSS3 usando sprites y Javascript.
- Es posible modificar con JavaScript (existen interesantes bibliotecas para modificarlo, como Raphaël o SNAP SVG).
- De cara a buscadores, al ser un lenguaje de marcado XML es indexable.
Implementar SVG
La estructura de una etiqueta para implementar una imagen en SVG está basada en XML. A continuación puedes ver un ejemplo:
<svg version='1.1' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' x='0' y='0' width='400' height='230' viewBox='0 0 400 230'>
Una vez dentro de SVG, podremos crear una serie de formas básicas para producir todo tipo de contenido gráfico vectorial complejo. Te dejamos algunos ejemplos.
Esto te genera un polígono, simplemente indicando algunas propiedades adicionales para su color de relleno y la línea del borde:
<polygon points='80,70 290,122 260,201' fill='#16a085' stroke='#bdc3c7' strokewidth='4' />
Esta otra línea te genera un círculo, indicando la coordenada para su posición y el radio. A su vez,se indican otros datos para el relleno y contorno a producir:
<circle cx='100' cy='200' r='80' stroke='#550099' stroke-width='6' fill='black' />
En general, podrás apreciar que el estilo de los elementos que puedes pintar se parece mucho al conocido HTML. Pero a partir de aquí queda revisar la especificación del formato, puesto que se pueden agregar una innumerable cantidad de etiquetas y atributos diferentes para llegar a los resultados más sorprendentes.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.