Formas básicas SVG

En esta lección se tratan las formas básicas SVG y su principales atributos. La etiqueta principal de SVG, la etiqueta <svg>, se comenta en la lección SVG. Algunas formas más avanzadas se comentan en la lección Formas avanzadas SVG.

Formas básicas

Las formas básicas SVG son el rectángulo <rect />, el círculo <circle />, la elipse <ellipse />, la línea <line />, la polilínea <polyline /> y el polígono <polygon />.

Rectángulo: <rect />

La etiqueta <rect /> dibuja un rectángulo.

Los atributos principales propios de <rect /> son:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="120" height="100" viewBox="0 0 120 100">
<rect x="10" y="10" width="100" height="80"
fill="RoyalBlue" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="120" height="100" viewBox="0 0 120 100">
<rect x="10" y="10" width="100" height="80" rx="20" ry="20"
fill="RoyalBlue" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="120" height="100" viewBox="0 0 120 100">
<rect x="10" y="10" width="100" height="80" rx="40" ry="20"
fill="RoyalBlue" />
</svg>

Círculo: <circle />

La etiqueta <circle /> dibuja un círculo.

Los atributos principales propios de <circle /> son:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50"
fill="RoyalBlue" />
</svg>

Elipse: <ellipse />

La etiqueta <ellipse /> dibuja una elipse.

Los atributos principales propios de <ellipse /> son:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="80" viewBox="0 0 140 80">
<ellipse cx="70" cy="40" rx="60" ry="30"
fill="RoyalBlue" />
</svg>

Línea: <line />

La etiqueta <line /> dibuja una línea.

Los atributos principales propios de <line /> son:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="130" height="80" viewBox="0 0 130 80">
<line x1="10" y1="10" x2="120" y2="70"
stroke-width="3" stroke="RoyalBlue" />
</svg>

Polilínea: <polyline />

La etiqueta <polyline /> dibuja un polígono abierto.

Los atributos principales propios de <polyline /> son:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<polyline points="10,70 20,40 40,100 70,10 100,100 120,40 130,70"
fill="none" stroke-width="3" stroke="RoyalBlue" />
</svg>

Para separar valores se pueden utilizar espacios o comas. Las comas se suelen escribir entre la abcisa x de la ordenada y, para ayudar a distinguir unos puntos de otros. Los ejemplos siguientes son válidos, pero no se aconseja escribir siguiendo su estilo (sin comas o con comas separando los pares de cooredandas).

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<polyline points="10 70 20 40 40 100 70 10 100 100 120 40 130 70"
fill="none" stroke-width="3" stroke="RoyalBlue" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<polyline points="0 70 , 20 40 , 40 100 , 70 10 , 100 100 , 120 40 , 130 70"
fill="none" stroke-width="3" stroke="RoyalBlue" />
</svg>

Si se rellena la polilínea con algún color, el último punto se une automáticamente con el primero para crear una superficie cerrada, pero esa última línea no se dibuja.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<polyline points="10,70 20,40 40,100 70,10 100,100 120,40 130,70"
fill="Peru" stroke-width="3" stroke="RoyalBlue" />
</svg>

Para que se dibuje todo el contorno de la figura, se puede hacer coincidir el último punto con el primero, pero el resultado no es perfecto porque los puntos inicial y final no están realmente unidos. Para obtener una figura cerrada perfecta, se debe utilizar <polygon />.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<polyline points="10,70 20,40 40,100 70,10 100,100 120,40 130,70 10,70"
fill="Peru" stroke-width="3" stroke="RoyalBlue" />
</svg>

Polígono: <polygon />

La etiqueta <polygon /> dibuja un polígono cerrado.

Los atributos principales propios de <polygon /> son:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<polygon points="10,10 30,100 110,100 130,50"
fill="Peru" stroke-width="3" stroke="RoyalBlue" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<polygon points="10,70 20,40 40,100 70,10 100,100 120,40 130,70"
fill="Peru" stroke-width="3" stroke="RoyalBlue" />
</svg>

Atributos de presentación SVG

Algunos atributos de presentación de las formas SVG son stroke, stroke-width, fill, ...

Color de relleno: fill

El atributo fill establece el color de relleno de las figuras cerradas.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50"
fill="Gold" />
</svg>

Color del trazo: stroke

El atributo stroke establece el color del trazo.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="130" height="130" viewBox="0 0 130 130">
<line x1="10" y1="10" x2="120" y2="120"
stroke-width="10" stroke="RoyalBlue" />
<line x1="10" y1="120" x2="120" y2="10"
stroke-width="10" stroke="Gold" />
</svg>

Grosor del trazo: stroke-width

El atributo stroke-width establece el grosor del trazo.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="130" height="130" viewBox="0 0 130 130">
<line x1="10" y1="10" x2="120" y2="120"
stroke-width="10" stroke="RoyalBlue" />
<line x1="10" y1="120" x2="120" y2="10"
stroke-width="20" stroke="Gold" />
</svg>

Cuando se dibuja un borde a una forma, el trazo se dibuja centrado sobre el borde de la forma. Es decir, la mitad del borde se dibuja por fuera de la forma y la mitad por dentro (en caso de que el grosor sea un número impar, se dibuja más por dentro que por fuera), como muestran los ejemplos siguientes:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="230" height="230" viewBox="0 0 230 230">
<rect x="10" y="10" width="100" height="100" fill="Gold" />
<rect x="10" y="10" width="100" height="100" fill="Gold" />
<rect x="10" y="10" width="100" height="100" fill="Gold" />
<rect x="10" y="10" width="100" height="100" fill="Gold" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="230" height="230" viewBox="0 0 230 230">
<rect x="10" y="10" width="100" height="100" fill="Gold"
stroke-width="10" stroke="black" />
<rect x="10" y="10" width="100" height="100" fill="Gold" />
<rect x="10" y="10" width="100" height="100" fill="Gold" />
<rect x="10" y="10" width="100" height="100" fill="Gold" />
</svg>

Terminación del trazo: stroke-linecap

Por escribir.

Esquinas del trazo: stroke-linejoin

Por escribir.

Estilo del trazo: stroke-dasharray

Por escribir.

Desplazamiento inicial del trazo: stroke-dashoffset

Por escribir.