Formas SVG

En esta lección se tratan las formas SVG y su principales atributos. La etiqueta principal de SVG, la etiqueta <svg>, se comenta en la lección 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.

Forma general: <path />

La forma general SVG es el camino <path />. La etiqueta <path /> permite dibujar cualquier tipo de curva.

El atributo principal propio de <path /> es:

A continuación se comenta cómo especificar los diferentes tipos de curvas que se pueden dibujar entre los puntos: segmentos, curvas elípticas, curvas de Bézier cúbicas y curvas de Bézier cuadráticas.

Segmentos

Un salto desplaza el cursor sin dibujar ningún trazo. Los segmentos dibujan un segmento recto desde la posición anterior del cursor. Saltos y segmentos se pueden definir de forma absoluta (coordenadas del cursor) o relativa (desplazamiento entre posiciones del cursor).

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<path d="M 10,70 L 30,40 L 70,100 L 130,10"
fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<path d="m 10,70 l 20,-30 l 40,60 l 60,-90"
fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="90" viewBox="0 0 140 90">
<path d="M 10,80 H 130 V 10 H 60 V 40"
fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="90" viewBox="0 0 140 90">
<path d="m 10,80 h 120 v -70 h -70 v 30"
fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>

Arcos elípticos

Un arco elíptico dibuja una curva elíptica desde la posición anterior del cursor hasta la posición siguiente. Como hay infinitas curvas elípticas que pasan por dos puntos, se necesitan parámetros adicionales adicionales para especificar la curva deseada. La expresión general del arco es la siguiente:

siendo:

Notas:

Puesto que hay dos elipses que cumplen las condiciones anteriores (pasan por los dos puntos, tienen esos semiejes y esa inclinación), hay cuatro posibles arcos, que se especifican con dos parámetros:

En los ejemplos siguientes se dibujan los cuatro arcos posibles para unos semiejes e inclinación dados:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="300" height="200" viewBox="0 0 300 200">
  <path d="M 80,70 A 70,30 0 0,0 150,40"
    fill="none" stroke="RoyalBlue" stroke-width="3" />
  <path d="M 80,70 A 70,30 0 0,1 150,40"
    fill="none" stroke="red" stroke-width="3" />
  <path d="M 80,70 A 70,30 0 1,0 150,40"
    fill="none" stroke="green" stroke-width="3" />
  <path d="M 80,70 A 70,30 0 1,1 150,40"
    fill="none" stroke="gold" stroke-width="3" />
</svg>

Curvas de Bézier cúbicas

Por escribir.

Curvas de Bézier cuadráticas

Por escribir.

Cerrar caminos

Al cerrar una curva se une el último punto con el primero.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="140" height="110" viewBox="0 0 140 110">
<path d="M 10,70 L 30,40 L 70,100 L 130,10 L 130,70 Z"
fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>

Caminos compuestos

Por escribir.