Unidad 16. Introducción a SVG. Gráficos redimensionables (I)

SVG (Scalable Vector Graphics) es un formato de imagen basado en vectores y con gráficos redimensionables (o escalables). Esta última característica permite ver el gráfico a distintos tamaños sin pérdida de resolución, algo que no sucede con las imágenes de tipo mapa de bits (gif, jpg, png, ...) que aparecen "pixeladas" cuando se aumenta su tamaño. SVG es un estándar abierto definido por W3C e implementado en la mayoría de los navegadores web. Además está definido en XML y permite animaciones, así como cambios interactivos desde el código CSS o Javascript.

De forma similar a los gráficos Canvas, con SVG podemos crear la imagen utilizando código desde la propia página web. SVG dispone de instrucciones para crear líneas, círculos, rectángulos, etc., también para crear filtros, animaciones, degradados, sombras, texto, etc. En una imagen SVG se pueden usar determinadas tipografías que permiten que el texto contenido en la imagen pueda ser reconocido e indexado por los buscadores.

Aunque, a fecha de hoy, todavía no es un formato muy extendido en la web, tiene algunas ventajas que lo están impulsando. Por ejemplo, es muy útil para crear iconos redimensionables para diseños web adaptables. Uno de los inconvenientes del uso de imágenes SVG es que pueden esconder código malicioso mezclado entre el código XML.

Podemos comprobar cómo se redimensiona una imagen SVG de forma automática con la siguiente imagen SVG que cambia de tamaño, sin perder resolución, al modificar el ancho de la ventana del navegador

Sin embargo, esta otra imagen en formato PNG aparecerá pixelada al aumentar el ancho de la ventana. Para apreciarlo debes verla en una ventana suficientemente grande (más de 1200 px.), por ejemplo una pantalla de ordenador.

Como ya hemos visto en la unidad 5, podemos hacer que cualquier imagen se redimensione según el ancho de la ventana utilizando valores relativos en la anchura y altura, por ejemplo, width="50%" height="auto", aunque no es un método recomendable en HTML5.

16.1. Crear una imagen SVG

Podemos crear una imagen SVG de dos formas: mediante código o mediante un programa de dibujo vectorial (Inkscape, Illustrator, ...)

1. Crear SVG mediante código.

La etiqueta <svg> permite definir una imagen dando sus características geométricas. Por ejemplo, para crear un círculo con fondo gris y borde negro escribimos la siguiente etiqueta:

<svg width="30%" height="auto" viewBox="0 0 120 120>
<circle cx="60" cy="60" r="50" stroke="black" stroke-width="4" fill="grey" />
</svg>

Produce esta imagen:

Más adelante explicaremos todo el código de este ejemplo.