Learn SVG

Through 24 Examples

Why would you code an image?

Why would you code an image?

Why would you draw an image with code? The true power of coding an SVG image comes from combining it with JavaScript and CSS.

You can generate an infographic or a data-driven diagram. You can animate an image with CSS. You can make a clock that shows the actual time.

You can make the image interactive. Try clicking the lightbulb or dragging the head of the lamp to see what happens.

In this tutorial, we go through 24 examples, from basic shapes through the SVG path element to more advanced use cases where we combine SVG images with JavaScript and CSS.

SVG Tutorial / SVG Basics / Day 1

How to Draw Basic Shapes with SVG

SVG (Scalable Vector Graphics) has a similar syntax as HTML. They are both based on XML. Since HTML5 we can simply inline the code of an SVG image inside an HTML file like below.

<html>
  <h1>Hi there</h1>
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="25" fill="red" />
  </svg>
</html>

This opens up a lot of cool options. We can access parts of an image with JavaScript to make something interactive or generate art with code. We can also move the styling to CSS and animate image elements with CSS.

We define an svg element with its width and height properties. This defines the drawing canvas where the coordinates go from the 0,0 coordinate from the top-left corner and grow downwards and to the right.

0, 0
200, 200 
<svg width="200" height="200">
  <!-- Here we can place shapes -->
</svg>

We can place shapes onto this canvas by coordinates. In the next chapter, we learn how to adjust this coordinate system with the viewBox property.

The SVG element often has an xmlns property as well. If the image is inlined in HTML this can be omitted.

How to draw a Circle in SVG

For today’s example, we draw a simple Christmas ornament. Here, we only use simple shapes: two circles and a rectangle.

To define a circle we need to set the following properties:

  • We set its center position with the cx and cy properties.
  • We set the radius with the r.

We define the main part of the Christmas ornament as a circle. We set its center position on the x-axis to the middle at 100 and on the y-axis, slightly below the middle at 120. We set a large radius and set its fill color. Hover over the element to see how it is positioned.

0, 0
100, 120 100, 120
200, 200 
<svg width="200" height="200">
  <circle
    cx="100"
    cy="120"
    r="70"
    fill="#D1495B"
  />
</svg>

To add some color, we use the fill property. This property is similar to the background-color property in CSS for regular HTML elements.

The color value can be a color name like red, a hex color code like #ff0000, or a CSS function like rgb(255 0 0). If we don’t want to fill the shape, we can set it to none.

How to draw a Rectangle in SVG

We draw a little cap on top of the Christmas ornament with the rect element:

  • We set the top-left position with the x and y coordinate.
  • We set the size with the width and height properties.

We position this rectangle above the previous circle and set a smaller size. Hover over the element to see how it is positioned. We use the fill attribute the same way as we did with the circle.

0, 0
100, 120 82, 35 100, 120 82, 35
200, 200 
<svg width="200" height="200">
  <circle
    cx="100"
    cy="120"
    r="70"
    fill="#D1495B"
  />
  <rect
    x="82"
    y="35"
    width="36"
    height="20"
    fill="#F79257"
  />
</svg>

How to draw a Ring in SVG

We finish the example with the hanger on top. We use the circle element again but with different attributes. Instead of filling it, we set the outline color with the stroke property and the width of this stroke with stroke-width.

We also set the fill color to none because the default value would be black.

The final code of the Christmas ornament is as follows:

<svg width="200" height="200">
  <circle cx="100" cy="120" r="70" fill="#D1495B" />
  <rect x="82" y="35" width="36" height="20" fill="#F79257" />
  <circle
    cx="100"
    cy="25"
    r="12"
    fill="none"
    stroke="#F79257"
    stroke-width="2"
  />
</svg>

Great! We drew our first SVG image. Now, let’s get into the next challenge!