Convert Simple Icon Designs from Paper Sketches to SVG Code

When building an app, we sometimes find ourselves needing an icon but don’t have one at hand. Perhaps it’s for a ‘back’ or ‘home’ button. Or maybe we need a star for a ‘favourite’ button. One option is to find one we need in any of the numerous available online resources, e.g. Font Awesome or Noun Project. Another is to handcraft your own.

In this article, we’ll look at how you can impart your design skills not only in crafting your code, but also in your app’s icons too. Taking the example of a simple icon, we’ll go from sketching it on paper, all the way to creating an SVG of it.

Sketching the Icon

First off, we need some grid-lined or dotted paper to work on. If you don’t have any, there are many websites you can download graph paper from to print.

In this example, we’ll create an arrow pointing leftwards. You can see our design in Image 1. The gridlines are faint but note that all corners of the arrow occur at where they cross. This is important because it will make the translation to SVG much easier.

An outline of an arrow pointing leftwards overlaid on a grid — Image 1: The initial icon design

Transferring to SVG

Adding Boilerplate Code

Now we have our design, we can transcribe it as an SVG. The first step is to find the co-ordinates of each corner of the shape in our image. The origin point, i.e. (0,0) in an SVG is at its top-left corner. In image 2, we’ve added some numbers along the axes of our icon design to help.

An outline of an arrow pointing leftwards overlaid on a grid with co-ordinates marked — Image 2: Our icon design with co-ordinates marked

The following code is for a simple Web page; the part we’ll focus on is the svg tag and its contents.

<!doctype html>
<html lang="en-US">

<head>
  <title>SVG Demo</title>
</head>

<body>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="" stroke="#000"></path>
  </svg>
</body>

</html>

Breaking it down, our SVG:

Has a width of 100.
Has a height of 100.
Declares itself and its contents to be in the SVG namespace http://www.w3.org/2000/svg.

It contains a path tag, which has two attributes:

stroke defines the outline colour; this is currently #000 (black).
d defines the outline to be drawn. We’ll add data for our arrow icon here.

Transcribing the icon

Let’s think about how we drew the icon on paper. The process will be difficult to follow when described with words, but the steps are also visualised in Image 3.

We first moved our hand (with the pen off the page) to a point on the page.
We then put the pen tip to the page and drew a diagonal line, moving upwards and rightwards.
Without lifting the pen, we then drew a vertical line downwards.
Then a horizontal line rightwards.
Then a vertical line downwards.
Then a horizontal line leftwards.
Then a vertical line downwards.
And finally, we finished the shape by closing our outline.

An outline of an arrow pointing leftwards overlaid on a grid with key points marked — Image 3: The stages involved in drawing the icon

We can transcribe these steps using SVG path syntax and our grid co-ordinates.

Move without drawing to (0,5).
From there, draw a Line to (7,0).
Draw a Line to (7,3).
Draw a Line to (15,3).
Draw a Line to (15,7).
Draw a Line to (7,7).
Draw a Line to (7,10).
The command for closing an open shape in SVG is Z. To help with remembering this, think of the last command in drawing our shape corresponding with the last letter of the alphabet.

Putting this together, we have:

M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z

Let’s enter this as our path data:

<path d="M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z" stroke="#000"></path>

Adjusting the Icon Colour and Scale

When rendered in a browser, two things become apparent:

The arrow’s body is coloured black.
It’s rather small.

Luckily, these are easy to remedy. To change our arrow’s body colour, we only need specify its fill. We’ll use #ff0 (yellow) in our example:

<path d="M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z" stroke="#000" fill="#ff0"></path>

To zoom into our icon, we can use the viewBox attribute. This takes four arguments, all based on its content:

The leftmost co-ordinate.
The topmost co-ordinate.
The width of the content.
The height of the content.

These need to be based on the co-ordinates within the image, rather than the actual size it’s displayed at. Looking at our data points, we can see:

The leftmost point in our data is 0. To ensure it is shown, we want the left co-ordinate of the viewBox to be -1.
The topmost point is 0. For it to be seen, we’ll use -1 as the top co-ordinate for our viewBox.
The rightmost point is 15. To include it, we’d want the rightmost co-ordinate to be 16. But because the viewBox starts at -1 and we’re specifying total width, this becomes 17.
Our SVG has both a width and height of 100. To preserve the 1:1 aspect ratio, that of our viewBox should also match: a width of 17 means the height should also be 17.

Adding this to the markup will give us the following, which will produce results as shown in Image 4.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 17 17">
  <path d="M0,5 L7,0 L7,3 L15,3 L15,7 L7,7 L7,10 Z" stroke="#000" fill="#ff0">
  </path>
</svg>

An arrow pointing leftwards, with a black outline and coloured yellow — Image 4: Our SVG icon rendered in a browser

Summary

Raw SVG data can look complex. But the core data format is relatively simple, and transcribing an icon from a paper sketch can be a straightforward task.

By designing an icon on graph paper, you have a way of referencing co-ordinates of key points within it. With those, you can mimic the way it was drawn by using a series of commands in SVG markup. In addition, you can specify colours for the icon’s outline and fill.

Finally, you use the viewBox attribute to adjust both the icon’s position and scale to add the finishing touches.

Thanks for reading!

This article is from my newsletter. If you found it useful, please consider subscribing. You’ll get more articles like this delivered straight to your inbox (once per week), plus bonus developer tips too!

Blog