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

Formas básicas SVG (II).-

Continuamos estudiando las formas básicas.

Línea.-

Si volvemos a WebDraw y, seleccionando la herramienta línea, dibujamos una sobre un lienzo nuevo, obtendremos algo similar a lo que tenéis en esta ventana.

Cuyo código generador es del tipo:

<svg width="200" height="200">
  <line x1="48" y1="157" x2="148" y2="44" style="stroke:rgb(0,0,255);stroke-width:2"/>
</svg>

Vemos pués que la etiqueta <line> es la encargada de generar líneas en los gráficos SVG. Siendo su sintaxis general del tipo:

<line x1=”xp1” y1=”yp1” x2=”xp2” y2=”yp2” style=”stroke:rgb(r,g,b);stroke-width:w”/>

Donde los principales atributos pueden ser:

• x1, y1, coordenadas del punto P1 de inicio de la línea.
  
  
• x2, y2, coordenadas del punto P2 de fin de la línea.
  
  
• stroke:rgb(r,g,b), color de la línea en el sistema RGB.
  

Observamos que las líneas no definen en los estilos ningún atributo fill, lo que quiere decir que las líneas no tienen borde. A veces, al usar programas gráficos, nos aparecerá este atributo, con un color RGB, pero es sólo por mecánica general, no por utilidad, pudiendo eliminarse del código sin problemas.

El ancho de la línea puede ser menor que 1, consiguiéndose con ello líneas finas.

Ejemplo:

<svg width="200" height="200">
  <line x1="62" y1="146" x2="148" y2="35" style="stroke:rgb(0,128,0);stroke-width:0.5"/>
</svg>

Cuyo resultado tenéis en esta ventana.

El elemento line admite otras propiedades de estilo, entre las que cabe destacar la opacidad, definida de forma análoga a como se hace en los rectángulos:

<svg width="200" height="200">
  <line x1="34" y1="42" x2="166" y2="163" style="stroke:rgb(0,0,255);stroke-width:2;opacity:0.2"/>
</svg>

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

Círculo.-

Los círculos SVG se definen mediante la etiqueta <circle>, cuya sintaxis general es del tipo:

<circle cx="cx" cy="cy" r="r" style="fill:rgb(r,g,b);stroke:rgb(r,g,b);stroke-width:w"/>

Donde:

• cx, cy, coordenadas centro del círculo.
  
  
• r, radio del círculo (r) en pixels.
  
  
• fill:rgb(r,g,b), color del relleno del círculo, en el sistema RGB.
  
  
• stroke:rgb(r,g,b), color de la línea en el sistema RGB.
  
  
• stroke-width:w, ancho del borde del círculo, en pixels.
  

Ejemplo:

<svg width="200" height="200">
  <circle cx="98" cy="102.5" r="72" style="fill:rgb(0,192,0);stroke:rgb(255,128,255);stroke-width:10"/>
</svg>

Que nos da este bonito círculo.

Y como en todas las figuras anteriores, también podemos aplicar a nuestros círculos otras propiedades de estilo, como la opacidad:

<svg width="200" height="200">
 <circle cx="98" cy="102.5" r="72" style="fill:rgb(0,192,0);opacity:0.4"/>
</svg>

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