SVG Circle
On this page, you can find information about the SVG <circle> shape element, learn to create a circle with it and see an example with some attributes.
Description of the <circle> element
The SVG <circle> element draws a circle from a center point and a radius. The coordinates of the circle's center are set with the cx and cy attributes, and the radius is set with the r attribute.
It is one of the SVG basic shapes, alongside the <ellipse>, <rect>, and <line> elements. Use <circle> whenever you need a perfectly round shape that scales without losing quality, since SVG is vector-based.
Example of the SVG <circle> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Let’s explain the code above:
- The
cxandcyattributes specify the x and y coordinates of the circle’s center. - The
rattribute specifies the radius of the circle. - The
strokeandstroke-widthattributes draw a 5px grey outline, andfillpaints the interior purple.
The cx/cy default gotcha: if you omit cx and cy, they both default to 0, placing the center at the top-left corner of the SVG canvas. Only the bottom-right quarter of the circle then stays visible — the rest is clipped outside the viewport. Always set cx and cy to at least r so the whole circle fits inside the SVG.
Advanced SVG Circle Techniques
While basic SVG circles are great, there are many advanced techniques that you can use to make your SVG circles stand out. Here are a few examples:
Gradients
SVG circles can use gradients to create a smooth transition between colors. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>
</body>
</html>In this example, we have created a gradient that goes from yellow to red. We then use the fill attribute to apply the gradient to our circle.
Shadows
SVG circles can also have shadows to create depth and dimension. The filter must be defined inside a <defs> block (or at least before the element that references it) so the browser can resolve the url(#shadow) reference. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="120" height="120">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
</filter>
</defs>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
</svg>
</body>
</html>Here we define the shadow filter in <defs> and then apply it to the circle with filter="url(#shadow)". The feDropShadow primitive does the work: dx and dy offset the shadow, stdDeviation controls the blur amount, and flood-color sets the shadow color. The filter's x, y, width, and height enlarge the filter region to 140% so the offset, blurred shadow is not clipped at the edges of the default filter box.
Animations
Finally, SVG circles can also be animated to create interactive experiences for your users. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle id="myCircle" cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
</circle>
</svg>
</body>
</html>In this example, we have created a green circle that moves when clicked. We use the <animate> element to define the animation and target the property to change with the attributeName attribute.
Note:
<animate>is part of SMIL, whose browser support is patchy and has been deprecated in the past in some engines. For production work, CSS animations or JavaScript (for example the Web Animations API) are usually a more reliable choice.
Attributes
The SVG <circle> element also supports the Global Attributes and Event Attributes.
| Attribute | Description |
|---|---|
| cx | The x-axis coordinate of the circle’s center. Defaults to 0. |
| cy | The y-axis coordinate of the circle’s center. Defaults to 0. |
| r | The radius of the circle. A value lower than or equal to zero disables the rendering of the circle. |
| stroke | The color of the circle’s outline. |
| stroke-width | The width of the circle’s outline, in user units. |
| fill | The color used to paint the interior of the circle. |
| pathLength | Specifies the total length for the path, in user units (SVG attribute names are case-sensitive). |
Circles also accept the common SVG presentation attributes: fill-opacity and stroke-opacity control the transparency of the fill and outline, and stroke-dasharray turns a solid outline into a dashed one (for example stroke-dasharray="10 5").
The <circle> element is closely related to the other SVG basic shapes. See SVG <ellipse> for ovals with two independent radii, and SVG <rect> for rectangles and rounded rectangles.