diff --git a/html/lesson2/example.html b/html/lesson2/example.html
index 9df9e340..6631bd57 100644
--- a/html/lesson2/example.html
+++ b/html/lesson2/example.html
@@ -20,8 +20,8 @@ <h2>Why do I like owls so much?</h2>
         <li>and lovely</li>
         <li>and cuddly</li>
       </ol>
-      <div><img src="images/img4.jpg" alt="cute owl"/></div>
-      <div><img src="images/img5.jpg" alt="another cute owl"/></div>
+      <div class="bigimg"><img src="images/img4.jpg" alt="cute owl"/></div>
+      <div class="bigimg"><img src="images/img5.jpg" alt="another cute owl"/></div>
       <a href="https://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
       <div id="the-quote">
         <h4>
diff --git a/index.html b/index.html
index 3ec416ba..4beed951 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,14 @@ <h2>HTML &amp; CSS</h2>
           <li><a href="html/lesson7/tutorial.html">Lesson 7 - Media queries and responsive design</a></li>
         </ul>
 
+        <h3>SVG</h3>
+        <ul>
+          <li><a href="svg/lesson1/tutorial.html">Lesson 1 - Introduction to SVG</a></li>
+          <li><a href="svg/lesson2/tutorial.html">Lesson 2 - Path and complex shapes</a></li>
+          <li><a href="svg/lesson3/tutorial.html">Lesson 3 - Groups and transforms</a></li>
+          <li><a href="svg/lesson4/tutorial.html">Lesson 4 - Advanced SVG</a></li>
+        </ul>
+
         <h2>JavaScript</h2>
         <ul>
           <li><a href="js/lesson1/tutorial.html">Lesson 1 - Introduction to JavaScript</a></li>
diff --git a/svg/lesson1/images/owl-silhouette.png b/svg/lesson1/images/owl-silhouette.png
new file mode 100644
index 00000000..4bc38a26
Binary files /dev/null and b/svg/lesson1/images/owl-silhouette.png differ
diff --git a/svg/lesson1/images/owl-silhouette.svg b/svg/lesson1/images/owl-silhouette.svg
new file mode 100644
index 00000000..dead658f
--- /dev/null
+++ b/svg/lesson1/images/owl-silhouette.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.0"
+   width="100%"
+   height="100%"
+   viewBox="0 0 462.674 463.905"
+   id="Layer_1"
+   xml:space="preserve"><defs
+   id="defs7" />
+   <title>Athene noctua - little owl silhouette</title>
+<path
+   d="m 140.255,192.747 c 2.897,-4.345 5.502,-9.993 9.139,-13.708 3.396,-3.468 8.951,-4.747 12.445,-8.121 7.231,-6.982 10.453,-18.689 12.373,-28.151 4.131,-20.36 5.871,-41.014 12.598,-60.806 1.678,-4.936 3.099,-10.775 6.847,-14.335 4.479,-4.254 8.385,-6.334 14.095,-8.238 9.421,-3.14 17.612,-9.72 27.021,-12.635 20.487,-6.347 42.321,-5.99 62.536,1.036 10.43,3.625 20.636,8.482 30.678,13.084 4.998,2.291 9.63,4.445 14.242,7.402 1.755,1.125 3.897,2.065 5.027,3.732 1.761,2.597 2.67,6.942 3.649,9.933 3.292,10.058 4.936,20.102 4.936,30.606 0,9.945 -0.437,19.908 0.677,29.796 0.344,3.055 0.009,7.386 1.154,10.243 0.882,2.201 2.776,2.592 4.546,4.354 2.976,2.962 5.745,7.402 7.241,11.301 1.78,4.637 3.899,10.125 4.239,15.063 0.458,6.658 -0.485,13.711 -0.721,20.382 -0.365,10.311 -4.245,20.028 -7.052,29.926 -2.572,9.068 -4.508,18.565 -7.988,27.322 -4.118,10.364 -8.322,20.061 -14.659,29.177 -6.614,9.515 -13.432,18.782 -20.404,28.042 -12.803,17.004 -32.216,25.322 -49.932,35.98 -4.436,2.669 -8.678,5.731 -12.999,8.584 4.478,5.24 8.747,10.732 13.667,15.563 6.263,6.151 11.472,12.947 19.949,15.661 6.963,2.229 15.725,1.032 23.144,1.774 6.638,0.664 14.888,2.312 20.958,5.224 8.464,4.061 6.565,14.262 6.408,22.113 -1.172,-4.803 -1.699,-10.89 -4.796,-14.886 -5.456,-7.038 -6.126,2.764 -10.042,5.321 -5.658,3.694 -7.952,-2.708 -12.351,-3.912 -4.879,-1.335 -10.966,-0.012 -15.977,-0.012 1.59,6.361 1.99,10.968 -0.491,17.169 -0.409,-2.371 -0.818,-4.742 -1.226,-7.113 -0.654,2.371 -1.308,4.742 -1.962,7.113 -0.622,-3.609 -0.955,-10.663 -5.043,-11.236 -1.98,-0.277 -4.126,1.295 -5.818,2.043 -2.875,1.272 -3.377,1.685 -6.817,1.589 -4.947,-0.138 -6.962,-3.117 -11.076,-5.451 -3.824,-2.169 -8.133,-2.398 -12.451,-2.398 1.218,7.61 3.495,14.525 3.434,22.319 -1.566,-4.072 -2.311,-6.946 -5.974,-9.562 -2.569,-1.836 -5.762,-1.551 -7.97,-3.473 -2.802,-2.438 -4.361,-6.879 -7.94,-8.636 -3.081,-1.513 -7.077,0.344 -10.691,0.697 -7.569,0.738 -15.398,-0.576 -22.935,0.368 -8.564,1.072 -11.202,5.367 -11.202,13.494 -1.661,-4.567 -3.81,-8.17 -1.96,-13.01 1.415,-3.702 4.884,-6.65 8.023,-9.102 5.234,-4.089 6.471,-3.827 13.197,-3.563 4.326,0.17 8.542,-0.075 12.869,-0.322 -3.934,-5.77 -7.842,-10.944 -12.962,-15.673 -2.476,-2.287 -4.344,-4.734 -6.47,-7.384 -2.961,-3.693 -2.479,-4.684 -6.559,-2.944 -3.177,1.355 -4.381,2.475 -7.626,2.395 -4.015,-0.099 -7.989,-1.506 -12.003,-1.656 -6.82,-0.255 -12.554,0.936 -19.278,-0.505 -4.272,-0.915 -4.144,-1.564 -6.357,2.022 -1.647,2.669 -3.219,6.432 -5.426,8.643 -5.268,5.277 -11.185,7.103 -18.221,7.511 -6.414,0.372 -14.062,-0.519 -19.789,2.524 -5.461,2.901 -12.145,7.073 -18.282,7.375 -11.077,0.546 -4.834,-12.085 -2.224,-17.522 3.106,-6.471 5.561,-13.123 9.129,-19.367 -4.457,0 -5.36,1.03 -5.518,-3.556 -0.115,-3.331 0.251,-6.299 0.704,-9.62 0.829,-6.082 3.824,-11.987 7.559,-16.942 1.817,-2.411 2.952,-2.555 3.387,-5.69 0.46,-3.317 -1.537,-5.444 -1.669,-8.551 -0.26,-6.149 3.74,-13.325 5.265,-19.162 2.854,-10.922 3.47,-22.365 6.891,-33.153 4.056,-12.791 7.234,-25.621 10.752,-38.565 3.58,-13.166 7.059,-26.216 14.082,-37.921 z"
+   id="path3" />
+</svg>
\ No newline at end of file
diff --git a/svg/lesson1/tutorial.md b/svg/lesson1/tutorial.md
new file mode 100644
index 00000000..2c18a0fb
--- /dev/null
+++ b/svg/lesson1/tutorial.md
@@ -0,0 +1,549 @@
+---
+layout: page
+title: Introduction to SVG
+---
+
+## Introduction to SVG
+
+### Objectives
+
+In this tutorial we are going to look at:
+
+* What is SVG?
+* What tools do you need to work with SVG?
+* SVG structure
+* Basic shapes
+* Ordering
+* Basic styling with CSS
+
+### Goal
+
+By the end of this tutorial, you'll have mastered the basics of SVG and will be
+able to create an image using simple shapes.
+
+## What is SVG?
+
+**SVG** stands for **S**calable **V**ector **G**raphics and is a markup language
+to describe images using a set of drawing instructions. **Scalable** means that
+you can scale a SVG image to any size, it will never look blocky. **Vector** means
+that it is made of a set of drawing instructions that defines the shape and area
+of each item in the image, which in turns means that it can result in very large
+files for complex images.
+
+For example, the two images below show the same image in SVG and PNG formats
+set at a width of 200 pixels. Because the PNG has a natural size of 50
+pixels it looks blocky when enlarged.
+
+<img src="./images/owl-silhouette.svg" alt="Little owl silhouette, SVG" width="200px">
+<img src="./images/owl-silhouette.png" alt="Little owl silhouette, PNG" width="200px">
+
+Owl image [CC0](https://creativecommons.org/publicdomain/zero/1.0/),
+[PhyloPic](http://phylopic.org/image/4e35207e-a75a-4518-8eca-1d574eebfbb4/).
+
+## Tools to work with SVG
+
+SVG images are made of drawing instructions that use a markup language that work
+in a very similar way to HTML, with a different set of tags. Because of this,
+all modern browsers support SVG out of the box and you can use the same tools
+that you use with HTML to author and debug SVG images. You can even style SVG
+images with CSS, interact with them using JavaScript or generate them
+programmatically to create data visualisations, such as what a tool like
+[d3.js](https://d3js.org/) can do.
+
+If you use SVG to create complex static images, you can also use vector graphic
+programs:
+
+* [Inkscape](https://inkscape.org/) is an open source vector drawing programme
+  that uses SVG as its native data format.
+* [Adobe Illustrator](https://www.adobe.com/uk/products/illustrator.html) is the
+  vector cousin of Photoshop and has a great SVG export function.
+* [Sketch](https://www.sketch.com/) can export to SVG.
+* [SVGOMG](https://jakearchibald.github.io/svgomg/) can optimise SVG code and
+  reduce its size. Note that SVGOMG will need the `xmlns` attribute set on the
+  `svg` tag to work properly (see below).
+
+## SVG Structure
+
+SVG images use tags just like [HTML elements](../../html/lesson1/tutorial.html#html-elements).
+The top-level tag is the `<svg>` tag. Mandatory attributes on this tag depend on
+whether your image is a standalone image, like the owl image above, or embedded
+in an HTML document.
+
+### Standalone image
+
+A standalone SVG image is a file with the `.svg` extension that contains a
+single `<svg>` tag. The file needs to start with an XML processing instruction
+and the `xmlns` attribute of the `<svg>` tag is mandatory. The `version`
+attribute of the `<svg>` tag is mandatory for SVG 1.x and deprecated in SVG 2.
+It is better to include a `DOCTYPE` too, as shown below:
+
+```xml
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+</svg>
+```
+
+### Embedded in an HTML document
+
+When embedding your images in an HTML document, you should not include the
+XML processing instruction and the only `DOCTYPE` should be the HTML one at the
+top of the document. The `xmlns` and `version` attributes are optional.
+
+You should ensure the `svg` tag is explicitly given a width, either via CSS or
+by setting the `width` attribute. If this is not the case, the image will attempt
+to take as much space as possible, which is usually not what you want. Initially
+we will also provide a `height` argument to ensure our image is properly sized.
+We will see advanced sizing techniques in later lessons.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+        </svg>
+    </body>
+</html>
+```
+
+For the remainder of this tutorial, we will assume that we embed our SVG images
+directly into HTML documents and that they all have a size of 200x200 pixels.
+
+## Basic shapes
+
+### Lines
+
+Now that we're all set, let's start drawing shapes with the simplest of them
+all: a line. Create a new HTML document with a `<line>` tag inside the `<svg>`
+tag. The `<line>` tag takes 4 positional attributes:
+
+* `x1` and `y1` define the coordinates of the start point of the line
+* `x2` and `y2` define the coordinates of the end point of the line
+
+This is enough to draw a line but it will be white so we will also provide a
+`stroke` attribute to make the line black and a `stroke-width` attribute to
+fatten it a bit. Note that `<line>` is a self-closing tag and requires `/>` at
+the end.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="3" />
+        </svg>
+    </body>
+</html>
+```
+
+You should then see something like this:
+
+<svg width="200px" height="200px">
+    <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="3" />
+</svg>
+
+The first thing to note is that this line goes from top left to bottom right of
+the SVG area. This is because _x_ values increase from left to right while _y_
+values increase from top to bottom, as shown when we highlight the corners of
+the area:
+
+<svg width="200px" height="200px">
+    <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="3" />
+    <circle cx="0" cy="0" r="6" fill="red" />
+    <text x="10" y="12" fill="red">0,0</text>
+    <circle cx="200" cy="0" r="6" fill="red" />
+    <text x="155" y="12" fill="red">200,0</text>
+    <circle cx="0" cy="200" r="6" fill="red" />
+    <text x="10" y="198" fill="red">0,200</text>
+    <circle cx="200" cy="200" r="6" fill="red" />
+    <text x="140" y="198" fill="red">200,200</text>
+</svg>
+
+The second thing to note is that the positional attributes take a simple number
+without any unit. Those numbers are coordinates on the rectangle covered by the
+SVG area that correspond to pixel distances from the top left corner. This
+behaviour can be overriden and we will see how to do that in an advanced lesson.
+
+### Rectangles
+
+The next shape is the rectangle, which is drawn with the `<rect>` tag. This tag
+takes 2 positional attributes and 2 size attributes:
+
+* `x` and `y` specify the coordinates of the top left corner of the rectangle
+* `width` and `height` specify the size of the rectangle
+
+In this example, we will introduce a third styling attribute, the `fill` attribute,
+to specify the colour inside the rectangle. Replace the `<line>` tag of the
+previous example with:
+
+```html
+<rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+```
+
+Which should show this:
+
+<svg id="example1" width="200px" height="200px">
+    <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+</svg>
+
+You can draw rounded rectangles by adding `rx` and `ry` attributes:
+
+```html
+<rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" rx="20" ry="15" />
+```
+
+<svg id="example2" width="200px" height="200px">
+    <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red"
+        rx="20" ry="15" />
+</svg>
+
+
+### Circles
+
+Let's round up shapes and bring in circles, using the slightly obvious `<circle>`
+tag. This tag takes 2 positional parameters and 1 size parameter:
+
+* `cx` and `cy` specify the coordinates of the center of the circle
+* `r` specifies the radius of the circle
+
+Replace the previous `<rect>` tag with this:
+
+```html
+<circle cx="100" cy="100" r="90" stroke="black" stroke-width="3" fill="green" />
+```
+
+Considering we specified a fill colour, this is technically a disc:
+
+<svg id="example3" width="200px" height="200px">
+    <circle cx="100" cy="100" r="90" stroke="black" stroke-width="3" fill="green" />
+</svg>
+
+### Ellipses
+
+An ellipse is a squished circle with two radii and is drawn using the `<ellipse>`
+tag:
+
+* `cx` and `cy` specify the coordinates of the center of the ellipse
+* `rx` and `ry` specify the horizontal and vertical radii
+
+Replace the previous `<circle>` tag with this:
+
+```html
+<ellipse cx="100" cy="100" rx="90" ry="60" stroke="black" stroke-width="3" fill="blue" />
+```
+
+Which should show this:
+
+<svg id="example4" width="200px" height="200px">
+    <ellipse cx="100" cy="100" rx="90" ry="60" stroke="black" stroke-width="3" fill="blue" />
+</svg>
+
+### Polygons
+
+Polygons are a bit more complex to construct. They are drawn with the `<polygon>`
+tag and take a single positional attributes, `points`, that describes a list of
+coordinates grouped in pairs. Coordinates of the same pair are separated by a
+comma and pairs are separated by spaces. Polygons are closed so the final
+coordinates generate a line to the first ones.
+
+Replace the previous `<ellipse>` tag with this:
+
+```html
+<polygon points="25,50 175,50 175,100 75,100 75,150 25,150" stroke="black" stroke-width="3" fill="purple" />
+```
+
+Which is the first step to create a game of Tetris:
+
+<svg id="example5" width="200px" height="200px">
+    <polygon points="25,50 175,50 175,100 75,100 75,150 25,150" stroke="black" stroke-width="3" fill="purple" />
+</svg>
+
+### Polylines
+
+Polylines are polygons that are not closed, which means that the last set of
+coordinates are not linked back to the first set and the shape is open on one
+side. You can still provide a `fill` colour, which will shade the area defined
+by the line.
+
+Replace the previous `<polygon>` tag with this:
+
+```html
+<polyline points="25,50 175,50 175,100 75,100 75,150 25,150" stroke="black" stroke-width="3" fill="yellow" />
+```
+
+Which results in an open Tetris piece:
+
+<svg id="example6" width="200px" height="200px">
+    <polyline points="25,50 175,50 175,100 75,100 75,150 25,150" stroke="black" stroke-width="3" fill="yellow" />
+</svg>
+
+### Text
+
+The last shape is the `<text>` tag that allows you to draw text fragments. It
+takes two `x` and `y` positional attributes and the content of the tag is the
+text to display:
+
+```html
+<text x="50" y="50" font-size="30px" fill="black">Hello SVG!</text>
+```
+
+<svg id="example7" width="200px" height="200px">
+    <text x="50" y="50" font-size="30px" fill="black">Hello SVG!</text>
+</svg>
+
+Note that the property that gives the text its colour is the `fill` property.
+You can also set the `stroke` property independently to outline the text:
+
+```html
+<text x="50" y="50" font-size="30px" fill="yellow" stroke="black">Hello SVG!</text>
+```
+
+<svg id="example8" width="200px" height="200px">
+    <text x="50" y="50" font-size="30px" fill="yellow" stroke="black">Hello SVG!</text>
+</svg>
+
+The `<text>` tag is designed to position independent pieces of text with no
+concept of layout. In particular, text will not wrap when it reaches the
+boundary of the SVG area, it will just be clipped:
+
+<svg id="example9" width="200px" height="200px">
+    <text x="30" y="50" font-size="30px" fill="yellow" stroke="black">Good day SVG!</text>
+</svg>
+
+You can position related pieces of text next to each other using `<tspan>` tags
+inside a parent `<text>` tag:
+
+```html
+<text x="50" y="50" font-size="30px" fill="yellow" stroke="black">Good day
+    <tspan x="50" dy="30">SVG!</tspan></text>
+```
+
+<svg id="example10" width="200px" height="200px">
+    <text x="50" y="50" font-size="30px" fill="yellow" stroke="black">Good day
+        <tspan x="50" dy="30">SVG!</tspan></text>
+</svg>
+
+
+## Ordering
+
+SVG has a very simple ordering logic: shapes are drawn in the order they are
+specified in the file. There is no way to override which shape is in front of
+which one. This means that if you want a green rectangle on top of a red rectangle,
+you need to specify the red rectangle first:
+
+```html
+<svg width="200px" height="200px">
+    <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+    <rect x="100" y="100" width="80" height="90" stroke="black" stroke-width="3" fill="green" />
+</svg>
+```
+
+<svg id="example11" width="200px" height="200px">
+    <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+    <rect x="100" y="100" width="80" height="90" stroke="black" stroke-width="3" fill="green" />
+</svg>
+
+If you want the green rectangle to be drawn under the red rectangle, it has to
+come first:
+
+```html
+<svg width="200px" height="200px">
+    <rect x="100" y="100" width="80" height="90" stroke="black" stroke-width="3" fill="green" />
+    <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+</svg>
+```
+
+<svg id="example12" width="200px" height="200px">
+    <rect x="100" y="100" width="80" height="90" stroke="black" stroke-width="3" fill="green" />
+    <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+</svg>
+
+## Styling SVG with CSS
+
+### Stroke and fill
+
+You can style SVG with CSS the same way as you style HTML, bearing in mind that
+the tag and property names are different.
+
+The most common attibutes to style are `stroke` and `fill`. As with HTML, you
+can use `class` or `id` to anchor CSS rules and pseudo-classes like `:hover`
+do what you expect:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        circle {
+            fill: orange;
+            stroke: black;
+            stroke-width: 2;
+        }
+        circle.green {
+            fill: green;
+            stroke-width: 5;
+        }
+        #red {
+            fill: red;
+        }
+        circle:hover {
+            fill: purple;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <circle cx="20" cy="20" r="30" />
+            <circle class="green" cx="50" cy="30" r="20" />
+            <circle cx="130" cy="100" r="40" />
+            <circle cx="20" cy="100" r="30" />
+            <circle class="green" cx="80" cy="170" r="20" />
+            <circle id="red" cx="20" cy="190" r="30" />
+        </svg>
+    </body>
+</html>
+```
+
+This results in the following drawing. Hover your mouse over the orange circles
+to see their colour change:
+
+<svg id="example13" width="200px" height="200px">
+    <style>
+    #example13 circle {
+        fill: orange;
+        stroke: black;
+        stroke-width: 2;
+    }
+    #example13 circle.green {
+        fill: green;
+        stroke-width: 5;
+    }
+    #example13 #red {
+        fill: red;
+    }
+    #example13 circle:hover {
+        fill: purple;
+    }
+    </style>
+    <circle cx="20" cy="20" r="30" />
+    <circle class="green" cx="50" cy="30" r="20" />
+    <circle cx="130" cy="100" r="40" />
+    <circle cx="20" cy="100" r="30" />
+    <circle class="green" cx="80" cy="170" r="20" />
+    <circle id="red" cx="180" cy="190" r="30" />
+</svg>
+
+### Styling text
+
+Text can be styled the same as any other shape and it has a few extra properties,
+in particular the same font related properties as HTML text as well as the
+`text-anchor` property:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        line {
+            stroke: #ccc;
+        }
+        circle {
+            fill: red;
+        }
+        text {
+            fill: black;
+            text-anchor: middle;
+            font-family: sans-serif;
+        }
+        text.start {
+            fill: green;
+            text-anchor: start;
+            font-style: italic;
+            font-family: serif;
+        }
+        text.end {
+            fill: blue;
+            text-anchor: end;
+            font-weight: bold;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <line x1="100" y1="0" x2="100" y2="200" />
+            <circle cx="100" cy="50" r="5" />
+            <text class="start" x="100" y="50">Start</text>
+            <circle cx="100" cy="100" r="5" />
+            <text class="middle" x="100" y="100">Middle</text>
+            <circle cx="100" cy="150" r="5" />
+            <text class="end" x="150" y="100">End</text>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example14" width="200px" height="200px">
+    <style>
+    #example14 line {
+        stroke: #ccc;
+    }
+    #example14 circle {
+        fill: red;
+        stroke: none;
+    }
+    #example14 text {
+        fill: black;
+        text-anchor: middle;
+        font-size: 2em;
+        font-family: sans-serif;
+    }
+    #example14 text.start {
+        fill: green;
+        text-anchor: start;
+        font-style: italic;
+        font-family: serif;
+    }
+    #example14 text.end {
+        fill: blue;
+        text-anchor: end;
+        font-weight: bold;
+    }
+    </style>
+    <line x1="100" y1="0" x2="100" y2="200" />
+    <line x1="50" y1="50" x2="150" y2="50" />
+    <circle cx="100" cy="50" r="5" />
+    <text class="start" x="100" y="50">Start</text>
+    <line x1="50" y1="100" x2="150" y2="100" />
+    <circle cx="100" cy="100" r="5" />
+    <text class="middle" x="100" y="100">Middle</text>
+    <line x1="50" y1="150" x2="150" y2="150" />
+    <circle cx="100" cy="150" r="5" />
+    <text class="end" x="100" y="150">End</text>
+</svg>
+
+### Mixing HTML and SVG CSS rules
+
+You can mix HTML and SVG CSS rules as you want. However, as the SVG is part of
+the same DOM as the HTMl document and if you have generic rules that apply to
+classes that you use both in HTML and SVG, they will apply to both.
+
+-----
+This ends our first SVG lesson, we hope you enjoyed it and learnt something.
+If you have some spare time how about going back through this tutorial and,
+by yourself, make some amendments. If there is something you did not understand
+or want to give us some feedback, please [send us an email.](mailto:feedback@codebar.io)
+
+## Further reading
+
+* One of the best experts on SVG is [Sara Souiedan](https://www.sarasoueidan.com/)
+  and she has [great SVG articles on her blog](https://www.sarasoueidan.com/tags/svg/)
+* [Mozilla SVG tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
diff --git a/svg/lesson2/tutorial.md b/svg/lesson2/tutorial.md
new file mode 100644
index 00000000..75e2c1d3
--- /dev/null
+++ b/svg/lesson2/tutorial.md
@@ -0,0 +1,549 @@
+---
+layout: page
+title: Path and complex shapes
+---
+
+## Path and complex shapes
+
+### Objectives
+
+In this tutorial we are going to look at:
+
+* Complex shapes using the `<path>` element
+* Disjoint shapes
+* Fill rules and shapes with holes
+
+### Goal
+
+By the end of this tutorial, you'll have mastered how to draw complex shapes,
+including discontinuous shapes and shapes with holes.
+
+## Complex shapes
+
+In the previous lesson, we introduced basic lines and shapes. There's only so
+much you can do with rectangles and circles so we are going to have a look at
+the `<path>` element. This element can do everything we did in the previous
+lesson and a lot more. It is so versatile we are dedicating a whole lesson to
+it. So buckle up, we're off to draw amazing shapes.
+
+### Lines
+
+The `<path>` element draws an open or closed line by following a shape definition
+specified in its `d` attribute. The shape definition is a series of instructions.
+Each instruction is composed of one letter followed by coordinates. The letters
+are case sensitive: an uppercase letter indicates that the coordinates that
+follow are absolute while a lowercase letter indicates that they are relative.
+This is all a bit complicated so let's work it all out with an example. In this
+example, we will introduce the following commands:
+
+* **M**: move to the indicated coordinates
+* **L**: draw a straight line
+* **H**: draw a horizontal line
+* **V**: draw a vertical line
+
+Path definitions tend to start with a **M** command to move to the starting point
+of the line. This command if of the form `M x,y` where `x` and `y` are the
+coordinates of the point to move to.
+
+If we just move to a point on the drawing area and don't do anything, we won't
+see much so let's add a line to this. This is what the **L** instruction is for:
+it is of the form `L x,y` and will draw a straight line from the current point
+to the point with coordinates `x` and `y`. So the instruction `M 150,100 L 100,150`
+will first move to the position _(150,100)_ and then draw a straight line from
+there to _(100,150)_:
+
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 150,100 L 100,150" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+You should then see a diagonal line:
+
+<svg width="200px" height="200px">
+    <path d="M 150,100 L 100,150" stroke="black" stroke-width="3" fill="none" />
+</svg>
+
+The **L** instruction has a couple of shorthands:
+
+* **H** is of the form `H x` and will draw a horizontal line from
+  the current position to a position that has `x` as a horizontal coordinate
+  and the same vertical coordinate as the last point, so if the current
+  position is _(100,150)_, adding the instruction `H 50` will draw a line from
+  _(100,150)_ to _(50,150)_.
+* **V** is of the form `V y` and will draw a vertical line from
+  the current position to a position that has the same horizontal coordinate
+  as the last point and `y` as the vertical coordinate, so if the current
+  position is _(50,150)_, adding the instruction `V 50` will draw a line from
+  _(50,150)_ to _(50,50)_.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 150,100 L 100,150 H 50 V 50 H 100" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+This should result in a nearly closed arrow shape:
+
+<svg width="200px" height="200px">
+    <path d="M 150,100 L 100,150 H 50 V 50 H 100" stroke="black" stroke-width="3" fill="none" />
+</svg>
+
+We can close this shape by adding a **Z** instruction at the end. We can also
+provide a `fill` colour:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 150,100 L 100,150 H 50 V 50 H 100 Z" stroke="black" stroke-width="3" fill="yellow" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 150,100 L 100,150 H 50 V 50 H 100 Z" stroke="black" stroke-width="3" fill="yellow" />
+</svg>
+
+Up until now, we've used uppercase instruction letters which resulted in absolute
+coordinates being used. If we replace those with lowercase letters, all numbers
+are taken as being relative to the final coordinate of the last instruction.
+The initial instruction is always relative to the origin, _(0,0)_.
+The **Z** instruction can be written uppercase or lowercase. So if we change the
+previous example to be relative instructions, we get this:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 150,100 l -50,-50 h -50 v 100 h 50 z" stroke="black" stroke-width="3" fill="yellow" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 150,100 l -50,-50 h -50 v 100 h 50 z" stroke="black" stroke-width="3" fill="yellow" />
+</svg>
+
+On the one hand, relative coordinates are more difficult to use but on the other
+hand, they also allow you to position shapes in different places with minimal
+changes to the code. For example, if we draw two of our relative arrows with
+different starting points, we get this:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 125,100 l -50,-50 h -50 v 100 h 50 z" stroke="black" stroke-width="3" fill="yellow" />
+            <path d="M 175,125 l -50,-50 h -50 v 100 h 50 z" stroke="black" stroke-width="3" fill="orange" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 125,100 l -50,-50 h -50 v 100 h 50 z" stroke="black" stroke-width="3" fill="yellow" />
+    <path d="M 175,125 l -50,-50 h -50 v 100 h 50 z" stroke="black" stroke-width="3" fill="orange" />
+</svg>
+
+For the remainder of this lesson, we will use absolute coordinates as they are
+easier to reason with, just be aware that the `d` attribute is case sensitive
+and that using lowercase changes the way coordinates are handled.
+
+### Bézier curves
+
+Bézier curves are a type of curve that is used extensively by vector graphic
+software because they are very easy for a computer to draw while being able to
+define very complex shapes. A Bézier curve joins a start point and an end point
+using a line that is defined by a number of control points. A Bézier curve with
+no control point is simply a straight line between the two points. SVG paths
+support 3 specific cases of Bézier curves:
+
+* Linear Bézier curves, i.e. straight lines, we know all about those;
+* Quadratic Bézier curves that use one control point in addition to the start
+  and end points;
+* Cubic Bézier curves that use two control points in addition to the start and
+  end points.
+
+#### Quadratic curves
+
+Quadratic Bézier curves are drawn using a start point (P<sub>0</sub>), a control
+point (P<sub>1</sub>) and an end point (P<sub>2</sub>). Calculating the formula
+below for values of _t_ between 0 ad 1 produces the points on the curve, B(_t_):
+
+B(_t_) = (1−_t_)<sup>2</sup>P<sub>0</sub>+2(1−_t_)tP<sub>1</sub>+_t_<sup>2</sup>P<sub>2</sub>, 0≤_t_≤1
+
+Here is an animated visual representation of what is happening:
+
+![Quadratic Bézier curve animation](https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif)
+
+In order to draw such shapes, we use the **Q** instruction. P<sub>0</sub> is
+the current point and the instruction has the form `Q x1,y1 x2,y2`. In the
+example below, the three points are:
+
+* P<sub>0</sub>: 25,75
+* P<sub>1</sub>: 50,175
+* P<sub>2</sub>: 100,75
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 25,75 Q 50,175 100,75" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <line x1="25" y1="75" x2="50" y2="175" stroke="lightgray" stroke-width="2" />
+    <line x1="50" y1="175" x2="100" y2="75" stroke="lightgray" stroke-width="2" />
+    <path d="M 25,75 Q 50,175 100,75" stroke="black" stroke-width="3" fill="none" />
+    <circle cx="25" cy="75" r="5" fill="red" />
+    <circle cx="50" cy="175" r="5" fill="red" />
+    <circle cx="100" cy="75" r="5" fill="red" />
+</svg>
+
+We can link multiple curve segments together by using multiple **Q** instructions.
+When doing this, the joint between the two curve segments may show an angle:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 25,75 Q 50,175 100,75 Q 150,50 175,75" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 25,75 Q 50,175 100,75 Q 150,50 175,75" stroke="black" stroke-width="3" fill="none" />
+</svg>
+
+If you want to create a smooth curve with no angle between the curve segments,
+SVG provides a shorthand using the **T** instruction: in this case, the control
+point P<sub>1</sub> of the second segment doesn't need to be provided as it is
+calculated by the SVG layout engine to ensure the curve is smooth:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 25,75 Q 50,175 100,75 T 175,75" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 25,75 Q 50,175 100,75 T 175,75" stroke="black" stroke-width="3" fill="none" />
+</svg>
+
+#### Cubic curves
+
+Cubic Bézier curves are drawn using a start point (P<sub>0</sub>), two control
+points (P<sub>1</sub> and P<sub>2</sub>) and an end point (P<sub>3</sub>).
+Calculating the formula below for values of _t_ between 0 ad 1 produces the
+points on the curve, B(_t_):
+
+B(_t_) = (1−_t_)<sup>3</sup>P<sub>0</sub>+3(1−_t_)<sup>2</sup>tP<sub>1</sub>+3(1−_t_)t<sup>2</sup>P<sub>2</sub>+_t_<sup>3</sup>P<sub>3</sub>, 0≤_t_≤1
+
+Here is an animated visual representation of what is happening:
+
+![Cubic Bézier curve animation](https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif)
+
+In order to draw such shapes, we use the **C** instruction. P<sub>0</sub> is
+the current point and the instruction has the form `C x1,y1 x2,y2 x3,y3`. In the
+example below, the three points are:
+
+* P<sub>0</sub>: 25,75
+* P<sub>1</sub>: 75,175
+* P<sub>2</sub>: 125,25
+* P<sub>3</sub>: 175,75
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 25,75 C 75,175 125,25 175,75" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <line x1="25" y1="75" x2="75" y2="175" stroke="lightgray" stroke-width="2" />
+    <line x1="125" y1="25" x2="175" y2="75" stroke="lightgray" stroke-width="2" />
+    <path d="M 25,75 C 75,175 125,25 175,75" stroke="black" stroke-width="3" fill="none" />
+    <circle cx="25" cy="75" r="5" fill="red" />
+    <circle cx="75" cy="175" r="5" fill="red" />
+    <circle cx="125" cy="25" r="5" fill="red" />
+    <circle cx="175" cy="75" r="5" fill="red" />
+</svg>
+
+We can link multiple curve segments together by using multiple **C** instructions.
+When doing this, the joint between the two curve segments may show an angle in
+the same way as with quadratic curves:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="350px" height="200px">
+            <path d="M 25,75 C 75,175 125,25 175,75 C 150,175 275,25 325,75" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="350px" height="200px">
+    <path d="M 25,75 C 75,175 125,25 175,75 C 150,175 275,25 325,75" stroke="black" stroke-width="3" fill="none" />
+</svg>
+
+If you want to create a smooth curve with no angle between the curve segments,
+SVG provides a shorthand using the **S** instruction: in this case, the control
+point P<sub>1</sub> of the second segment doesn't need to be provided as it is
+calculated by the SVG layout engine to ensure the curve is smooth:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="350px" height="200px">
+            <path d="M 25,75 C 75,175 125,25 175,75 S 275,25 325,75" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="350px" height="200px">
+    <path d="M 25,75 C 75,175 125,25 175,75 S 275,25 325,75" stroke="black" stroke-width="3" fill="none" />
+</svg>
+
+### Arcs
+
+The last type of line segment that can be described in a `<path>` element is a
+curcular or elliptical arc. The way an arc is specified is slightly complicated
+because it needs to be integrated into an existing path so that SVG can link
+the current point with a target point using a section of ellipse. To draw such
+a path element, we use the **A** intruction and it has the form
+`A rx ry x-axis-rotation large-arc-flag sweep-flag x y` where:
+
+* `rx` is the ellipse's horizontal radius
+* `ry` is the ellipse's vertical radius
+* `x-axis-rotation` is the angle by which the radii are rotated
+* `large-arc-flag` is a value of `0` or `1` that selects what arc to draw
+* `sweep-flag` is a value of `0` or `1` that selects what possible ellipse to
+  draw out of the two that can intersect on the line
+* `x` and `y` are the coordinates of the target point
+
+This is all a bit complex so here is an example with two arcs of circle:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 0,50 L 25,50 A 25 25 0 0 0 75,50 L 125,50 A 35 35 0 0 0 175,50 L 200,50" stroke="black" stroke-width="3" fill="none" />
+            <path d="M 0,100 L 25,100 A 25 25 0 1 0 75,100 L 125,100 A 35 35 0 1 0 175,100 L 200,100" stroke="black" stroke-width="3" fill="none" />
+            <path d="M 0,175 L 25,175 A 25 25 0 0 1 75,175 L 125,175 A 35 35 0 0 1 175,175 L 200,175" stroke="black" stroke-width="3" fill="none" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 0,50 L 25,50 A 25 25 0 0 0 75,50 L 125,50 A 35 35 0 0 0 175,50 L 200,50" stroke="black" stroke-width="3" fill="none" />
+    <path d="M 0,100 L 25,100 A 25 25 0 1 0 75,100 L 125,100 A 35 35 0 1 0 175,100 L 200,100" stroke="black" stroke-width="3" fill="none" />
+    <path d="M 0,175 L 25,175 A 25 25 0 0 1 75,175 L 125,175 A 35 35 0 0 1 175,175 L 200,175" stroke="black" stroke-width="3" fill="none" />
+</svg>
+
+The first arc of the first line is drawn between the points _(25,50)_ and _(75,50)_,
+which corresponds to a length of 50 in the path. The radii are both 25, which means
+that the 50 space in the path will accommodate a full half-circle.
+
+The second arc of the first line is drawn between the points _(125,50)_ and _(175,50)_,
+which corresponds to a length of 50 in the path. The radii are both 35, which means
+that the 50 space in the path will accommodate less than half a circle.
+
+For the second line, we set the `large-arc-flag` to true, which has no effect on
+the half circle but selects a large option for the second arc.
+
+For the third line, we set the `large-arc-flag` back to false and the `sweep-flag`
+to true, which has the effect of drawing both arcs on the other side of the line.
+
+Arcs are quite difficult to understand so the best thing is to experiment with them.
+
+## Disjoint shapes
+
+The `<path>` element allows you to create very complex shapes but it can also
+create disjoint shapes, i.e. shapes that consist of multiple paths. This is done
+by introducing some **M** instructions in the middle of the path to draw a
+disjoint segment. For example, we can draw two squares side by side with a
+single shape, meaning that they will share all `fill`, `stroke` and `stroke-width`
+attributes:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 25,25 H 100 V 100 H 25 Z M 125,125 H 175 V 175 H 125 Z" stroke="black" stroke-width="3" fill="yellow" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 25,25 H 100 V 100 H 25 Z M 125,125 H 175 V 175 H 125 Z" stroke="black" stroke-width="3" fill="yellow" />
+</svg>
+
+## Shapes with holes
+
+If we update the example above to draw the second square inside the first,
+SVG does just that:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 25,25 H 175 V 175 H 25 Z M 50,50 H 150 V 150 H 50 Z" stroke="black" stroke-width="3" fill="yellow" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 25,25 H 175 V 175 H 25 Z M 50,50 H 150 V 150 H 50 Z" stroke="black" stroke-width="3" fill="yellow" />
+</svg>
+
+By default, SVG fills all the shape segments. This can be chaged using the
+`fill-rule` attribute. This attribute can take two values:
+
+* `nonzero` (the default): all shape segments are filled
+* `evenodd`: shape segments are filled or empty depending on whether the number
+  of shape segments that intersect are even or odd
+
+With the simple shape above, this allow us to create a shape with a hole. We can
+confirm that this is a real hole by showing another shape behind.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 10,10 H 100 V 100 H 10 Z" stroke="lightgray" stroke-width="1" fill="orange" />
+            <path d="M 25,25 H 175 V 175 H 25 Z M 50,50 H 150 V 150 H 50 Z" stroke="black" stroke-width="3" fill="yellow" fill-rule="evenodd" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 10,10 H 100 V 100 H 10 Z" stroke="lightgray" stroke-width="1" fill="orange" />
+    <path d="M 25,25 H 175 V 175 H 25 Z M 50,50 H 150 V 150 H 50 Z" stroke="black" stroke-width="3" fill="yellow" fill-rule="evenodd" />
+</svg>
+
+This rule allows us to draw even more complex combinations. In the example below,
+the areas that are covered by an odd number of shapes (1 or 3) are filled in,
+while the areas that are covered by an even number of shapes (2) are empty, all
+this with a single `<path>` element:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <path d="M 25,75 Q 250,250 75,25 Z M 175,75 Q -50,250 125,25 Z M 50,175 Q 100,0 150,175 Z" stroke="black" stroke-width="3" fill="yellow" fill-rule="evenodd" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg width="200px" height="200px">
+    <path d="M 25,75 Q 250,250 75,25 Z M 175,75 Q -50,250 125,25 Z M 50,175 Q 100,0 150,175 Z" stroke="black" stroke-width="3" fill="yellow" fill-rule="evenodd" />
+</svg>
+
+Phew, this lesson was rather complex so congratulations for getting to the end
+if it! Take it slowly, go back through it and experiment.
+
+-----
+This ends our second SVG lesson, we hope you enjoyed it and learnt something.
+If you have some spare time how about going back through this tutorial and,
+by yourself, make some amendments. If there is something you did not understand
+or want to give us some feedback, please [send us an email.](mailto:feedback@codebar.io)
+
+## Further reading
+
+* [Mozilla SVG path tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)
+* [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve)
diff --git a/svg/lesson3/tutorial.md b/svg/lesson3/tutorial.md
new file mode 100644
index 00000000..4a4bd6b0
--- /dev/null
+++ b/svg/lesson3/tutorial.md
@@ -0,0 +1,613 @@
+---
+layout: page
+title: Groups and transforms
+---
+
+## Groups and transforms
+
+### Objectives
+
+In this tutorial we are going to look at:
+
+* Shape groups using the `<g>` element
+* Transforms: translate, scale, rotate, skew
+
+### Goal
+
+By the end of this tutorial, you'll have mastered how to group shapes together
+and apply properties to those groups; and how to apply transformations to
+shapes or groups of shapes.
+
+## Groups
+
+In the first two lessons, you learnt how to create simple and complex shapes.
+Those shapes can be grouped and you can style and manipulate the group as if it
+was a single shape. We will learn how to do this in this lesson.
+
+Groups are created using the `<g>` tag with individual shapes or other `<g>`
+tags inside. It works very much like the HTML `<div>` element in the sense that
+on its own it doesn't have any effect on the result:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <g>
+                <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+                <rect x="150" y="150" width="40" height="40" stroke="black" stroke-width="3" fill="red" />
+                <rect x="100" y="100" width="60" height="60" stroke="black" stroke-width="3" fill="green" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example1" width="200px" height="200px">
+    <g>
+        <rect x="50" y="50" width="120" height="80" stroke="black" stroke-width="3" fill="red" />
+        <rect x="150" y="150" width="40" height="40" stroke="black" stroke-width="3" fill="red" />
+        <rect x="100" y="100" width="60" height="60" stroke="black" stroke-width="3" fill="green" />
+    </g>
+</svg>
+
+What it allows you to do though is to define style attributes for the whole
+group that can be overriden for individual shapes. For instance, in the
+example below, the `stroke`, `stroke-width` and `fill` properties are now
+defined on the group rather than the individual rectangles and the third
+rectangle overrides the `fill` property:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <g stroke="black" stroke-width="3" fill="red">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" fill="green" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example2" width="200px" height="200px">
+    <g stroke="black" stroke-width="3" fill="red">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" fill="green" />
+    </g>
+</svg>
+
+What can be done with SVG attributes can also be done with CSS:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <g>
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example3" width="200px" height="200px">
+    <style>
+    #example3 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example3 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g>
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+</svg>
+
+## Transforms
+
+All SVG elements can take a `transform` attribute. This attribute takes the
+form of a list of transform function calls that modify the shape by applying
+translations, scaling, rotations or skews to it.
+
+Note that you can also use CSS transforms on SVG elements. CSS transforms are
+very similar to the SVG ones and add 3D capabilities so once you are
+comfortable with what SVG can do, you can go further with CSS.
+
+### translate
+
+The _translate_ function is of the form `translate(x [y])` and moves the object
+horizontally by an amount of _x_ and vertically by an amount of _y_. If _y_ is
+not specified, it is assumed to be 0. In the example blelow, the original shape
+is shown with an opacity of 0.3.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <g style="opacity: 0.3">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g transform="translate(35 -60)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example4" width="200px" height="200px">
+    <style>
+    #example4 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example4 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g style="opacity: 0.3">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g transform="translate(35 -60)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+</svg>
+
+### scale
+
+The _scale_ function is of the form `scale(x [y])` and scales the object
+horizontally by an amount of _x_ and vertically by an amount of _y_. If _y_ is
+not specified, it is assumed to be the same as _x_.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <g style="opacity: 0.3">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g transform="scale(0.5 0.75)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example5" width="200px" height="200px">
+    <style>
+    #example5 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example5 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g style="opacity: 0.3">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g transform="scale(0.5 0.75)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+</svg>
+
+### rotate
+
+The _rotate_ function is of the form `rotate(a [x y])` and rotates the object
+by an angle of _a_ degrees around the point specified by _x_ and _y_.
+If _x_ and _y_ are not specified, the rotation is done around the origin.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <g style="opacity: 0.3">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g transform="rotate(30 100 100)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example6" width="200px" height="200px">
+    <style>
+    #example6 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example6 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g style="opacity: 0.3">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g transform="rotate(30 100 100)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+</svg>
+
+## skewX
+
+The _skewX_ function is of the form `skewX(a)` and skews the object
+along the horizontal axis by an angle of _a_ degrees.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="300px" height="200px">
+            <g style="opacity: 0.3">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g transform="skewX(30)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example7" width="300px" height="200px">
+    <style>
+    #example7 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example7 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g style="opacity: 0.3">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g transform="skewX(30)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+</svg>
+
+## skewY
+
+The _skewY_ function is of the form `skewY(a)` and skews the object
+along the vertical axis by an angle of _a_ degrees.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="200px" height="200px">
+            <g style="opacity: 0.3">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g transform="skewY(-10)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example8" width="200px" height="200px">
+    <style>
+    #example8 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example8 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g style="opacity: 0.3">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g transform="skewY(-10)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+</svg>
+
+### Transform chain
+
+You can chain transforms by specifying multiple transformation functions
+separated by spaces in the `transform` attribute. They will be applied in
+reverse order. The following example rotates the group before translating it.
+The intermediary steps are shown with an opacity of 0.3 and the centre of
+rotation is shown in blue.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="300px" height="300px">
+            <g style="opacity: 0.3">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g style="opacity: 0.3" transform="rotate(45 100 100)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g transform="translate(100) rotate(45 100 100)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <circle cx="100" cy="100" r="5" stroke="black" stroke-width="1" fill="blue" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example9" width="300px" height="300px">
+    <style>
+    #example9 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example9 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g style="opacity: 0.3">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g style="opacity: 0.3" transform="rotate(45 100 100)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g transform="translate(100) rotate(45 100 100)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <circle cx="100" cy="100" r="5" stroke="black" stroke-width="1" fill="blue" />
+</svg>
+
+The following example translates the group before rotating it.
+The intermediary steps are shown with an opacity of 0.3 and the centre of
+rotation is shown in blue.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        g {
+            stroke: black;
+            stroke-width: 3;
+            fill: red;
+        }
+        rect.accent {
+            fill: green;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="300px" height="300px">
+            <g style="opacity: 0.3">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g style="opacity: 0.3" transform="translate(100)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <g transform="rotate(45 100 100) translate(100)">
+                <rect x="50" y="50" width="120" height="80" />
+                <rect x="150" y="150" width="40" height="40" />
+                <rect x="100" y="100" width="60" height="60" class="accent" />
+            </g>
+            <circle cx="100" cy="100" r="5" stroke="black" stroke-width="1" fill="blue" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example10" width="300px" height="300px">
+    <style>
+    #example10 g {
+        stroke: black;
+        stroke-width: 3;
+        fill: red;
+    }
+    #example10 rect.accent {
+        fill: green;
+    }
+    </style>
+    <g style="opacity: 0.3">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g style="opacity: 0.3" transform="translate(100)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <g transform="rotate(45 100 100) translate(100)">
+        <rect x="50" y="50" width="120" height="80" />
+        <rect x="150" y="150" width="40" height="40" />
+        <rect x="100" y="100" width="60" height="60" class="accent" />
+    </g>
+    <circle cx="100" cy="100" r="5" stroke="black" stroke-width="1" fill="blue" />
+</svg>
+
+-----
+This ends our third SVG lesson, we hope you enjoyed it and learnt something.
+If you have some spare time how about going back through this tutorial and,
+by yourself, make some amendments. If there is something you did not understand
+or want to give us some feedback, please [send us an email.](mailto:feedback@codebar.io)
+
+## Further reading
+
+* [Mozilla SVG transform tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)
+* [Mozilla CSS transform documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
diff --git a/svg/lesson4/images/owl-with-attitude.jpg b/svg/lesson4/images/owl-with-attitude.jpg
new file mode 100644
index 00000000..8fb29ef0
Binary files /dev/null and b/svg/lesson4/images/owl-with-attitude.jpg differ
diff --git a/svg/lesson4/tutorial.md b/svg/lesson4/tutorial.md
new file mode 100644
index 00000000..ddc2ea6e
--- /dev/null
+++ b/svg/lesson4/tutorial.md
@@ -0,0 +1,422 @@
+---
+layout: page
+title: Advanced SVG
+---
+
+## Advanced SVG
+
+### Objectives
+
+In this tutorial we are going to look at advanced SVG techniques:
+
+* Embedded Images
+* Links
+* Colour gradients
+* Text path
+* Markers
+
+### Goal
+
+By the end of this tutorial, you'll have mastered advanced SVG concepts.
+
+## Embedded Images
+
+SVG allows you to embed other images in your vector graphics. In particular,
+you can embed any type of images that your browser support such as very important
+owl photographs. You do that using the `<image>` tag. The key attribute for this
+tag is the `xlink:href` attribute that specifies where to find the embedded
+image. When doing this, you may add an `xmlns:xlink` attribute to the
+top level `<svg>` tag to ensure that the browser recognises the `xlink:` prefix.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="280px" height="250px" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <rect x="10" y="10" width="260" height="180" fill="yellow" stroke="black" stroke-width="2" />
+            <image xlink:href="./images/owl-with-attitude.jpg" x="20" y="20" height="160px" width="240px"/>
+            <text x="140" y="230" style="text-anchor: middle; fill: red; font-size: 24px;">Don't mess with this owl!</text>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example1" width="280px" height="250px" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect x="10" y="10" width="260" height="180" fill="yellow" stroke="black" stroke-width="2" />
+    <image xlink:href="./images/owl-with-attitude.jpg" x="20" y="20" height="160px" width="240px"/>
+    <text x="140" y="230" style="text-anchor: middle; fill: red; font-size: 24px;">Don't mess with this owl!</text>
+</svg>
+
+## Links
+
+SVG supports the `<a>` tag in the same way as HTML. You can include any other
+tag in the `<a>` tag, which means that any shape or group of shapes can become
+a link. Links are not styled by default so it is worth adding a bit of CSS to
+do so. With this, we can add a link back to the source of the image.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+        <style>
+        svg a {
+            cursor: pointer;
+        }
+        svg a text {
+            fill: blue;
+            text-decoration: underline;
+        }
+        svg a:hover, svg a:active {
+            outline: dotted 1px blue;
+        }
+        </style>
+    </head>
+    <body>
+        <svg width="280px" height="250px" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <rect x="10" y="10" width="260" height="180" fill="yellow" stroke="black" stroke-width="2" />
+            <image xlink:href="./images/owl-with-attitude.jpg" x="20" y="20" height="160px" width="240px"/>
+            <text x="140" y="230" style="text-anchor: middle; fill: red; font-size: 24px;">Don't mess with this owl!</text>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example2" width="280px" height="250px" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+    svg#example2 a {
+        cursor: pointer;
+    }
+    svg#example2 a text {
+        fill: blue;
+        text-decoration: underline;
+    }
+    svg#example2 a:hover, svg#example2 a:active {
+        outline: dotted 1px blue;
+    }
+    </style>
+    <a href="https://www.flickr.com/photos/48509939@N07/5927758528">
+        <rect x="10" y="10" width="260" height="180" fill="yellow" stroke="black" stroke-width="2" />
+        <image xlink:href="./images/owl-with-attitude.jpg" x="20" y="20" height="160px" width="240px"/>
+        <text x="140" y="230" style="text-anchor: middle; fill: red; font-size: 24px;">Don't mess with this owl!</text>
+    </a>
+</svg>
+
+## Colour gradients
+
+Why keep to boring plain colours when you can have gradients? SVG gradients
+come in two categories:
+
+* linear gradients
+* radial gradients
+
+All gradients are defined inside a `<defs>` tag at the beginning of the SVG
+file and can be reused multiple times using the `url` function in the `fill`
+attribute of the shapes that use them.
+
+### Linear gradients
+
+Linear gradients are defined using the `<linearGradient>` element and contain
+a number of `<stop>` elements that include an offset and can specify a colour
+using the `stop-color` attribute and an opacity using the `stop-opacity`
+attribute. By default, gradients are horizontal. This behaviour can be
+modified using the `x1`, `y1`, `x2` and `y2` attributes:
+
+* a value of 0 for `x1` or `x2` represents the left side of the shape, while
+  a value of 1 represents the right side of the shape;
+* a value of 0 for `y1` or `y2` represents the top side of the shape, while
+  a value of 1 represents the bottom side of the shape.
+
+To draw a vertical gradient, set `x2` to 0 and `y2` to 1. To draw a diagonal
+gradient, set `x2` and `y2` to 1.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="400px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <defs>
+                <linearGradient id="LinearGradient1">
+                    <stop offset="5%" stop-color="rgb(255, 105, 180)" />
+                    <stop offset="18%" stop-color="red" />
+                    <stop offset="31%" stop-color="rgb(255, 142, 0)" />
+                    <stop offset="44%" stop-color="yellow" />
+                    <stop offset="56%" stop-color="rgb(0, 142, 0)" />
+                    <stop offset="69%" stop-color="rgb(0, 192, 192)" />
+                    <stop offset="82%" stop-color="rgb(64, 0, 152)" />
+                    <stop offset="95%" stop-color="rgb(142, 0, 142)" />
+                </linearGradient>
+                <linearGradient id="LinearGradient2" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="rgb(91, 206, 250)" />
+                    <stop offset="20%" stop-color="rgb(245, 169, 184)" />
+                    <stop offset="40%" stop-color="white" />
+                    <stop offset="60%" stop-color="white" />
+                    <stop offset="80%" stop-color="rgb(245, 169, 184)" />
+                    <stop offset="100%" stop-color="rgb(91, 206, 250)" />
+                </linearGradient>
+                <linearGradient id="LinearGradient3" x1="0" y1="0" x2="1" y2="1">
+                    <stop offset="20%" stop-color="red" />
+                    <stop offset="80%" stop-color="red" stop-opacity="0" />
+                </linearGradient>
+            </defs>
+            <rect x="10" y="10" width="180" height="90" fill="url(#LinearGradient1)" />
+            <rect x="10" y="110" width="180" height="90" fill="url(#LinearGradient2)" />
+            <circle cx="350" cy="150" r="45" fill="url(#LinearGradient1)" />
+            <circle cx="250" cy="50" r="45" fill="url(#LinearGradient2)" />
+            <path d="M210,110L240,150L210,190L250,170L290,190L260,150L290,110L250,130Z" fill="url(#LinearGradient2)" />
+            <rect x="310" y="10" width="80" height="80" fill="url(#LinearGradient3)" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example3" width="400px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient id="LinearGradient1">
+            <stop offset="5%" stop-color="rgb(255, 105, 180)" />
+            <stop offset="18%" stop-color="red" />
+            <stop offset="31%" stop-color="rgb(255, 142, 0)" />
+            <stop offset="44%" stop-color="yellow" />
+            <stop offset="56%" stop-color="rgb(0, 142, 0)" />
+            <stop offset="69%" stop-color="rgb(0, 192, 192)" />
+            <stop offset="82%" stop-color="rgb(64, 0, 152)" />
+            <stop offset="95%" stop-color="rgb(142, 0, 142)" />
+        </linearGradient>
+        <linearGradient id="LinearGradient2" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="rgb(91, 206, 250)" />
+            <stop offset="20%" stop-color="rgb(245, 169, 184)" />
+            <stop offset="40%" stop-color="white" />
+            <stop offset="60%" stop-color="white" />
+            <stop offset="80%" stop-color="rgb(245, 169, 184)" />
+            <stop offset="100%" stop-color="rgb(91, 206, 250)" />
+        </linearGradient>
+        <linearGradient id="LinearGradient3" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="20%" stop-color="red" />
+            <stop offset="80%" stop-color="red" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+    <rect x="10" y="10" width="180" height="80" fill="url(#LinearGradient1)" />
+    <rect x="10" y="110" width="180" height="80" fill="url(#LinearGradient2)" />
+    <circle cx="350" cy="150" r="45" fill="url(#LinearGradient1)" />
+    <circle cx="250" cy="50" r="45" fill="url(#LinearGradient2)" />
+    <path d="M210,110L240,150L210,190L250,170L290,190L260,150L290,110L250,130Z" fill="url(#LinearGradient2)" />
+    <rect x="310" y="10" width="80" height="80" fill="url(#LinearGradient3)" />
+</svg>
+
+### Radial gradients
+
+Radial gradients start from a centre and radiate out. They also have a focal
+point. By default, the center is the center of the shape's bounding box
+and the focal point is the same point as the center. This can be customised:
+
+* The `cx` and `cy` properties change where the center of the gradient is
+  placed as a proportion of width and height of the shape (the default
+  of 0.5 is the center);
+* The `fx` and `fy` properties specify the focal point of the gradient as a
+  proportion of the width and height of the shape;
+* The `r` property specifies the total gradient radius as a proportion to the
+  size of the shape, which makes it possible to constrain a gradient to part of
+  the shape.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="400px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <defs>
+                <radialGradient id="RadialGradient1">
+                    <stop offset="0%" stop-color="white" />
+                    <stop offset="50%" stop-color="rgb(245, 169, 184)" />
+                    <stop offset="100%" stop-color="rgb(91, 206, 250)" />
+                </radialGradient>
+                <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+                    <stop offset="0%" stop-color="white" />
+                    <stop offset="100%" stop-color="red" />
+                </radialGradient>
+                <radialGradient id="RadialGradient3" cx="0.5" cy="0.5" fx="0.25" fy="0.25" r="0.5">
+                    <stop offset="0%" stop-color="white" />
+                    <stop offset="100%" stop-color="red" />
+                </radialGradient>
+            </defs>
+            <rect x="10" y="10" width="180" height="90" fill="url(#RadialGradient1)" />
+            <path d="M10,110L40,150L10,190L50,170L90,190L60,150L90,110L50,130Z" fill="url(#RadialGradient1)" />
+            <circle cx="250" cy="100" r="45" fill="url(#RadialGradient2)" />
+            <circle cx="350" cy="100" r="45" fill="url(#RadialGradient3)" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example4" width="400px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <radialGradient id="RadialGradient1">
+            <stop offset="0%" stop-color="white" />
+            <stop offset="50%" stop-color="rgb(245, 169, 184)" />
+            <stop offset="100%" stop-color="rgb(91, 206, 250)" />
+        </radialGradient>
+        <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+            <stop offset="0%" stop-color="white" />
+            <stop offset="100%" stop-color="red" />
+        </radialGradient>
+        <radialGradient id="RadialGradient3" cx="0.5" cy="0.5" fx="0.25" fy="0.25" r="0.5">
+            <stop offset="0%" stop-color="white" />
+            <stop offset="100%" stop-color="red" />
+        </radialGradient>
+    </defs>
+    <rect x="10" y="10" width="180" height="90" fill="url(#RadialGradient1)" />
+    <path d="M10,110L40,150L10,190L50,170L90,190L60,150L90,110L50,130Z" fill="url(#RadialGradient1)" />
+    <circle cx="250" cy="100" r="45" fill="url(#RadialGradient2)" />
+    <circle cx="350" cy="100" r="45" fill="url(#RadialGradient3)" />
+</svg>
+
+## Text path
+
+Text doesn't have to follow a straight path, it can go all curvy with the
+`<textPath>` element. For this to work, we need to define a path inside the
+`<defs>` tag and tell the text to follow it.
+
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg width="200px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <defs>
+                <path id="TextPath1" d="M20,100C70,20 130,120 180,100" />
+            </defs>
+            <text font-size="40px">
+                <textPath href="#TextPath1">
+                    Curvy text
+                </textPath>
+            </text>
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example5" width="200px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="TextPath1" d="M20,100C70,20 130,120 180,100" />
+    </defs>
+    <text font-size="40px">
+        <textPath href="#TextPath1">
+            Curvy text
+        </textPath>
+    </text>
+</svg>
+
+## Markers
+
+If you plan to create diagrams with SVG, you will want to create arrows at some
+point. With what we've learnt so far, you would have to create additional shapes
+and position them at the end of lines. There is an easier way to achieve this
+result, using the `<marker>` element. A marker is defined inside the `<defs>`
+tag and encloses a shape. This shape is then references when drawing a line to
+be position on any of the start, mid or end points of the line.
+
+The orientation of the marker is driven by the `orient` attribute, which can
+take the values `auto`, `auto-start-reverse` or a number that indicates a fixed
+angle. By default, it is set to 0. See the difference between the blue and green
+markers on the polyline.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>SVG Tutorial</title>
+    </head>
+    <body>
+        <svg id="example6" width="400px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <defs>
+                <marker id="MarkerArrow" viewBox="0 0 10 10" refX="5" refY="5"
+                        markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                    <path d="M 0 0 L 10 5 L 0 10 z" />
+                </marker>
+                <marker id="MarkerDot" viewBox="0 0 10 10" refX="5" refY="5"
+                        markerWidth="5" markerHeight="5">
+                    <circle cx="5" cy="5" r="5" fill="red" />
+                </marker>
+                <marker id="MarkerSquare1" viewBox="0 0 10 10" refX="5" refY="5"
+                        markerWidth="5" markerHeight="5" orient="auto">
+                    <rect x="0" y="0" width="10" height="10" fill="blue" />
+                </marker>
+                <marker id="MarkerSquare2" viewBox="0 0 10 10" refX="5" refY="5"
+                        markerWidth="5" markerHeight="5" orient="45">
+                    <rect x="0" y="0" width="10" height="10" fill="green" />
+                </marker>
+            </defs>
+            <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="2" marker-end="url(#MarkerArrow)" />
+            <line x1="10" y1="100" x2="190" y2="100" stroke="black" stroke-width="2" marker-start="url(#MarkerArrow)" />
+            <line x1="10" y1="150" x2="190" y2="150" stroke="black" stroke-width="2"
+                marker-start="url(#MarkerArrow)"  marker-end="url(#MarkerArrow)" />
+            <polyline points="210,190 240,80 275,150 320,60 355,100 390,10"
+                fill="none" stroke="grey" stroke-width="3"
+                marker-start="url(#MarkerSquare1)" marker-mid="url(#MarkerDot)" marker-end="url(#MarkerSquare2)" />
+        </svg>
+    </body>
+</html>
+```
+
+<svg id="example6" width="400px" height="200px" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <marker id="MarkerArrow" viewBox="0 0 10 10" refX="5" refY="5"
+                markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" />
+        </marker>
+        <marker id="MarkerDot" viewBox="0 0 10 10" refX="5" refY="5"
+                markerWidth="5" markerHeight="5">
+            <circle cx="5" cy="5" r="5" fill="red" />
+        </marker>
+        <marker id="MarkerSquare1" viewBox="0 0 10 10" refX="5" refY="5"
+                markerWidth="5" markerHeight="5" orient="auto">
+            <rect x="0" y="0" width="10" height="10" fill="blue" />
+        </marker>
+        <marker id="MarkerSquare2" viewBox="0 0 10 10" refX="5" refY="5"
+                markerWidth="5" markerHeight="5" orient="45">
+            <rect x="0" y="0" width="10" height="10" fill="green" />
+        </marker>
+    </defs>
+    <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="2" marker-end="url(#MarkerArrow)" />
+    <line x1="10" y1="100" x2="190" y2="100" stroke="black" stroke-width="2" marker-start="url(#MarkerArrow)" />
+    <line x1="10" y1="150" x2="190" y2="150" stroke="black" stroke-width="2"
+        marker-start="url(#MarkerArrow)"  marker-end="url(#MarkerArrow)" />
+    <polyline points="210,190 240,80 275,150 320,60 355,100 390,10"
+        fill="none" stroke="grey" stroke-width="3"
+        marker-start="url(#MarkerSquare1)" marker-mid="url(#MarkerDot)" marker-end="url(#MarkerSquare2)" />
+</svg>
+
+## Beyond the tutorials
+
+This tutorial goes through the basics of creating images with SVG. If you want
+to go beyond this, here are a couple of articles that present advanced topics:
+- [Accessible SVGs](https://css-tricks.com/accessible-svgs/): one of the key
+  advantage of inline SVG is that the tags that form the image are part of the
+  main Document Object Model and can be made accessible to technologies like
+  screen readers.
+- [How to Scale SVG](https://css-tricks.com/scale-svg/): all examples in the
+  tutorial use hard-coded width and height but it doesn't have to be that way,
+  SVG is designed to scale and this article will show you how.
+
+-----
+This ends our fourth SVG lesson, we hope you enjoyed it and learnt something.
+If you have some spare time how about going back through this tutorial and,
+by yourself, make some amendments. If there is something you did not understand
+or want to give us some feedback, please [send us an email.](mailto:feedback@codebar.io)
+
+## Further reading
+
+* [Mozilla gradient tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients)
+* [Mozilla `textPath` documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath)
+* [Mozilla `marker` documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker)