Dibujando múltiples lineas en SVG

Mediante este ejemplo intentamos explicar el uso de las polilíneas en SVG. Una polilínea no deja de ser la línea que se traza entre una sucesión de puntos.

La principal diferencia con el polígono es que, en el caso del polígono, indicamos los vértices y automáticamente se traza una línea desde el último punto al primero.

El reto

Para explicar este ejemplo, planteamos un reto artístico muy simple.

Este reto consiste en dibujar una especie de casa con una cruz en su parte inferior (en el cuadrado) sin pasar dos veces por la misma línea. El dibujo final es el siguiente:

Básicamente, la solución se basa en un conjunto de puntos, siempre y cuando no tengamos el mismo par de puntos consecutivos.

Estructura básica del documento SVG

Puesto en SVG, lo primero que tenemos que hacer es definir nuestro documento. Para ello nos bastará con definir la etiqueta svg de la siguiente forma:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
</svg>

Como vemos, el documento empieza con una declaración XML, ya que los documentos SVG no dejan de ser documentos XML.

Dibujar con polyline

Para poder realizar el trazado de nuestro dibujo utilizaremos la etiqueta polyline. En esta etiqueta lo único que hay que indicar es, mediante el atributo points, la lista de puntos por donde queremos que se trace la línea.

Quedándonos el siguiente código:

<polyline
  points="200,200 200,100 250,50 300,100 300,200
      200,100 300,100 200,200 300,200"
/>

Color y grosor de línea

Para el color y el grosor de las líneas nos ayudamos de los atributos stroke (para el color) y stroke-width (para el grosor). Esto se repite para el resto de figuras básicas: line, circle, …

Quedándonos la siguiente línea de código:

<polyline
  fill="white"
  stroke="blue"
  stroke-width="1"
  points="200,200 200,100 250,50 300,100 300,200
      200,100 300,100 200,200 300,200"
/>