El formato gráfico SVG (V)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Formas básicas SVG (I).-

Una vez definida la estructura básica de nuestro documento, podemos empezar a definir formas geométricas básicas en el gráfico. SVG permite la definición de las formas comunes a casi todos los programas de gráficos vectoriales, a partir de las cuales podemos obtener las formas gráficas más complejas.

En la mayor parte de las formas básicas podemos distinguir dos elementos componentes principales:

• Borde (stroke): define una línea de contorno alrededor de la forma.
• Relleno (fill): define el contenido interior de la forma.

Ambos elementos poseen una serie de propiedades de estilo, que estudiaremos en lo que sigue.

Vamos a ver una a una las formas básicas en un gráfico SVG.

Rectángulo.-

Si abrimos un nuevo gráfico en WebDraw, para dibujar un rectángulo basta con seleccionar, en vista Canvas, la herramienta correspondiente en la barra de herramientas. Una vez dibujado el rectángulo en el lienzo de la forma habitual, en la parte superior de la ventana disponemos de las paletas de colores para el fondo y los bordes de la figura. En nuestro caso el resultado es este rectángulo de fondo verde y bordes negros.

Si ahora pulsamos sobre el gráfico con el botón derecho del ratón y seleccionamos “Ver origen", tendremos delante el código SVG generado, que es el siguiente (quitando las instrucciones de cabecera):

Vemos que el rectángulo se define mediante la sintaxis (notad la barra de cierre de la etiqueta):

<rect atributo="valor" atributo="valor" ... style="atributo:valor;atributo:valor..."/>

Donde los principales atributos pueden ser:

• x="n", que define la posición del rectángulo respecto al borde izquierdo del lienzo, y donde n puede ser un número entero de pixels o un porcentaje del ancho del lienzo.
  
  
• y="n", que define la posición del rectángulo respecto al borde superior del lienzo, y donde n puede ser un número entero de pixels o un porcentaje del ancho del lienzo.
  
  
• width="n", que fija la anchura del rectángulo, donde n puede ser un número entero de pixels o un porcentaje del ancho del lienzo.
  
  
• height="n", que fija la altura del rectángulo, donde n puede ser un número entero de pixels o un porcentaje del ancho del lienzo.
  
  
• style="atributo:valor;atributo:valor;...", que define unos estilos CSS concretos para propiedades del rectángulo. Estas propiedades y sus respectivos valores pueden ser:
  
  
  • fill:color, que define el color de fondo del rectángulo.
    
    
  • stroke:color, que define el color del borde del rectángulo.
    
    
  • stroke-width:n, que define el ancho del borde, en pixels. Si no deseamos que aparezca el borde, basta con establecer stroke:0.
    
    
  • Fill-opacity:p1, stroke-opacity:p2, que definen el grado de opacidad del interior del rectángulo y del borde del mismo, y cuyos valoesr, p1 y p2, puede variar entre 0 y 1.

La definición de colores se puede hacer en el sistema hexadecimal (#RRGGBB), en el sistema RGB. Rgb(r,g,b) o mediante nombres de color web estándares. Ejemplos: stroke:#003366, stroke:rgb(0,100,125, stroke:red.

En cuanto a la opacidad, los valores de la escala se corresponden con:

0 (totalmente transparente).....0.5 (semi-transparente).....1 (totalmente opaco)

Un ejemplo lo tenemos en el siguiente código:

<svg width="200" height="200">
  <rect x="52" y="56" width="92" height="89" style="fill:rgb(255,255,64);stroke:rgb(128,0,128);stroke-width:1;fill-opacity:0.3;stroke-opacity:0.6;"/>
</svg>

Cuyo resultado tenéis en esta ventana.

También es posible definir el grado de opacidad para todo el el rectángulo, asignando un valor para la proiedad opacity, como por ejemplo:

<svg width="200" height="200">
  <rect x="54" y="66" width="88" height="63" style="fill:rgb(255,255,64);stroke:rgb(128,0,128);stroke-width:1;opacity:0.2"/>
</svg>

El gráfico resultante lo tenéis en esta ventana.

Una variación de esta forma es el rectángulo de esquinas redondeadas, que se define mediante  los atributos rx y ry de la etiqueta rect, que nos van a fijar el rario de curvatura horizontal y vertical del rectángulo.

Ejemplo:

<svg width="200" height="200">
  <rect x="30" y="61" width="144" height="78" rx="20" ry="20" style="fill:rgb(192,192,255);stroke:rgb(0,128,0);stroke-width:1"/>
</svg>

Que podéis visualizar en esta ventana.

A mayor valor de rx y ry, mayor redondez tendrán los bordes del rectángulo. Y para obtener bordes límpios y simétricos, basta con establecer el mismo valor para ambas curvaturas.