Dibujar una elipse en SVG

Si queremos dibujar una elipse en SVG deberemos de utilizar la etiqueta ellipse. En este caso lo que vamos a hacer es dibujar una elipse de 50x100 de color rojo.

La forma de configurarla es muy sencilla. En primer lugar lo que hay que hacer es posicionarla en el eje de coordenadas mediante los atributos cx y cy.

<ellipse cx="200" cy="100"/>

Una vez posicionada deberemos de darle un valor de radio de ancho y alto. En este caso utilizaremos los atributos rx y ry. Mediante rx especificamos el radio horizontal de la elipse y mediante ry el radio vertical.

<ellipse rx="100" ry="50"/>

Lo último que nos quedará será el rellenar la elipse del color elegido. Rojo en nuestro caso. Para ello utilizamos la propiedad de pintado fill dandole el nombre en ingles del color.

<ellipse fill="red"/>

El código final quedaría de la siguiente forma:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">

<ellipse cx="200" cy="100" rx="100" ry="50" fill="red"/>

</svg>