Dibujando un rectangulo
Crear un rectangulo con el lenguaje SVG es una cosa bastante fácil ya que el rectangulo es una delas figuras estandar de dicho lenguaje. Para ello necesitaremos utilizar la etiqueta <rect/>
Los dos primeros atributos importantes para nuestro ejemplo son la altura y ancho del rectangulo. Para ello utilizaremos los atributos de rect: width y height.
<rect width="200" height="100" fill="red"/>
Otra cosa que podemos hacer es la de posicionar el rectangulo dentro del lienzo. Para ello tendremos que definir las coordenadas X,Y del lienzo. El nombre de los atributos es el mismo: X e Y.
<rect x="50" y="50" width="200" height="100" fill="red"/>
Por último vamos a darle color a la cosa. En este caso, utilizaremos el atributo fill, indicandole el color que queremos usar (rojo en este caso):
<rect fill="red">
Aunque podríamos darle el color mediante un estilo y el atributo style:
<rect style="fill:red;"/>
