Formas básicas. SVG. HTML. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

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:

x: abcisa de la esquina superior izquierda del rectángulo
y: ordenada de la esquina superior izquierda del rectángulo
width: anchura del rectángulo
height: altura del rectángulo
rx: radio horizontal de las esquinas redondeadas
ry: radio vertical de las esquinas redondeadas

<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:

cx: abcisa del centro del círculo
cy: ordenada del centro del círculo
r: radio del círculo

<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:

cx: abcisa del centro de la elipse
cy: ordenada del centro de la elipse
rx: radio horizontal de la elipse
ry: radio vertical de la elipse

<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:

x1: abcisa del punto inicial de la línea
y1: ordenada del punto inicial de la línea
x2: abcisa del punto final de la línea
y2: ordenada del punto final de la línea

<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:

points: abcisas y ordenadas de los sucesivos puntos de la polilínea (x1,y1 x2,y2 x3,y3 ...)

<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 coordenadas).

<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="10 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:

points: abcisas y ordenadas de los sucesivos puntos del polígono (x1,y1 x2,y2 x3,y3 ...). El último punto se une automáticamente con el primero.

<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, de acuerdo con el esquema siguiente:

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="120" width="100" height="100" fill="Gold" />
  <rect x="120" y="10" width="100" height="100" fill="Gold" />
  <rect x="120" y="120" 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="120" width="100" height="100" fill="Gold" />
  <rect x="120" y="10" width="100" height="100" fill="Gold" />
  <rect x="120" y="120" width="100" height="100" fill="Gold" />
</svg>

Terminación del trazo: stroke-linecap

El atributo stroke-linecap establece la forma de los extremos de los segmentos.

Los posibles valores de este atributo:

butt: recto
round: redondeado (la línea se prolonga debido a la forma redondeada)
square: recto (pero la línea se prolonga como en el caso de la forma redondeada)

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

Esquinas del trazo: stroke-linejoin

El atributo stroke-linejoin establece la forma de los vértices de las líneas quebradas.

Los posibles valores de este atributo:

miter: en punta
round: redondeado
bevel: biselado

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="130" height="130" viewBox="0 0 130 130">
  <polyline points="10,50 65,20 120,50" fill="none"
    stroke-width="20" stroke="RoyalBlue" stroke-linejoin="miter" />
  <polyline points="10,85 65,55 120,85" fill="none"
    stroke-width="20" stroke="RoyalBlue" stroke-linejoin="round" />
  <polyline points="10,120 65,90 120,120" fill="none"
    stroke-width="20" stroke="RoyalBlue" stroke-linejoin="bevel" />
</svg>

Estilo del trazo: stroke-dasharray

El atributo stroke-dasharray establece el patrón de la línea (trazos y huecos) mediante una lista de números o porcentajes.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="260" height="180" viewBox="0 0 260 180">
  <line x1="10" y1="50" x2="250" y2="50"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="20 20" />
  <line x1="10" y1="90" x2="250" y2="90"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40 40" />
  <line x1="10" y1="130" x2="250" y2="130"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40 20" />
  <line x1="10" y1="170" x2="250" y2="170"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40 20 5 20" />
</svg>

Los porcentajes se refieren al espacio de dibujo disponible, no a la longitud de la línea.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="260" height="180" viewBox="0 0 260 180">
  <line x1="10" y1="50" x2="250" y2="50"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="20% 20%" />
  <line x1="10" y1="90" x2="250" y2="90"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40% 40%" />
  <line x1="10" y1="130" x2="250" y2="130"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40% 20%" />
  <line x1="10" y1="170" x2="250" y2="170"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="20% 10% 5% 10%" />
</svg>

Si se escribe un número impar de números, la lista se repite para generar un patrón con un número par de elementos.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="260" height="180" viewBox="0 0 260 180">
  <line x1="10" y1="50" x2="250" y2="50"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="20" />
  <line x1="10" y1="90" x2="250" y2="90"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40" />
  <line x1="10" y1="130" x2="250" y2="130"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="20 10 20" />
  <line x1="10" y1="170" x2="250" y2="170"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="20 10 5" />
</svg>

Desplazamiento inicial del trazo: stroke-dashoffset

El atributo stroke-dashoffset establece la distancia del extremo a la que empieza el patrón. El patrón empieza entonces antes de la línea.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="260" height="180" viewBox="0 0 260 180">
  <line x1="10" y1="50" x2="250" y2="50"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40 40" />
  <line x1="10" y1="90" x2="250" y2="90"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40 40" stroke-dashoffset="10" />
  <line x1="10" y1="130" x2="250" y2="130"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40 40" stroke-dashoffset="20" />
  <line x1="10" y1="170" x2="250" y2="170"
    stroke-width="10" stroke="RoyalBlue" stroke-dasharray="40 40" stroke-dashoffset="40"/>
</svg>

Formas básicas SVG