By Matt Visiwig Oct 31, 2022
There are three ways to draw circles in SVG:
Below is the code for drawing the same exact circle, using each method.
<svg viewBox="0 0 500 250"> <circle cx="250" cy="125" r="120"/> <ellipse cx="250" cy="125" rx="120" ry="120"/> <path d="M370 125c0 66.3-53.7 120-120 120s-120-53.7-120-120S183.7 5 250 5s120 53.7 120 120Z"/> </svg>
<path> element handles complex shapes, but is hard for humans to read and write. Especially when curves are involved as demonstrated by the code above. Therefore, we will concentrate on the first two methods of creating circles:
Most SVG shape elements like
Y attributes to plot the top-left point of the shapes along the viewBox coordinate system. Uniquely, both the
<ellipse> elements use
CY attributes to plot the middle of the circular shape along the viewBox coordinate system.
<ellipse> elements can be styled using the typical style attributes: fill, stroke, and opacity.
<svg viewBox="0 0 500 250"> <circle fill="purple" stroke="blue" stroke-width="15" fill-opacity=".5" cx="250" cy="125" r="120" /> </svg>
Let’s talk about how these two elements differ.
So far, we addressed how the circle and ellipse elements are similar. And the two elements are nearly identical. Outside of their element keyword, the difference is how they handle size.
(left) Circle’s are shapes with edges that are equidistant from it’s center point. Therefore the width and height are always the same and you can set that value through a single
R (radius) attribute.
(right) Ellipses on the other hand can have variation in the width and height, therefore they have a vertical and horizonal radius with the
While there are three ways to draw circles in SVG, we showed the two common ways to hand code circles in SVG:
<ellipse>. Both elements are unique in that they have
CY attributes for specifying their coordinates based on the center point of the shape. But they also differ in how they handle size based on their single or dual radius.
Bump Set Creative © 2017 - 2023