SVG Circles

Tutorial

Every journey has to start somewhere and this one starts with drawing circles. In this section I'll show you how to setup a webpage for SVG and also how to draw circles. In visualizations circles can be used to represent points, verticies in a network graph, and they can also be used to represent magnitude based on their area. So pay attention, even if it is simple.

How to Create an SVG Area

To use SVG on a webpage you need what's called an SVG element. The <svg> element has two vital attributes, width and height, which specify how big the drawing area is in pixels. For example, <svg width="100" height="200"></svg> creates a drawing area 100 pixels wide by 200 pixels high.

Think of this drawing area as a painter's canvas, everything you want to draw will sit between the opening and closting SVG tags. In addition, if two graphical elements occupy the same space, the one specified last is drawn on top of elements before it.

How to Create a Circle in an SVG Area

SVG circles are created with the <circle> element. The circle element has three key attributes:

cx - the x coordinate of the circle's center
cy - the y coordinate of the circle's center
r - the circle's radius

For example, a circle centered at (10, 20) with a radius of 7 is created like this: <circle cx="10" cy="20" r="7"/>. Keep in mind that this will only draw a circle if it is inside an SVG area! In other words, a complete example should look like this:

<svg width="30" height="30">
  <circle cx="10" cy="20" r="7"/>
</svg>

Going forward the SVG area tags will not be included in examples unless it is relevant to the example. I will assume that the drawing will fit in the drawing area.

Quiz

Things to do

Create a circle in the SVG that is centered at (90,80) and has a radius of 20 pixels.
Resize the SVG to be 100 pixels high by 150 pixels wide to fit the circle.
Create a second circle in the SVG that is centered at (10,50) and a radius of 5 pixels.

Extra Credit

Create a second SVG area 100 pixels by 100 pixels and add a circle of your choosing.