<circle />

Objective: Learn to draw, position and style circles plus learn the basic SVG style properties.

The circle element

<circle cx="100"cy="100" r="50"></circle>

<circle> ... </circle> The full rectangle element with open and closing tags.

3.1 Construction Attributes

The circle has three layout attributes you must know and remember:

cx Circle center position on the x-axis

cy Circle center position on the y-axis

r The radius of the circle.

3.2 Style attributes

This lesson introduces the three most important style properties in the SVG attribute syntax. You must remember and be able to manipulate these.

stroke="colour" The colour of the line of an object. This can be a named colour, an HTML hex color. Eg: #aabbcc or an RGB colour. Eg: rgb(0,100,150)

stroke-width="2" The width of the line around the object. The default unit is pixels.

fill="colour" The colour that fills an object interior area. It uses the same statements as stroke.

The most powerful style attribute value in SVG is "none". EG:

fill="none"

stroke="none"

There are many other styling attributes that can be applied. These will be handled in a separate lesson. Right now learn and practice the "big three".

3.3 Markup examples

 This first example uses full SVG attributes to define the colour and stroke of the circle. Note that named colours can be used.

<circle 
    cx="200" 
    cy="200" 
    r="100" 
    stroke="black" 
    stroke-width="5" 
    fill="white">
</circle>

 This example uses the style attribute to define the colour and stroke of the circle using CSS-like property values. It also uses self closing  /> rather than the full closing element.

<circle cx="200" cy="200" r="100" 
    style="stroke:rgb(0,0,0); stroke-width:5; fill:rgb(255,255,255);" />

SVG Editor

3.4  Exercises

1. Create a single circle in the center of the viewBox with 100px radius. (Circle basics)
2. Create four circles, one in each quadrant of the viewBox. (Positioning circles)
3. Create a set of circles from the center with radius increasing by 20px from 100px to 200px (10 circles). Change the stroke width and colour of the circles. Start from the largest circle to the smallest circle. (Sizing Circles)
4. Create a circle centered on the left side of the drawing with 200px radius. Note half the circle will go outside of the viewBox and be cut off.  (Positioning and sizing circles)
5. Use both the SVG attributes and style attribute to colour your circles. Become comfortable with both techniques. (Styling circles)

For Cheaters

Here is the Exercise SVG for those who are too lazy to type the SVG. View Cheat SVG Markup

<!--1. Circle with 100px radius-->
<circle cx="200" cy="200" r="100" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<!--2. Circles in each quadrant-->
<circle cx="100" cy="100" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<circle cx="300" cy="100" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<circle cx="100" cy="300" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<circle cx="300" cy="300" r="90" style="stroke:rgb(0, 0, 0); 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>
<!--3. Concentric Circles-->
<circle cx="200" cy="200" r="200" style="stroke:rgb(0, 0, 0); 
    stroke-width:1; fill:none;"></circle>
<circle cx="200" cy="200" r="180" style="stroke:rgb(0, 0, 0); 
    stroke-width:2; fill:none;"></circle>
<circle cx="200" cy="200" r="160" style="stroke:rgb(0, 0, 0); 
    stroke-width:3; fill:none;"></circle>
<circle cx="200" cy="200" r="140" style="stroke:rgb(0, 0, 0); 
   stroke-width:4; fill:none;"></circle>
<circle cx="200" cy="200" r="120" style="stroke:rgb(0, 0, 0); 
    stroke-width:5; fill:none;"></circle>
<circle cx="200" cy="200" r="100" style="stroke:rgb(0, 0, 0); 
    stroke-width:6; fill:none;"></circle>
<!--4. Half circle left-side -->
<circle cx="0" cy="200" r="200" style="stroke:black; 
    stroke-width:4; fill:rgb(255, 255, 255);"></circle>