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

16.2. Etiqueta SVG. Coordenadas. Viewport y viewbox

Antes de ver los elementos para dibujar elementos geométricos con SVG debemos describir la etiqueta SVG y entender el sistema de coordenadas, el viewport y el viewBox.

Etiqueta SVG

Esta etiqueta es el contenedor del código de los distintos elementos que forman la imagen, además define las dimensiones de la imagen o lienzo (viewport en inglés), también se puede definir la caja de visualización (viewBox en inglés), y otros elementos genéricos (style, visibility, hidden, etc).

A continuación de la etiqueta de inicio <svg se pueden escribir varios atributos, como las dimensiones del lienzo (viewport) mediante width y height, el viewBox, y algunos más, la etiqueta se cierra con >, y a continuación van las etiquetas de los elementos que describen la imagen (circle, line, ...), y se debe acabar con la etiqueta de cierre </svg>. Más adelante veremos el significado del viewBox. De momento, veremos este ejemplo sencillo con un círculo.

<svg width="120" height="120">

<circle cx="60" cy="60" r="50" stroke="black" stroke-width="4" fill="grey" />

</svg>

El sistema de coordenadas de SVG es similar al que vimos para Canvas.

El origen de coordenadas es el punto (0,0) los valores de la coordenada x van hacia la derecha y los valores de la coordenada y van hacia abajo (al contrario que en los sistemas de coordenadas tradicionales).

Al situar un objeto lo haremos respecto al origen, por ejemplo, en la figura el centro del círculo gris está en la posición (60,60). El tamaño del lienzo (viewport) de SVG (representado por el color anaranjado) es, en este caso, de 120 de ancho y 120 de alto.

Por lo tanto, la instrucción:

circle 60,60, 30

Dibujará un círculo con su centro en el punto (60,60) y un radio de 30.

Si no se especifican unidades se asume que son pixeles, se pueden utilizar otro tipo de unidades absolutas y relativas, como em, ex, px, pt, pc, cm, mm, in, %.

Los gráficos SVG son elementos inline, es decir, se colocan uno al lado del otro, sin salto de línea.