SVG Clock Tutorial

svg clock

A Scalable Vector Graphic (SVG) is an image format which uses XML to construct vector graphics. In this tutorial, we’ll look at creating a SVG clock face.

SVG Introduction

There are many advantages to using SVG:

  1. Small in size
  2. Easy to compress
  3. Scalable – perfect for responsive design
  4. Support animation, filters and gradients

Although not as well known as the more traditional image formats, such as JPEG, SVG’s are well supported across most modern day browsers. SVG’s can be created in software e.g. Adobe Illustrator, or created by hand in a text editor.

SVGs can be linked to as separate files in an <img> tag or coded directly into a page.

SVG Clock Example

Lets take a look at constructing an SVG clock directly within this article.

Note that SVGs can use class and ID attributes and be styled just like HTML.  To keep things clear, we’ll do all the styling directly within the SVG.

  1. Define an <svg> element along with a width and height attribute.  The width and height can be any unit of measurement.  Using pixels, add a width and height of 200. It is the width and height attributes that determine the overall size of the SVG image.
  2. <svg width="200" height="200">
    </svg>
  3. Define a <circle> element to draw a circle and add an cx,  cy and r attribute.  The cv and cy attributes define the coordinates of the centre of the circle i.e coordinate x axis and coordinate y axis. As the width and height are 200px,  make cx and cy 100px so the circle fits perfectly within the bounds of the height and width. The r attribute defines the radius, so again use 100px to use 100% of the space available.
  4. <svg width="200" height="200">
    <circle cx="100" cy="100" r="100"></circle>
    </svg>
  5. To give the clock face a colour, add a fill attribute to the circle element.  We’ll use a light grey color with a hex value of #eee.
  6. <svg width="200" height="200">
    <circle fill="#eee" cx="100" cy="100" r="100"></circle>
    </svg>

  7. Add 12 separate line elements to represent each number on the clock face.  Each line has a stroke-width attribute, stroke color attribute, an ID attribute (to help us remember which line represents which clock face number) and a set of x and y coordinates to precisely position the lines on the clock face. The g element is a container used to group objects – in this case the clock face number elements.
    • The x1 attribute defines the start of the line on the x-axis
    • The y1 attribute defines the start of the line on the y-axis
    • The x2 attribute defines the end of the line on the x-axis
    • The y2 attribute defines the end of the line on the y-axis
  8. <svg width="200" height="200">
    <circle fill="#eee" cx="100" cy="100" r="100"></circle>
    <g>
    <line stroke-width="10" stroke="#777" id="hour0" x1="100" y1="10" x2="100" y2="0"></line>
    <line stroke-width="10" stroke="#777" id="hour1" x1="150" y1="13" x2="145" y2="22"></line>
    <line stroke-width="10" stroke="#777" id="hour2" x1="187" y1="50" x2="178" y2="55"></line>
    <line stroke-width="10" stroke="#777" id="hour3" x1="190" y1="100" x2="200" y2="100"></line>
    <line stroke-width="10" stroke="#777" id="hour4" x1="187" y1="150" x2="178" y2="145"></line>
    <line stroke-width="10" stroke="#777" id="hour5" x1="150" y1="187" x2="145" y2="178"></line>
    <line stroke-width="10" stroke="#777" id="hour6" x1="100" y1="190" x2="100" y2="200"></line>
    <line stroke-width="10" stroke="#777" id="hour7" x1="50" y1="187" x2="55" y2="178"></line>
    <line stroke-width="10" stroke="#777" id="hour8" x1="13" y1="150" x2="22" y2="145"></line>
    <line stroke-width="10" stroke="#777" id="hour9" x1="0" y1="100" x2="10" y2="100"></line>
    <line stroke-width="10" stroke="#777" id="hour10" x1="13" y1="50" x2="22" y2="55"></line>
    <line stroke-width="10" stroke="#777" id="hour11" x1="50" y1="13" x2="55" y2="22"></line>
    </g>
    </svg>

    Without going over every individual line, you can see that by using a bit of simple maths, it is possible to line up each line element perfectly on the clock face.

  9. Add two additional lines, one for each hand of the clock.
  10. <svg width="200" height="200">
    <circle fill="#eee" cx="100" cy="100" r="100"></circle>
    <g>
    <line stroke-width="10" stroke="#777" id="hour0" x1="100" y1="10" x2="100" y2="0"></line>
    <line stroke-width="10" stroke="#777" id="hour1" x1="150" y1="13" x2="145" y2="22"></line>
    <line stroke-width="10" stroke="#777" id="hour2" x1="187" y1="50" x2="178" y2="55"></line>
    <line stroke-width="10" stroke="#777" id="hour3" x1="190" y1="100" x2="200" y2="100"></line>
    <line stroke-width="10" stroke="#777" id="hour4" x1="187" y1="150" x2="178" y2="145"></line>
    <line stroke-width="10" stroke="#777" id="hour5" x1="150" y1="187" x2="145" y2="178"></line>
    <line stroke-width="10" stroke="#777" id="hour6" x1="100" y1="190" x2="100" y2="200"></line>
    <line stroke-width="10" stroke="#777" id="hour7" x1="50" y1="187" x2="55" y2="178"></line>
    <line stroke-width="10" stroke="#777" id="hour8" x1="13" y1="150" x2="22" y2="145"></line>
    <line stroke-width="10" stroke="#777" id="hour9" x1="0" y1="100" x2="10" y2="100"></line>
    <line stroke-width="10" stroke="#777" id="hour10" x1="13" y1="50" x2="22" y2="55"></line>
    <line stroke-width="10" stroke="#777" id="hour11" x1="50" y1="13" x2="55" y2="22"></line>
    </g>
    <g>
      <line stroke-width="10" stroke="#777" x1="100" y1="100" x2="100" y2="15"></line>
      <line stroke-width="10" stroke="#777" x1="100" y1="100" x2="100" y2="15"></line>
    </g>
    </svg>

  11. As with the lines representing the clock face numbers, we can use some simply maths to place the clock hands at any position we want.
<g>
  <line stroke-width=10 stroke=#777 x1=100 y1=100 x2=30 y2=60></line>
  <line stroke-width=10 stroke=#777 x1=100 y1=100 x2=160 y2=100></line>
</g>

2 thoughts on “SVG Clock Tutorial

  1. Marie Grossmith

    This was very useful. Thank you. I altered it so that the clock was built on the fly using javascript, and set a timeout for every 10 seconds to rotate the minute hand one degree and the hour hand one degree every 2 minutes. It works well, but I wouldn’t have known where to start without your example.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *