Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

Creating SVGs with Code

This may not be something you have to do often–because the tools we have make it so easy to create SVG images other ways–but it’s good to know how to create an SVG right in code, from scratch. For this tutorial, we’ll keep it simple and go through the fundamentals. You can see me walk through coding all of these examples in the full video tutorial.

SVGs can get complex with groups, paths, colors, and coordinates. It’s just XML, so the structure isn’t too difficult to understand. You’re already familiar with angle brackets, I’m sure. But knowing how to plug in the coordinates to render what you want can take some trial and error.

Drawing Squares

Here’s a simple rectangle in SVG:

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#56A0D3" />
</svg>

We start with our SVG tag and set the height and width of our viewport to 400 pixels.

Then we are going to use the rectangle element to create a square on our page.

In this case, because we haven’t specifically defined a unit of measurement for our width and height, the SVG viewport and shape size will be rendered as pixels. We can use a lot of familiar units in our SVG: px, em, pt, in, cm, mm, pc, ex. You can even set different elements to different units of measurement. We’ll stick with pixels in our examples.

In the rect element, the x and y coordinates are both zero, which means that the square will begin drawing at the top left corner of the viewport. We want the width and height of the rectangle to be 400 as well which is the same size as our viewport. We add in a fill color for this to make it a nice Carolina blue.

Now let’s draw a square inside of the square so we can nest them. Our second square needs to be slightly smaller so it fits inside of our larger square. This one also needs to start at different coordinates because we don’t want to overlap.

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3" />
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
</svg>

We’ve added another rect element but this time set the x,y coordinates to 50. This drops our drawing starting point down the y axis by 50 pixels and across the x axis by 50 pixels. Our second square will begin drawing inside the top left corner of the first square.

The width and height also need to be altered to be smaller than the “containing” rectangle. We’ll make it 300 pixel height and width so it fits inside. The fill for this one will be white so we can see it.

Let’s nest another square. We need to go through the same settings but just starting our drawing further down and across our x,y axis.

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3" />
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
  <rect x="100" y="100" width="200" height="200" fill="#56a0d3" />
</svg>

And here’s the final square with a fourth nesting.

<svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3"/>
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
  <rect x="100" y="100" width="200" height="200" fill="#56a0d3" />
  <rect x="150" y="150" width="100" height="100" fill="#fff" />
</svg>

That’s a straight-forward use of SVG rect. We’re also only using the width and height attributes to set our viewport in this example. There are additional attributes we can use in SVG. Let’s first review the viewBox attribute.

viewBox

The viewBox attribute can be a tricky beast because it operates differently than you might expect. The Viewbox is the part of the SVG canvas or viewport that you want to show. The attribute applies to the svg element.

Think about it in terms of a zoom in feature that gives you detail of just one area of a image, like product images. It crops everything else out and only shows the portion that you specify in the viewBox attribute. The rest is still there but it’s not just within the box you’re viewing.

I really like how Sara Soueidan put it in her excellent article SVG Coordinate Systems:

I like to visualize the SVG canvas with a viewBox the same way as Google maps. You can zoom in to a specific region or area in Google maps; that area will be the only area visible, scaled up, inside the viewport of the browser. However, you know that the rest of the map is still there, but it’s not visible because it extends beyond the boundaries of the viewport—it’s being clipped out.

Viewbox takes four values: x, y, width, and height.

If we wanted to add viewBox to our nested squares, we could do this:

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3" />
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
  <rect x="100" y="100" width="200" height="200" fill="#56a0d3" />
  <rect x="150" y="150" width="100" height="100" fill="#fff" />
</svg>

We’re setting the viewBox x and y coordinates to zero so there’s no cropping of the viewport. The viewBox itself is set to 400x400, which is the same as our SVG canvas or viewport. The image remains unchanged.

If we update our viewBox to have a height and width of 100, we’ll crop the image where the viewBox ends.

<svg width="400" height="400" viewBox="0 0 100 100">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3" />
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
  <rect x="100" y="100" width="200" height="200" fill="#56a0d3" />
  <rect x="150" y="150" width="100" height="100" fill="#fff" />
</svg>

Everything in the SVG will get bigger because each unit in height and width set in the svg element (the viewport) is now 4x. This happened because we reconfigured the coordinate system (you’ll see this called a “user coordinate system” because it’s something users can alter).

Each 1 pixel in our original SVG above is now represented as 4 pixels. That’s why the image now looks like it grew in size. What really happened is we adjusted the coordinates used to plot the rect elements.

With this code change, we now only see the upper left corner of our SVG.

Let’s increase this a bit more so we only seen the top left corner of blue of our SVG.

<svg width="400" height="400" viewBox="0 0 40 40">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3" />
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
  <rect x="100" y="100" width="200" height="200" fill="#56a0d3" />
  <rect x="150" y="150" width="100" height="100" fill="#fff" />
</svg>

Here we changed the viewBox to 0,0,40,40. The coordinate system still starts at 0,0 but ends only at 40,40. Because the coordiniate system has shifted again and now we are seeing an even smaller section of the original SVG image and our pixels are now showing at 10x size. One pixel in our original SVG is now rendered–using our new coordinate system–as 10 pixels. The original viewport was 400x400 and the viewBox was changed to 40x40, one tenth of the size. SVG then shows us 40x40 of the image–starting at 0,0–and then scales the image up to fit the 400x400 viewport.

Finally, let’s update the x,y coordinates where the viewBox begins.

<svg class="fill" width="400" height="400" viewBox="100 100 400 400">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3" />
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
  <rect x="100" y="100" width="200" height="200" fill="#56a0d3" />
  <rect x="150" y="150" width="100" height="100" fill="#fff" />
</svg>

For this example we changed the viewBox to 100,100,400,400. The coordinate system starts 100 in along both the x and y axis and ends at 400,400, which is the end of the image we drew. Our viewport is still 400x400 but since we’ve reached the bottom right end of the image, we have extra space in the botoom right of our viewport. By adding a class of fill to the SVG element and setting that background color to #ccc, we can see the rest of our viewport (just to confirm that the code is working as we expect!).

For one final trick with the viewBox attribute, let’s crop everything except the smallest square in the middle of our image.

<svg class="fill" width="400" height="400" viewBox="150 150 50 50">
  <rect x="0" y="0" width="400" height="400" fill="#56a0d3" />
  <rect x="50" y="50" width="300" height="300" fill="#fff" />
  <rect x="100" y="100" width="200" height="200" fill="#56a0d3" />
  <rect x="150" y="150" width="100" height="100" fill="#fff" />
</svg>

Because the smallest square is white, I added a border to the shape so we can see that it is there. We could also change the fill color of the shape for a sanity check.

For all of these examples, our original image is there still there. Using the viewBox attribute we have established a new grid and changed how the image is presented.

Further Learning

For a more comprehensive look at SVG and its coordinate system, I encourage you to look at Sara Soueidan’s three article series. In the series, Sara looks closely at the coordinate system in SVG, and how it alters depending on your view box and the viewport of the SVG image that you are working with.

Free Course Video

Part 2 of the Creating SVGs section of the video course is available, for free, for a limited time. 18 minutes of learning to go along with the tutorials on this site.

Ready to learn more?

Get the Full Video Course