Veamos cómo podemos utilizar el SVG para hacer formas geométricas.

 Rectángulo.-

<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px">
  <rect x="25" y="25" width="100" height="100" fill="blue" opacity="0.5" />
  <rect x="50" y="50" rx="20" ry="20" width="100" height="100" fill="red" opacity="0.5" />
  <rect x="75" y="75" width="100" height="100" fill="green" opacity="0.5" />
</svg>
"x" e "y". Desplazamiento del objeto respecto al origen de coordenadas. "width" y "height". Ancho y alto del objeto. "rx" y "ry". Redondean las esquinas del objeto. El resto de atributos añaden propiedades sobre el estilo de la visualización.

Figure 1. rectangulo.svg

Círculo.-
<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px">
  <circle cx="100px" cy="100px" r="50px" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(-20,20)" />
  <circle cx="100px" cy="100px" r="50px" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(10,-20)"/>
  <circle cx="100px" cy="100px" r="50px" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(40,40)" />
</svg>

"cx" e "cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica el centro del objeto. "r". Radio del objeto. El resto de atributos añaden propiedades sobre el estilo de la visualización.

Figure 2. circulo.svg

Elipse.-
<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px">
  <ellipse cx="96.5" cy="143" rx="59.5" ry="41" style="fill:rgb(255,229,242); stroke:rgb(242,0,125); stroke-width:3"/>
</svg>

"cx" y "cy". Desplazamiento del objeto respecto al origen de coordenadas el cual indica el centro del objeto. "rx" y "ry". Definen el radio horizontal y vertical de la elipse.

Figure 3. elipse.svg

Línea.-

<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px">
  <line x1="10" y1="10" x2="150" y2="150" stroke="red" stroke-width="2" />
</svg>
"x1" y "y1". Coordenadas del inicio de la línea. "x2" y "y2". Coordenadas del fin de la línea.

Figure 4. linea.svg

La continuidad de las líneas pude ser modificada gracias al atributo de estilo "stroke-dasharray". Con este atributo podemos definir la línea como una sucesión de tramos visibles e invisibles. El atributo "stroke-dasharray" permite definir una lista de números separados por comas de forma que por parejas nos marcan la continuidad de la línea.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
<svg xmlns="http://www.w3.org/2000/svg " width="200px" height="200px">
  <line x1="10" y1="10" x2="150" y2="150" stroke="red" stroke-width="8" stroke-dasharray="18, 4, 4, 18" />
</svg>

Figure 5. linea-dash.svg