Ultima revisión 30/10/2012

Shapes:Formas básicas de los gráficos SVG

A continuación pasamos a describir las formas básicas que se pueden crear en los gráficos vectoriales SVG. Como veréis más adelante se puede realizar cuadrados y rectángulos con o sin bordes redondeados, círculos o elipses, líneas y polilíneas, e incluso, estrellas y polígonos.

Rectángulos no redondeados

El elemento rect es el encargado de hacer esta tarea.

x e y posicionan el rectángulo para empezar a dibujarlo.
width y height establecen el ancho y alto respectivamente.
fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS.
stroke: Establece el color del borde.
stroke-width: Establece el tamaño del borde.


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <!-- rectángulo transparente con borde de color azul y ancho de borde 2 píxeles -->
   <rect x="1" y="1" width="198" height="198" fill="none" stroke="blue" stroke-width="2" />
   <!-- rectángulo amarillo con borde de color azul oscuro y ancho de borde 10 píxeles -->
   <rect x="50" y="50" width="100" height="100" fill="yellow" stroke="navy" stroke-width="10" />
</svg>

Rectángulos redondeados

El elemento rect es el encargado de hacer esta tarea.

x e y posicionan el rectángulo para empezar a dibujarlo.
width y height establecen el ancho y alto respectivamente.
fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS.
stroke: Establece el color del borde.
stroke-width: Establece el tamaño del borde.


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="1" y="1" width="198" height="198" fill="none" stroke="blue" stroke-width="2"/>
    <rect x="50" y="50" width="100" height="100" rx="25" fill="red" />
    <g transform="translate(10 50) rotate(-30)">
        <rect x="0" y="0" width="100" height="50" rx="25" fill="none" stroke="black" stroke-width="10" />
    </g>
</svg>

El elemento g se utiliza para agrupar formas. Una vez agrupados puedes transformar el conjunto de las formas como si se tratara de una sola forma.

La lista de funciones es prácticamente que las mismas de CSS3 y funcionan básicamente igual de en las hojas de estilo.

La explicación de las mismas lo podéis encontrar en Transformaciones en gráficos vectoriales.

Círculos

El elemento circle es el encargado de hacer esta tarea.

cx e cy posicionan el centro del círculo en el tapiz.
r es el radio del círculo.
fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS.
stroke: Establece el color del borde.
stroke-width: Establece el tamaño del borde.


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- rectángulo transparente con borde de color gris y ancho de borde 2 píxeles -->
    <rect x="1" y="1" width="198" height="198" fill="none" stroke="gray" stroke-width="2"/>
    <!-- Círculo relleno de color rojo con borde de color negro y ancho de borde 10 píxeles -->
    <circle cx="100" cy="100" r="50" fill="red" 
            stroke="black" stroke-width="10" />
</svg>

Elipses

El elemento ellipse es el encargado de hacer esta tarea.

cx e cy posicionan el centro de la elipse en el tapiz.
r es el radio de la elipse.
fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS.
stroke: Establece el color del borde.
stroke-width: Establece el tamaño del borde.


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="1" y="1" width="198" height="198" fill="rgb(248,248,248)" stroke="#283a64" stroke-width="2" />
    <g transform="translate(100 100)">
        <!-- Círculo relleno de color naranja con borde creado a partir del elemento ellipse -->
        <ellipse rx="50" ry="50" fill="orange" />
    </g>
    <!-- Elipse transparente con borde de rojo y opacidad al 50%. Ancho del borde establecido a 10 píxeles -->
    <ellipse transform="translate(140 50) rotate(30)" rx="25" ry="10" fill="none" stroke="rgba(255,0,10,0.5)" stroke-width="5" />
</svg>

Como se ve en el código, las transformaciones se pueden incluir, o bien en el elemento g, o bien en el propio elemento de forma. También se puede omitir cx y cy y sustituirlo por una transformación translate. Además también podéis asignar los colores en formato RGB, RGBA (con transparencia) y en formato hexadecimal al igual que en CSS3.

Líneas

El elemento ellipse es el encargado de hacer esta tarea.

x1 e y1 son las coordenadas dónde empezar a dibujar en el tapiz.
x2 e y2 son las coordenadas dónde terminar a dibujar en el tapiz.
fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS.
stroke: Establece el color del borde.
stroke-width: Establece el tamaño del borde.


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="1" y="1" width="198" height="198" fill="none" stroke="blue" stroke-width="2" />
    <g stroke="red" >
        <line x1="10" y1="10" x2="190" y2="190" stroke-width="5" />
        <line x1="8" y1="8" x2="192" y2="192" stroke-width="10" stroke="rgba(255,0,0,0.5)" />
        <line x1="190" y1="10" x2="10" y2="190" stroke-width="5" />
        <line x1="192" y1="8" x2="8" y2="192" stroke-width="10" stroke="rgba(215,0,0,0.5)" />
    </g>
</svg>

En este ejemplo hemos aplicado un attributo nuevo a la etiqueta svg. viewBox es para definir el área de visión y, sin entrar en detalles, visualmente, es como un efecto de zoom. Podéis encontrar más información sobre viewBox en el artículo Comprender el atributo viewBox de SVG.

Polilíneas

El elemento poliline es el encargado de hacer esta tarea y define un conjunto de segmentos de líneaS rectas conectadas. Normalmente, los elementos "poliline" definen formas abiertas...

points son el conjunto de coordenadas dónde empieza o termina de dibujar. El primer punto el es inicio, el segundo dibuja una línea entre el primero y el segundo. El tercer punto dibuja una línea entre el anterior, el segundo, y el actual o tercero, ... Y así sucesivamente.
fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS. En este elemento, fill rellenará de color el área comprendida entre el primer y último punto.
stroke: Establece el color del borde.
stroke-width: Establece el tamaño del borde.


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="1" y="1" width="198" height="198" fill="none" stroke="black" stroke-width="2" />
    <polyline fill="rgba(255,128,10,0.5)" stroke="orange" stroke-width="2" 
            points="3,198 3,15 30,15 30,197 45,197 45,105
                60,105 60,197 75,197 75,15 90,15 90,125 197,125 197,198"
/>
</svg>

Polígonos

El elemento polygon es el encargado de hacer esta tarea y define una forma cerrada que consiste de un conjunto de segmentos de líneas rectas conectadas.

points son el conjunto de coordenadas dónde empieza o termina de dibujar. El primer punto el es inicio, el segundo dibuja una línea entre el primero y el segundo. El tercer punto dibuja una línea entre el anterior, el segundo, y el actual o tercero, ... Y así sucesivamente.
fill: Establece el color de relleno que puede ser cualquier color admitido en HTML o CSS. En este elemento, fill rellenará de color el área comprendida entre el primer y último punto.
stroke: Establece el color del borde.
stroke-width: Establece el tamaño del borde.


<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="1" y="1" width="198" height="198" fill="none" stroke="blue" stroke-width="2" />
    <polygon fill="rgba(255,128,10,0.5)" stroke="black" stroke-width="2" 
             points="100,10 40,180 190,60 10,60 160,180" />
    <polygon fill="#a4b8dc" stroke="white" stroke-width="1" 
             points="55,7.5 65.8,13.75 65.8,26.25 55,32.5 44.2,26.26 44.2,13.75" />
</svg>