1. SVG Tutorial
2. SVG Examples
3. A Simple SVG Example
4. Displaying SVG in Web Browsers
5. SVG Icons
6. SVG Coordinate System
7. SVG svg element
8. SVG g element
9. SVG rect element
10. SVG circle element
11. SVG ellipse element
12. SVG line element
13. SVG polyline element
14. SVG polygon element
15. SVG path element
16. SVG marker element
17. SVG text element
18. SVG tspan element
19. SVG tref element
20. SVG textpath element
21. SVG switch element
22. SVG image element
23. SVG a element
24. SVG defs Elements
25. SVG symbol Element
26. SVG use Element
27. SVG and CSS - Cascading Style Sheets
28. SVG Stroke
29. SVG Fill
30. SVG Viewport and View Box
31. SVG Animation
32. SVG Scripting
33. SVG Transformation
34. SVG Gradients
35. SVG Fill Patterns
36. SVG Clip Path
37. SVG Masks
38. SVG Filters

• SVG Circle Video
• Circle Stroke
• Circle Fill

The SVG <circle> element is used to draw circles. Here is a simple example:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>

</svg>

Here is the resulting image:

The circle is centered in cx , cy and has a radius of r. cx, cy and r are attributes of the <circle> element.

SVG Circle Video

If you prefer watching this tutorial as video, here is my SVG circle tutorial video on YouTube:

Circle Stroke

You can set the stroke (outline) of an SVG circle using the SVG stroke style properties. In the first example on this page the stroke was set to the color #006600 which is a darker green color. But you can set more than just the stroke color. You can also set the stroke width using the stroke-width style property. Here is an example:

<circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           fill:#00cc00"/>

Here is how that circle looks:

Notice that the stroke is now wider (thicker) than in the first example shown on this page.

You can also draw the stroke with a dashed line using the stroke-dasharray property. Here is an example:

<circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           stroke-dasharray: 10 5;
           fill:#00cc00"/>

And here is how that looks when rendered:

You can also remove the stroke (outline) of the circle and just have the circle be filled with the fill color. Here is an example of that:

<circle cx="40" cy="40" r="24"
    style="stroke: none;
           fill:#00cc00"/>

Here is how that circle without stroke looks:

Circle Fill

The fill style property controls how the circle is filled. You can choose to have no filling at all by setting the fill property to none. Here is an example of that:

<circle cx="40" cy="40" r="24"
    style="stroke: #00600;
           fill:none"/>

Here is how a circle without fill looks:

You can set the fill color, as you have already seen earlier in this text, using the fill property. Here is an example:

<circle cx="40" cy="40" r="24"
    style="stroke: #660066;
           fill: #00ff00"/>

Here is how the circle looks when rendered:

You can also set the filling to be transparent using the fill-opacity style property. Here is an example that draws two circles, one partly on top of the other and semitransparent.

<circle cx="40" cy="40" r="24"
    style="stroke: #660000;
           fill: #cc0000" />
<circle cx="64" cy="40" r="24"
    style="stroke: #000066;
           fill: #0000cc"
           fill-opacity: 0.5/>

Here is how the circle looks when rendered:

Notice how the blue (right) circle is now semi-transparent inside. To make the stroke semi-transparent too you would have to use the stroke-opacity style property.