Back

How to SVG

July 15, 2018

Scalable Vector Graphics (SVG) are an image format, but unlike the usual suspects jpg, png, and gif, they are markup-based, meaning the code which generates the image is readable, and we can manipulate the graphic quite easily with code.

While you can always use a program like Sketch to build these graphics yourself, it can be incredibly useful to understand what’s going on inside, especially if you want to build dynamic, code-driven graphics on the web.

Getting Started

If you’re familiar with HTML, then getting your head around SVG isn’t too complicated, as they are both built on the eXtensible Markup Language (XML), meaning they are made up of tags with attributes. For example, let’s take this fairly innocuous example graphic:

SVG Text

Opening the SVG in a text editor allows us to peek behind the curtain, so we can see the markup that creates this graphic. It looks like this:

<svg viewbox="0 0 200 100">
  <!-- Rectangle -->
  <rect x="75" y="10" width="60" height="45" fill="orange" />
  <!-- Circle -->
  <circle cx="30" cy="55" r="30" fill="blue" />
  <!-- Text -->
  <text x="100" y="85" font-size="20" fill="var(--text-color)">
    SVG Text
  </text>
</svg>

As you can probably already decipher, the elements of the graphic are each defined by tags you can see in the markup. For example, the orange rectangle is defined by the tag.

Just like in HTML, SVG has a bunch of semantically named tags which you can use to build up a graphic.

Some HTML Tags

<body>
<div>
<header>
<footer>
<h1>
<p>
<section>
<article>

Some SVG Tags

<svg>
<rect>
<circle>
<ellipse>
<line>
<polygon>
<path>
<polyline>
<text>

In this article, I’d like to take you through some of the basics of SVG markup, and teach you enough syntax to get started working with SVG.

The SVG tag

To begin with, let’s start with the one tag every SVG graphic must have: the <svg> tag.

This tag will wrap your entire graphic, and is used to set up your graphic.

<svg viewBox="0 0 100 100">
  <!-- All the bits and pieces will go in here -->
</svg>

Take note of the viewBox attribute here. Although there are a number of attributes you can set on the <svg> tag, viewBox is the only required  attribute — every SVG must have a viewBox.

I like to think of defining the viewbox as kind of like drawing up a grid to draw on. You give the viewBox four numbers:

viewBox="offset-x offset-y width height"

We’ll take a look at the last two numbers first. These are quite simple, they set up the grid for you to work with. For example, a viewBox with these numbers each set to 10:

<svg viewBox="0 0 10 10">

This will set up your graphic with a grid of 10 by 10, which we will align all the elements of our graphic to:

0,0 10,10

Then we can look at the other two viewbox values, the offset values. These allow you to move where the grid start point is. For example, if we set both of the offsets here to be 5:

<svg viewBox="5 5 10 10">

This offsets the graphic by 5 values each, like so:

5,5 10,10

Now that we know how to use the viewbox to set up our graphic, let’s see how we can start drawing some things onto that artboard.

Circles & Rectangles

A good place to start with is simple circles and rectangles, as these are really easy to draw with SVG. A circle tag looks like this:

<circle cx="3" cy="3" r="2" />

If we put this circle into our original SVG like so:

<svg viewBox="0 0 10 10">
  <circle cx="3" cy="3" r="2" />
</svg>

We get a circle appearing, with the cx and cy attributes aligning the circle to the viewbox, at 3,3. The r attribute sets the radius to 2 units, giving us a circle which is 4x4 in size.

To create irregularly sized ellipses, the <ellipse> tag can be used:

<ellipse cx="2.5" cy="7" rx="1.5" ry="1" />

These are very similar to <circle> tags, but you must provide both a rx and  ry for the x and y radiuses respectively.

Rectangles are similarly simple:

<rect x="6" y="5" width="3" height="4" />

You should note that the attributes are different to those we used with the circle. Each tag in SVG has it’s own attribute syntax, so the way we align the rectangle to the grid and adjust it’s size is slightly different.

Here we use the x and y attributes to position the rectangle on the grid, and the width and height attributes to define the size.

Now that we know how to draw elements like rectangles and circles, we next need to know how we can style them.

Fill — Adding colour

In order to add colour to your elements, SVG has a variety of styling attributes you can apply to elements.

Let’s start with fill, which we can use to change the colour of elements. On most elements, you can apply a fill attribute, and give it a valid colour definition, to change the colour of that element. For instance, if we edit the rectangle in our graphic:

<rect x="6" y="5" width="3" height="4" fill="#78d237" />

Then we can see that this changes the colour of the rectangle to green.

Now that we can add some simple shapes to our graphic, and can give them some colours.

Simple Lines

If we want to draw a line, there are a number of options available to us, but the simplest options are the <line> and <polyline> tags.

<line x1="2" y1="5" x2="8" y2="5" />

The <line> tag is a real breeze to use. All you need to do is give it the start and end points using the x1, x2, y1, and y2 attributes.

2,5 8,5

We are, however, limited to just straight lines, so if we want to draw something a little more complex we may want to look to the <polyline> tag, which allows us to draw lines with multiple points.

<polyline points="5,2 8,5 5,8" />

With the <polyline> tag, you can use the points attribute to pass a series of x/y coordinates to draw between:

Now if you’ve been playing along at home, you might have noticed these lines aren’t visible yet, as we need to add some kind of outline to them. This is where stroke attributes come in.

Stroke

If we want to add stroke to an element, we can use the stroke attributes. There are a fair few different stroke related attributes we can use:

  • stroke: The color of the stroke (can also be a gradient or image).
  • stroke-width: The width of the stroke.
  • stroke-dasharray: You can define ‘dashes’ in the line stroke.
  • stroke-dashoffset: A property that allows you to move the ‘start’ of the stroke.

To get an understanding of what these do, play around with the range sliders below to see what each attribute does:

stroke-width: 1
stroke-dasharray: 0
stroke-dashoffset: 0

There are also two attributes which are used to change the caps and joins of paths:

  • stroke-linecap: The shape at the ends of the strokes (eg. butt, square, round).
  • stroke-linejoin: Controls how the join between two line segments is drawn (eg. miter, round, bevel).

Throwing all these tags and attributes together, we can turn our original SVG into some almost passable abstract art.

Okay so maybe passable is a stretch, but you get the picture. With the tags and attributes we’ve been introduced to, we can already start to draw some interesting graphics.

Adding Text

The <text> tag can be used to add text to your graphic.

<text x="1" y="9" font-size="1">
  Some SVG text!
</text>

The x and y attributes determines the coordinates of the starting point of the text baseline. Keep in mind that text in this tag will not be able to wrap like it does in HTML, so you will need to create each line of text individually.

Some SVG text!

Adding Images

Images are similarly relatively easy to add to your graphic.

<image xlink:href="image.png" x="1" y="1" width="8" height="8" />

The image tag takes an xlink:href attribute to link to the image file, plus x, y, width, and height attributes that define the position and size of the image.

Let’s add an image to go with our text:

Some SVG text!

And voila! We have created a passable little poster (Okay, again, passable is pushing it).

Ready to start

By this point, we have been introduced to a number of the basic building blocks of SVG, including:

  • The <svg> tag
  • The viewbox attribute
  • Rectangles, Circles & Ellipses
  • Fill
  • Lines
  • Stroke
  • Text & Images

Understanding the tags and attributes that are detailed here gives you a solid foundation for beginning to work with SVG.

Next time, we’ll be taking a look at the SVG tag to end all SVG tags, the path tag.

© 2021