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:
Etiqueta | Descripción |
---|---|
<circle> |
Crea un círculo en el SVG. |
<ellipse> |
Crea una elípse en el SVG. |
Vamos a ver como podemos utilizarlas y personalizarlas.
<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):
Atributo | Valor por defecto | Descripción | Más info |
---|---|---|---|
r |
0 |
Radio del círculo. | |
cx |
0 |
Coordenadas del centro del círculo en el el eje X. | |
cy |
0 |
Coordenadas del centro del círculo en el el eje Y. | |
pathLength |
none |
Tamaño total del perímetro del círculo. | - |
Luego, con el atributo r
establecemos el radio, es decir, el tamaño del círculo desde su punto central hasta el exterior.
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:
x
(horizontal) de 50
, o sea, el punto central del círculo está justo en la mitad.y
(vertical) de 50
, osea, nuevamente, en vertical también está centrado.r
de 25
, que determinará el tamaño del círculo.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>
fill
a none
, por lo que el círculo no tiene relleno.stroke
a indigo
, ahora el círculo tiene un borde o trazo de color.<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:
Atributo | Valor por defecto | Descripción | Más info |
---|---|---|---|
rx |
auto |
Radio de la elipse en el eje horizontal X. | |
ry |
auto |
Radio de la elipse en el eje vertical Y. | |
cx |
0 |
Coordenadas del centro de la elipse en el el eje X. | |
cy |
0 |
Coordenadas del centro de la elipse en el el eje Y. | |
pathLength |
none |
Tamaño total del perímetro de la elipse. | - |
Ten en cuenta que de indicar uno de los valores rx
o ry
a 0
, hará que la elipse no se vea.
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>
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
yry
iguales, se comportaría como un círculo. Sin embargo, la etiqueta<ellipse>
no tiene el atributor
.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev