SVG tutorial: draw your first SVG by hand, step by step
An SVG tutorial for beginners: write a gift tag in code, one line at a time, and learn the canvas, shapes, paths, text, colour and groups along the way.
Published
An SVG is a picture written as text: a list of shapes, each on its own line, inside one <svg> element. The quickest way to learn it is to write one. This tutorial builds a small gift tag in seven steps, adding one line at a time, and each line teaches one idea: the canvas, a shape, colour, a path, text, and grouping. It needs nothing but a text editor and a web browser.
Before you start
There are two ways to see your work.
- In a file. Open a plain text editor, such as Notepad, type the code from step 1, save it as
tag.svg, and drag that file into a browser window. After each change, save and reload the browser. - In the browser alone. Open the SVG viewer and type in its code box. The picture redraws as you type, and it says at once if the code is broken.
Three rules apply to every line. Every tag must be closed: either <rect ... /> with a slash at the end, or an opening and a closing tag. Every value goes in quotation marks. And in a file, capital letters matter: viewBox is not viewbox.
Step 1: the canvas
Type this. It is a complete SVG file, and it draws nothing yet.
<svg xmlns="http://www.w3.org/2000/svg" width="60mm" height="90mm" viewBox="0 0 60 90">
</svg>| Part | Meaning |
|---|---|
xmlns="..." | Says that this is SVG. A file needs it, exactly as written |
width and height | The size of the picture: here 60 by 90 millimetres |
viewBox="0 0 60 90" | The coordinates used inside: 60 units across and 90 down |
Because the picture is 60 mm wide and the viewBox is 60 units wide, one unit is one millimetre. Every number from here on is in those units. The point 0,0 is the top left corner, x runs to the right and y runs down.
Each of the next steps adds one line between the two <svg> tags.
Step 2: a rectangle
<rect x="5" y="5" width="50" height="80" rx="6" fill="#f4e3c1" stroke="#7a5c2e" stroke-width="1"/>x and y place the rectangle’s top left corner 5 units in from the edges. width and height set its size. rx rounds the corners with a radius of 6.
The last three attributes are the paint. fill is the colour inside the shape, stroke is the colour of its outline, and stroke-width is how thick that outline is. Colours can be names such as gold, or hex codes as here. A shape with no fill is filled black, and a shape with no stroke has no outline.
Step 3: a circle
<circle cx="30" cy="16" r="3" fill="white" stroke="#7a5c2e" stroke-width="1"/>A circle is placed by its centre, cx and cy, and sized by its radius r. This one is the hole for the string, centred across the tag at x 30.
It appears on top of the rectangle because it comes later in the file. SVG has no layers setting: shapes are painted in the order they are written, and later ones cover earlier ones.
Step 4: a line
<line x1="14" y1="64" x2="46" y2="64" stroke="#7a5c2e" stroke-width="1" stroke-linecap="round"/>A line runs from the point x1,y1 to the point x2,y2. Both ends here have the same y, so it is level. A line has no inside, so it needs a stroke to be seen at all. stroke-linecap="round" rounds its ends.
Step 5: a path
Rectangles, circles and lines cover simple cases. Most other shapes are drawn with a <path>, which is a pen following commands.
<path d="M30 54 C 10 42, 20 26, 30 36 C 40 26, 50 42, 30 54 Z" fill="#c0392b"/>The d attribute holds the commands:
| Command | Meaning |
|---|---|
M30 54 | Move the pen to x 30, y 54 without drawing: the bottom point of the heart |
C 10 42, 20 26, 30 36 | Draw a curve to 30,36, the dip at the top. The first two pairs are control points that pull the curve out to the left |
C 40 26, 50 42, 30 54 | Curve back down to the start, bulging to the right |
Z | Close the shape |
The other common commands are L, a straight line to a point, and A, an arc. A capital letter means the numbers are positions on the canvas. A small letter means they are distances from where the pen is now. Long paths are rarely written by hand: a drawing program writes them, and it is enough to be able to read one.
Step 6: text
<text x="30" y="76" text-anchor="middle" font-family="Georgia, serif" font-size="7" fill="#7a5c2e">For you</text>Text is placed by its baseline: y is the line the letters sit on. text-anchor="middle" centres the words on x. Unlike the shapes, <text> has its words between an opening and a closing tag.
Text is drawn with a font from the device showing it, so it can look different elsewhere, and cutting machines generally want lettering converted to shapes. Text to SVG makes lettering that is already outlines.
Step 7: a group and a transform
Wrap the heart’s path in a <g> element, a group, and give the group a transform:
<g transform="rotate(-10 30 44)">
<path d="M30 54 C 10 42, 20 26, 30 36 C 40 26, 50 42, 30 54 Z" fill="#c0392b"/>
</g>The heart tilts 10 degrees anticlockwise about the point 30,44, near its middle. A transform moves, turns or resizes everything in a group without changing the numbers of the shapes inside. Positive angles turn clockwise.
The finished file
<svg xmlns="http://www.w3.org/2000/svg" width="60mm" height="90mm" viewBox="0 0 60 90">
<rect x="5" y="5" width="50" height="80" rx="6" fill="#f4e3c1" stroke="#7a5c2e" stroke-width="1"/>
<circle cx="30" cy="16" r="3" fill="white" stroke="#7a5c2e" stroke-width="1"/>
<line x1="14" y1="64" x2="46" y2="64" stroke="#7a5c2e" stroke-width="1" stroke-linecap="round"/>
<g transform="rotate(-10 30 44)">
<path d="M30 54 C 10 42, 20 26, 30 36 C 40 26, 50 42, 30 54 Z" fill="#c0392b"/>
</g>
<text x="30" y="76" text-anchor="middle" font-family="Georgia, serif" font-size="7" fill="#7a5c2e">For you</text>
</svg>It draws a cream tag with rounded corners and a brown outline, a string hole at the top, a red heart tilted slightly to the left, a rule and the words For you. Try changing things: a colour, the r of the circle, the angle, the last two numbers of the viewBox.
Putting it on a web page
There are two usual ways. Paste the whole code into the HTML of a page, where CSS can then style its parts. Or save it as a file and show it like any picture:
<img src="tag.svg" alt="A gift tag with a heart" width="120">SVG in HTML compares the two.
Common mistakes
| What you see | Cause | Fix |
|---|---|---|
| The file shows as code, not a picture | xmlns is missing or misspelt | Copy it exactly from step 1 |
| An error naming a line | A tag is not closed, or a quotation mark is missing | Check the line it names, and the one before |
| A shape is missing | It is outside the viewBox, or it is a line with no stroke | Check its numbers against the viewBox |
| Pasted into a web page, everything after one shape is missing | That shape’s tag lacks its closing slash | Add / before > |
| A shape is solid black | No fill was given | Add a fill, or fill="none" for an outline only |
| A shape hides another | It comes later in the file | Move its line earlier |
Where to go next
| To learn | Read |
|---|---|
| How the viewBox scales and crops | SVG viewBox explained |
| Every path command, with arcs | SVG path |
| Making a file a machine can cut | How to make an SVG file |