Formas - Shapes

Las formas se posicionan en la ventana gráfica mediante las coordenadas x e y. Se describen mediante etiquetas XML como <rect>, <circle>, <ellipse>, <path>, <polygon> y otras. Se crean gráficos SVG colocando estas etiquetas dentro del elemento <svg>. Cada una admite atributos que configuran su posición en la ventana gráfica y propiedades específicas para cada forma, como radios, vértices o dimensiones.

Se puede dibujar un círculo en SVG usando el elemento <circle> y al menos el atributo r (radio). Si no se proporcionan otros atributos, solo se verá el cuarto inferior derecho del círculo, ya que las coordenadas predeterminadas para su centro serán (0,0).

Puedes colocar un círculo en cualquier lugar, dentro o fuera de la ventana gráfica, proporcionando valores explícitos para los atributos cv y cy, como se muestra arriba. A diferencia de CSS, SVG no declara unidades. Los valores se expresan en números absolutos y, por defecto, son píxeles (aunque puedes cambiarlo). El siguiente SVG coloca círculos de diferentes radios en distintas posiciones de la ventana gráfica.

<svg width="400" height="300">
    <circle r="25"></circle>
    <circle cx="250" cy="200" r="50"></circle>
    <circle cx="50" cy="50" r="20"></circle>
    <circle cx="400" cy="300" r="50"></circle>
</svg>

El resultado se muestra en la siguiente imagen:

Puede obtener el mismo resultado utilizando DOM o D3, como se muestra en el siguiente código (ver `SVG-with-D3/2- circle.html):

SVG circle using D3

Por supuesto, este código podría ser mucho más pequeño si hubiéramos usado las funciones de enlace de datos de D3 o incluso bucles JavaScript estándar, pero se mantuvo la duplicación de código para que pueda compararse con la versión XML. La carpeta SVG-with-D3/ contiene ejemplos como este para todos los ejemplos de código SVG XML descritos en esta sección.