Círculos y elipses

SVG nos permite crear formas circulares o elípticas de una forma muy sencilla, con dos etiquetas SVG que son muy similares pero tienen algunos matices y diferencias:

Vamos a ver como podemos utilizarlas y personalizarlas.

El elemento <circle>

Como su propio nombre indica, la etiqueta <circle> nos permite crear círculos en nuestro archivo SVG. La etiqueta tiene varios atributos que permiten establecer su radio o las coordenadas de posición. Ten en cuenta que a diferencia del rectángulo, donde indicabas la posición de su esquina superior-izquierda, en este caso, lo que posicionamos es el centro del círculo, mediante los atributos cx (en horizontal) y cy (en vertical):

Luego, con el atributo r establecemos el radio, es decir, el tamaño del círculo desde su punto central hasta el exterior.

Círculos SVG

Veamos un ejemplo, aplicado a un SVG que tiene un tamaño de 275x275 píxels y un viewbox de 100x100. En su interior, añadiremos el elemento <circle>:

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <circle cx="50" cy="50" r="25" fill="indigo" />
</svg>

Observa que hemos indicado:

• 📏 Una posición en x (horizontal) de 50, o sea, el punto central del círculo está justo en la mitad.
• 📏 Una posición en y (vertical) de 50, osea, nuevamente, en vertical también está centrado.
• 📐 Un radio r de 25, que determinará el tamaño del círculo.
• 🎨 Rellenamos la figura con el atributo fill a indigo.

Observa ahora la modificación sobre el ejemplo anterior:

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <circle cx="50" cy="50" r="25" fill="none" stroke="indigo" />
</svg>

• 🎨 Hemos modificado el atributo fill a none, por lo que el círculo no tiene relleno.
• 👨‍🎨 Hemos añadido el atributo stroke a indigo, ahora el círculo tiene un borde o trazo de color.

El elemento <ellipse>

Por otro lado, quizás nos pueda interesar crear formas que no sean estrictamente circulares, sino ovaladas o elípticas. Para ello, utilizaremos la etiqueta <ellipse>, que funciona exactamente igual que el círculo, pero añadimos unos atributos rx y ry que reemplazaran el atributo r anterior. En este caso, podemos dar un radio en horizontal y un radio en vertical, permitiendo crear estas figuras:

Ten en cuenta que de indicar uno de los valores rx o ry a 0, hará que la elipse no se vea.

Elipses SVG

Veamos los ejemplos anteriores, adaptados a elipses u óvalos:

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <ellipse cx="50" cy="50" rx="25" ry="10" fill="indigo" />
</svg>

• 📐 Observa que hemos indicado un atributo rx a 25 y un atributo ry a 10.

En este nuevo ejemplo, hacemos una elipse pero con un trazo exterior y sin relleno, sólo que hemos aumentado su radio vertical y disminuido su radio horizontal, justo al revés que el ejemplo anterior:

<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
  <ellipse cx="50" cy="50" rx="10" ry="25" fill="none" stroke="indigo" />
</svg>

En el caso de indicar un valor rx y ry iguales, se comportaría como un círculo. Sin embargo, la etiqueta <ellipse> no tiene el atributo r.