Background

SVG graphics have been around since 1998, and at this point have gained a substantial amount of browser support. They also lend themselves to animation and are naturally responsive.

Objective

In this tutorial, I will explain and demonstrate how to draw a simple circle with SVG from the ground up. Before starting, you should already know the fundamentals of HTML and CSS. Let’s dive in!

Why draw with code?

While SVGs can be created in a software program, my goal for this tutorial is to explain how to draw simple ones in code. This way, you can get a sense of how SVG markup works and reverse-engineer existing SVGs more easily. This will especially come in handy when you want to animate specific parts of an SVG.

Here we go

Step 1: Drawing the initial circle

Let’s start by drawing an SVG and a circle within it that could be added to a webpage. (SVGs that exist at the roots of documents are discussed in this post.)

We will give the SVG one attribute: the viewBox. The four numbers specify the x and y coordinates, as well as the width and height, of the SVG “window” relative to the art inside of it. I’ll show you what that means shortly.

We will give the circle an r attribute, which is its radius. Let’s make the radius 75 — one half of the viewBox’s width and height.

If the radius is half the length of the box then it should fit nicely into it, right?

Not yet.

Things to notice
  • A circle drawn within an SVG will by default start in the upper left hand corner.
  • The SVG’s width expands to fill that of the browser or device. This is because the width of the viewBox is relative to the art inside it, not the webpage.

Let’s fix the circle’s location first.

Step 2: Set the location of the circle

Let’s try to center the circle. We do this with cx and cy values, which specify its x and y coordinates in the viewBox. Let’s set them so they are one-half the width of the viewBox dimensions.

Step 3: Set the width and height of the SVG

Ok — looking better, but we still need to limit the size of this circle by keeping the SVG from filling up the width of the browser. We can do this by adding width and height attributes to the svg element.

Step 4: Adding fill and stroke

Rather than background-color and border attributes, SVGs have fill and stroke. Let’s give the SVG a black outline and a light blue fill color.

The line is pretty thin, so I’m going to bump up its thickness a bit now by adding a stroke-width attribute with a value of 2 to the circle.

The elephant in the room, though, is that the circle no longer quite fits into the viewBox. This is because the stroke adds to its existing radius of r="75". So let’s now adjust the radius down to r="72". We keep the cx and cy values because we want the circle to exist in the same location.

Step 6: Separating some properties into CSS

So far, all our properties have been inline. Now, let’s separate them into the CSS. This can be done either in a separate file or with <style> tags within your HTML document.

And just for fun, we’ll make the circle a light shade of purple rather than blue.

 
  
 
 
 
 svg {
   width: 150px;
   height: 150px;
   background-color: #EEEEEE;
 }
 circle {
	fill: #95D6F1;
	stroke: #000000;
	stroke-width: 2;
 }

Takeaways

  • SVGs consist of one or more elements, such as circles
  • The viewBox is the SVG “window” and its scale is relative to the art
  • Without width and height, the SVG will expand to fit the width of the browser or device
  • The properties of an SVG can be captured in CSS