Dibujar un círculo en SVG

Para completar esta sencilla tarea nos valdremos de la etiqueta SVG circle. Vamos, que para pintar un circulo en SVG no nos tenemos que comer mucho la cabeza.

Y aprendernos una propiedad que es el atributo r. El cual viene a indicarnos el radio que va a tener el circulo.

<circle r=10/>

Otras tres propiedades que nos vendrán bien serán:

• cx: coordenada X de la posición del circulo.
• cy: coordenada Y de la posición del círculo.
• fill: nos permitirá darle un color a nuestro circulo.

<CIRCLE cx="100" cy="100" fill="green" />

O, para los más puristas, utilizaremos el style para darle el color al circulo:

<CIRCLE cx="100" cy="100" style="fill:green;" />

Y recuerda que para poner el circulo necesitamos de un lienzo. Y, este, su tamaño y color lo delimita la propia etiqueta SVG.

<SVG width="300" height="300">...</SVG>