SVG basics: drawing circles and ovals

By Matt Visiwig Oct 31, 2022

There are three ways to draw circles in SVG:

1. The SVG <circle> element
2. The SVG <ellipse> element
3. The SVG <path> element

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>

The 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: <circle> and <ellipse>.

Circle and ellipse coordinates

Most SVG shape elements like <rect> have X and Y attributes to plot the top-left point of the shapes along the viewBox coordinate system. Uniquely, both the <circle> and <ellipse> elements use CX and CY attributes to plot the middle of the circular shape along the viewBox coordinate system.

Styling circle and ellipse elements

Both the <circle> and <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.

The width and height of circular SVG elements

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 RX and RY attributes.

What we learned about SVG circles and ellipses

While there are three ways to draw circles in SVG, we showed the two common ways to hand code circles in SVG: <circle> and <ellipse>. Both elements are unique in that they have CX and 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.