Convert Simple Icon Designs from Paper Sketches to SVG Code
An introductory walkthrough of SVG path markup syntax
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 newsletter, 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.
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.
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:
strokedefines the outline colour; this is currently#000(black).ddefines 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.
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 theviewBoxto be-1.The topmost point is
0. For it to be seen, we’ll use-1as the top co-ordinate for ourviewBox.The rightmost point is
15. To include it, we’d want the rightmost co-ordinate to be16. But because theviewBoxstarts at-1and we’re specifying total width, this becomes17.Our SVG has both a width and height of
100. To preserve the 1:1 aspect ratio, that of ourviewBoxshould also match: a width of17means the height should also be17.
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>
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.
Bonus Developer Tip
The most obvious way to close a browser tab is by clicking its X button. But that’s relatively small compared to the tab itself; middle clicking (the mouse wheel) on the tab will also let you close it, while requiring less precision.
These tips are exclusively for my Substack subscribers and readers, as a thank-you for being part of this journey. Some may be expanded into fuller articles in future, depending on their depth.
But you get to see them here, first.