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

Formas básicas SVG (IV).-

Polilínea.-

Al igual que la mayoría de las aplicaciones de gráficos vectoriales, mediante código SVG podemos definir también polilíneas, que se definen mediante la sintaxis:

<polyline points="x1,y1 x2,y22 ... xn,yn" style="fill:rgb(r,g,b);stroke:rgb(r,g,b);stroke-width:w"/>

Donde:

• points=”x1, y1 x2,y2 ...xn,yn”, sucesivos puntos de la polilínea. Debe haber por lo menos 2 (línea simple).
  
  
• fill:rgb(r,g,b), color del relleno de la polilínea, en el sistema RGB.
  
  
• stroke:rgb(r,g,b), color del borde de la polilínea, en el sistema RGB.
  
  
• stroke-width:w, ancho del borde de la polilínea, en pixels.
  

Ejemplo:

<svg width="200" height="200">
<polyline points="60,100 180,10020,20" style="fill:rgb(255,120,100);stroke:rgb(0,128,0);stroke-width:1"/>
</svg>

Cuyo resultado tenéis en esta ventana.

Path.-

Los paths o caminos son tal vez las figuras más versátiles que nos ofrece SVG, aunque son también las más complejas, y consisten básicamente un una figura definida por una serie de puntos extremos (vértices), entre cada dos de los cuales se puede definir una línea de diferente naturaleza (rectas, curvas Bèzier, arcos elípticos, etc.).

La sintaxis general de este tipo de elementos es la siguiente:

<path d="T1x1 y1 T2x2 y2 ... Tnxn yn" style="fill:rgb(r,g,b);stroke:rgb(r,g,b);stroke-width:w"/>

Donde:

• d=”Tixi, yi”, define los sucesivos puntos (xi yi) que van a formar el phat, viniendo determinado su tipo por el valor de la letra Ti. Así nos podemos encontrar:
  
  
  • T=M, punto inicial del path.
  • T=L, línea genérica entre dos puntos (el definido tras L y su anterior).
  • T=H, línea horizontal entre dos puntos.
  • T=V, línea vertical entre dos puntos.
  • T=C, curva entre dos puntos.
  • T=S, curva lisa.
  • T=Q, curva Bèzier cuadrática.
  • T=T, curva de Bèzier alisada.
  • T=A, arco elíptico.
  • T=Z, path cerrado.
    
    
• fill:rgb(r,g,b), color del relleno del espacio interno definido por el path, en el sistema RGB.
  
  
• stroke:rgb(r,g,b), color de las líneas del path, en el sistema RGB.
  
  
• stroke-width:w, ancho del borde de las líneas del path, en pixels.
  

Ejemplo:

<svg width="200" height="200">
 <path d="M44.5 61 L47.5 97 L53.5 138 L158.5141 L151.5 76" style="fill:rgb(192,192,0);stroke:rgb(255,0,0);stroke-width:1"/>
</svg>

Cuyo resultado podemos apreciar en esta ventana.

Un ejemplo de path con curvas sería:

<svg width="200" height="200">
  <path d="M43.5 58 C43.5 58 10.5 111.5 47.5 128 L142.5 128 L118.5 84 C73.75 142.5 111.5 30 111.5 30" style="fill:rgb(128,0,128);stroke:rgb(255,255,64);stroke-width:1"/>
</svg>

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

Y un ejemplo de path cerrado lo tenemos en el siguiente código:

<svg width="200" height="200">
  <path d= "M32.5 55 L162.5 149 L147.5 46 L55.5 140 z" style="fill:rgb(192,192,255);stroke:rgb(0,128,128);stroke-width:1"/>
</svg>

Que podemos contemplar en esta otra ventana. Notad cómo ponemos el letra z al fin al de la instrucción de atributo d, sin valor alguno, para cerrar el path.

Continuará...