Tech and Media Labs
This site uses cookies to improve the user experience.




SVG circle element

Jakob Jenkov
Last update: 2014-08-08

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.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC