SVG Tutorial: Basics

Welcome to the first tutorial in a series of tutorials all about SVG’s! In this first tutorial we will cover these basics:

• Shapes: Such as circles, rectangles etc.
• Colour: Add fills and strokes to your shapes
• Positioning: Positioning elements within an SVG
• Transforms: Skew, Scale, Rotate, etc.
• Style Tags: Add more complex Transforms by using style tags

- Prerequisites

All you need is a notepad (for example the windows default one or Notepad++) and a browser (such as Chrome/Firefox). You are simply required to add text to a file with a “.svg” extension and the drag and drop this file into the browser, like so:

- Audience

This course is targeted primarily at web/UI developers who want to create simple and interactive SVG elements for their site. In this tutorial we will be learning about basic shapes, colours and positions. In the next tutorial series we will learn how to animate these shapes to create simple effects. In future tutorials we will learn how to integrate these SVG’s into our website. An example can be seen in the bottom right corner of this page. Watch how the SVG responds to page scrolls.

These lessons are all available on my Instagram too. If you have any questions try contacting me on there or email me

---

- 1. Basic Circle

Learn how to create a simple SVG circle:

1. Create a new text file named “lesson-1.svg”
2. Add a SVG element:

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

3. Inside the SVG element add a circle element:

<circle cx="100" cy="100" r="80"/>

4. Save the file. Drag and drop the svg file into a browser:

5. See a black circle. Marvel at your masterpiece.

- Details

SVG Element - Version
We need to add the SVG version so the browser knows how to read the SVG element. Version 1.1 (Second Edition) was released in 2011 and is the latest version. The next version will be 2.0.

SVG Element - XMLNS
The XML NameSpace declares the XML dialect to use. In this case it’s SVG:
http://www.w3.org/2000/svg

Circle Element
Surprisingly a circle element is used to draw a circle. The cx and cy attributes define the x and y position (which defaults to 0, 0). The r attribute defines the circles radius.

- Full Code

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80"/>
</svg>

---

- 2. Colour

Learn how to add colour to a simple SVG circle:

1. Create a new file named “lesson-2.svg”.
2. Create a circle element within a SVG element as before.
3. Add some colour to the circle:

<circle cx="100" cy="100" r="80" fill="blue" stroke="red" stroke-width="10"/>

4. Save the file and view your monstrosity in the browser as before.

- Details

Colours
Colours apply to both fill and stroke. They can be described in several ways:

• Name: “red”
• 3-digit hex: “#f00”
• 6-digit hex: “#ff0000”
• Decimal: “rgb(255,0,0)”
• Percentage: “rgb(100%,0%,0%)”

- Full Code

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" stroke="red" stroke-width="10"/>
</svg>

---

- 3. Other Shapes

Learn about the other available shapes:

1. Create a new file named “lesson-3.svg”
2. Create a 400 by 400 SVG element.
3. SVG has several predefined shape elements, let’s add some of them within our SVG element:

<rect x="50" y="50" width="300" height="300"/>
<circle cx="200" cy="200" r="150"/>
<ellipse cx="200" cy="200" rx="150" ry="75"/>
<polygon points="260,131 140,131 200,275"/>

4. Marvel at how the elements stack on top of each other based on the order they are declared!

- Details

Predefined Elements
SVG’s have many predefined shape elements, each with their own {attributes}:

<circle {cx}{cy} {r}>
cx: x position of the center of the circle
cy: y position of the center of the circle
r: radius

<rect {x} {y} {width} {height}>
x: x position from the upper left corner.
y: y position from the upper left corner.

<ellipse {cx} {cy} {rx} {ry}>
cx: x position of the center of the ellipse
cy: y position of the center of the ellipse
rx: horizontal radius
ry: vertical radius

<polygon {points}>
points: x,y position from the upper left corner.

- Full Code

<svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="300" height="300" fill="#264653"/>
  <circle cx="200" cy="200" r="150" fill="#2a9d8f"/>
  <ellipse cx="200" cy="200" rx="150" ry="75" fill="#e9c46a"/>
  <polygon points="260,131 140,131 200,275" fill="#e76f51"/>
</svg>

---

- 4. Positioning

Learn how to position elements within a SVG:

1. Create a new file named “lesson-4.svg”.
2. Create a 310 by 310 SVG element.
3. Add four squares to your SVG. Vary the position by changing the x & y attributes:

<rect x="50" y="50" width="100" height="100"/>
<rect x="50" y="160" width="100" height="100"/>
<rect x="160" y="50" width="100" height="100"/>
<rect x="160" y="160" width="100" height="100"/>

4. Add some colour (fill). Gaze upon at your new corporate logo.

- Details

Positions
Positions are measured in pixels from the top left corner of the SVG. This is known as the point of origin (x=0, y=0).

A positive x value moves the position to the right. A positive y value moves the position down.

It’s not always this simple but for now this understanding is good enough.

- Full Code

<svg width="310" height="310" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="#F44E24"/>
  <rect x="50" y="160" width="100" height="100" fill="#01A4EF"/>
  <rect x="160" y="50" width="100" height="100".fill="#81B900"/>
  <rect x="160" y="160" width="100" height="100" fill="#FFB902"/>
</svg>

---

- 5. Transform

Learn how to transform elements using groups:

1. Take a copy of “lesson-4.svg” and rename it “lesson-5.svg”.
2. Surround the rectangle elements with a group element:
3. Add a simple transform to the group:

<g transform="translate(50,50)">
  <rect .../>
</g>

4. All rectangles have now moved 50px right and 50px down.

- Details

Groups
Group elements are used to assign attrributes to multiple elements at once:

Translate
Move an element based on x/y coordinates:
transform="translate(50,50)"

Rotate
Rotates an element in degrees:
transform="rotate(45)"

Skew
2D Skew an element in degrees in either the x or y direction:
transform="skewX(15)"
transform="skewY(15)"

Scale
Scale an element in the x and/or y direction:
transform="scale(0.5)"
transform="scale(0.5, 1.5)"

- Full Code

<svg width="310" height="310" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50,50)">
    <rect x="50" y="50" width="100" height="100" fill="#F44E24"/>
    <rect x="50" y="160" width="100" height="100" fill="#01A4EF"/>
    <rect x="160" y="50" width="100" height="100" fill="#81B900"/>
    <rect x="160" y="160" width="100" height="100" fill="#FFB902"/>
  </g>
</svg>

---

- 6. Multiple Transform

Learn how to apply multiple transforms to elements:

1. Take a copy of “lesson-5.svg” and rename it “lesson-6.svg”.
2. Replace transform=”translate(50,50)” with transform="translate(-15.5, 15.5) scale(1.1) skewY(-10)".

<g transform="translate(-15.5, 15.5) scale(1.1) skewY(-10)">
  <rect .../>
</g>

3. The image is now skewed, scaled and transformed (in that order!).

- Details

Multiple Transform
It’s possible to apply multiple transformations at once to create more complex transforms.

For example to scale an object and keep its original center coordinates you will need to translate it in the x/y direction by the scale factor.

- Full Code

<svg width="310" height="310">
  <g transform="translate(-15.5, 15.5) scale(1.1) skewY(-10)">
    <rect x="50" y="50" width="100" height="100" fill="#F44E24"/>
    <rect x="50" y="160" width="100" height="100" fill="#01A4EF"/>
    <rect x="160" y="50" width="100" height="100" fill="#81B900"/>
    <rect x="160" y="160" width="100" height="100" fill="#FFB902"/>
  </g>
</svg>

---

- 7. Style Tags

Learn how to apply transforms within style tags:

1. Take a copy of “lesson-6.svg” and rename it “lesson-7.svg”.
2. Add some style tags within the SVG element
3. Add an “svg” selector within the style tags
4. Add the following CSS logic:

<style>
  svg {
    transform: perspective(600px) rotateY(-40deg) scale(1.4,1);
    -webkit-transform: perspective(600px) rotateY(-40deg) scale(1.4,1);
  }
</style>

- Details

Style Tag Transform
Style tags allow us to embed a style sheet within our SVG. In this case we have applied a transform to the whole SVG. We have applied the transform this way as it’s not possible to apply a 3D transform natively.

Note: The perspective transform won’t work in IE.

- Full Code

<svg width="310" height="310" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style>
    svg {
      transform: perspective(600px) rotateY(-40deg) scale(1.4, 1);
    }
  </style>
  <g>
    <rect .../>
  </g>
</svg>

---

- Summary

Good work! you have reached the end of the SVG Basics tutorial. You now know basic things about SVG’s. Feel free to take a moment to bask in this new found knowledge.

Moment over. Now move on to learning about SVG animations!

I hope this post was helpful. Please get in touch with any feedback you have:

- Resources

• MDN Web Docs
• W3C - An SVG Primer for Today’s Browsers
• w3schools - SVG Tutorial