Para que sirve la etiqueta svg en HTML5?

Para que sirve la etiqueta svg en HTML5?

Hola a todos y saludos desde el área Web de la Escola Espai. En el último artículo sobre HTML5, vimos para que servía la etiqueta canvas. Como el artículo despertó bastante interés, hoy os traemos otro artículo sobre otro elemento HTML5 muy útil, aunque sensiblemente más complejo; el elemento svg.

Gráficos vectoriales

Generalizando bastante, se puede decir que la etiqueta svg nos va a permitir trabajar con gráficos vectoriales. ¿Que son los gráficos vectoriales?, os preguntareis. Para saberlo lo mejor es conocer que son los gráficos no vectoriales, también llamados mapas de bits, que son los que usa el elemento canvas de HTML5.

Los mapas de bits son, simplificando mucho, una especie de “tabla” (o matriz) de puntos. Cada punto es conocido como pixel (seguro que os suena), y el tamaño de dicha tabla es conocido como la resolución de la imagen. Así, si tenemos una “tabla” con 4000 columnas de puntos dispuestas en 3000 filas de puntos, tenemos en total 12 millones de puntos (4000 por 3000). O dicho en otras palabras, tenemos una imagen de 4000 x 3000 pixels de resolución, es decir, una imagen de 12 megapixels.

Sin embargo, en el caso de los gráficos vectoriales, la información no se almacena como “tablas de puntos” (matrices de pixels). Lo que se almacena, simplificando de nuevo, son las instrucciones para dibujar la imagen. Ahora bien, nada nos impide usar mapas de bits dentro de un gráfico vectorial (lo contrario no es posible), aunque esto no nos permitirá superar todas las limitaciones de un mapa de bits.

Virtudes y defectos

La principal ventaja de los gráficos vectoriales es que son independientes de la resolución. Como vamos a tener que pintarlos en una pantalla (que es una matriz de puntos), al final vamos a tener que indicar con que resolución vamos a querer pintar dicha imagen, pero, a diferencia de los mapas de bits, por mucho que hagamos grande una imagen vectorial, nunca perderá calidad (los píxeles no ser irán viendo cada vez más grandes, tal y como sucede con los mapas de bits.

Gráficos de mapa de bits vs gráficos vectoriales (SVG).

Gráficos de mapa de bits vs gráficos vectoriales.

Una virtud muy importante en el universo web, es que los buscadores pueden inspeccionar su contenido, de forma que si la imagen tiene texto, este puede ser indexado por los buscadores.

Más virtudes incluyen;

  • Suelen ser más pequeñas que los mapas de bits equivalentes.
  • No pierden calidad al modificarlas tal y como sucede con algunos formatos de mapas de bits.
  • El contenido de la imagen forma parte del DOM (por lo que es manipulable del mismo modo que cualquier otro elemento).
  • Más rápido dibujando elementos grandes.
  • El canvas requiere programar con JavaScript para hacer cualquier cosa, con svg no es necesario. Podemos dibujar e incluso animar sin necesidad de saber JavaScript.

Defectos

  • El contenido de la imagen forma parte del DOM (por lo que aumenta la complejidad del mismo).
  • Más lento dibujando muchos elementos.

Al final podríamos resumirlo en que canvas es más apropiado para juegos web o para cualquier tipo de situación que implique dibujar muchos elementos, dibujarlos muy rápido y/o dibujarlos con una alta tasa de refresco. Mientras que svg sería más apropiado para gráficas, pocos elementos, grandes elementos, elementos que requieren poder escalarse sin perder calidad y que puedan ser indexados por los buscadores.

¿ Cómo funciona el elemento SVG?

Veamos un sencillo ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo SVG</title>
</head>
<body>
  <svg width="100" height="100" style="border: 1px solid black">
    <circle cx="50" cy="50" r="40" fill="transparent" stroke="black">
    </circle>
  </svg>
</body>
</html>

 

El resultado es un circulo sin relleno y con un fino borde.

Tal y como se puede observar, dentro de la etiqueta SVG colocamos más elementos con sus propios atributos, estos elementos forman parte del DOM, con todo lo que ello conlleva, tanto virtudes como defectos.

Veamos otro ejemplo más complejo.

<svg width="100" height="100" style="border:1px solid black">
  <rect width="100" height="100" style="fill:rgb(120,120,255);" />
  <circle cx="50" cy="50" r="10" style="fill: transparent; stroke:white; stroke-width:2;">
    <animate attributeName="r" begin="0s" dur="2s" values="1; 20" repeatCount="indefinite" />
    <animate attributeName="stroke-opacity" begin="0s" dur="2s"
             values="1; 0" repeatCount="indefinite" />
  </circle>
</svg>

 

En este caso tenemos más elementos y subelementos. Además, este SVG está animado gracias al elemento animate (aunque debéis saber actualmente se recomienda prescindir de este elemento y usar animaciones CSS).

Aquí podéis ver un ejemplo más completo de un bonito logo/banner.

Editores de gráficos vectoriales SVG

Obviamente, crear imágenes escribiendo código SVG puede resultar muy laborioso, hasta el punto de convertirse en una tarea imposible. Normalmente usaremos un editor de gráficos vectoriales que nos permita crear imágenes SVG de forma más comoda. Algunos editores conocidos son:

Inkscape, un interesante editor de gráficos vectoriales (SVG) open source.

Inkscape, un interesante editor de gráficos vectoriales open source.

Una vez creada la imagen con cualquiera de estos editores gráficos, podremos usarla como cualquier otra imagen, mediante el elemento HTML img, tal y como lo haríamos con una imagen en otro formato como png o jpeg. Otra opción, es abrir el archivo svg con un editor de texto como el bloc de notas y copiar el código contenido en la etiqueta SVG dentro de nuestra pagina web. Hay que tener en cuenta que para que Google indexe el contenido de nuestra imagen SVG (si tenemos algún texto que queramos que sea indexeado), cualquiera de los dos alternativas es válida.

Usos de la etiqueta SVG

Los usos vienen a ser los mismos que discutíamos en el artículo sobre el elemento HTML5 canvas, teniendo en cuenta las virtudes y defectos de cada uno, claro. Así que si aún no habéis leído dicho artículo os recomiendo hacerlo para poder valorar mejor que podéis hacer mejor con cada una de estas dos etiquetas HTML5.

Y nada más. Espero que este artículo os haya sido de interés, y que os haya ayudado un poco a comprender hasta qué punto este elemento puede resultaros útil en vuestros proyectos HTML5.

Escribe un comentario