What’s in my SVG?

So your designer gave you a fancy SVG icon. And it’s looking fine as hell. Crisp and everything. So you open it up in your favourite text-editor and see all kinds of black magic looking stuff passing by. What’s a viewBox? And what does xmlns even mean?

What is an SVG?

SVG is short for Scalable Vector Graphics. Crisp on every screensize, widt.. blablabla. Who am I kidding, nobody cares about stupid semantics.

“Get to the point, please” — Okay.

The <svg> element

Consider the following markup:

<svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" width="300" height="300" x="0" y="0" viewBox="0 0 150 150">
  <rect width="50" height="50" fill="red">
</svg>

Let’s focus on the <svg> and run through its attributes one by one:

• version: unnecessary. Remove it.
• id: just a regular ol’ HTML id
• xmlns: the tags we use inside of the SVG, like path and rect for example, don’t exist in HTML. They’re custom XML tags. But we need a way to tell the browser that, so it doesn’t panic and invalidates our code. The way we do that is by defining an XML namespace (xmlns). By pointing to the famous w3.org url, we’re telling the browser that it’s okay we’re using tags like path and rect.
• width: the width of the SVG in pixels
• height: the height of the SVG in pixels
• x: this attribute is only useful on an SVG when its nested inside another SVG. It will position the SVG on the x-axis relative to its parent SVG. When the SVG doesn’t have an SVG parent, the x attribute doesn’t do anything and you can simply remove it (like in our example).
• y: see x, but on the y-axis.

viewBox

Last, but certainly not last: the viewBox. This dude deserves its own little chapter, because this stuff is straight up wizardry and undoubtedly one of the most difficult aspects when getting into SVG.

The viewBox defines the viewable space inside your SVG. It consists of four values: min-x, min-y, width and height. We’ll be focussing on the width and height first, to get to the essence of this little pearl.

An SVG contains shapes (like rect and circle). The width, height, x and y attributes of these shapes are relative to the viewBox.

This is all very abstract, and still very illusive. So let’s illustrate this with some examples

Here’s a simple SVG with a width="300" and a height="300". No magic, no relative measurements. Just an HTML element of 300x300px. This is what we call the viewport.

The rectangle inside our SVG has a width="50" and height="50".

viewBox: Initial situation:

The viewBox is currently set to a width of 300 and a height of 300 (viewBox="0 0 300 300"). This means that the viewBox has the exact same measurements as the SVG viewport itself. And because everything inside the SVG is relative to the viewBox, the scale of everything inside the SVG is 1:1. So the rectangle is 50x50px.

Quick maths
50 (rectangle width) of 300 (viewBox width) = 16.67%
16.67% of 300 (SVG width) = 50px

viewBox: New situation

Now, try to change the viewBox width and height to 150 (viewBox="0 0 150 150").

Everything inside the SVG is relative to the viewBox. So when our viewBox is twice as small, and our rectangle has the same relative measurements, the rectangle will appear twice as large in actual pixels (100x100px).

Quick maths
50 (rectangle width) of 150 (viewBox width) = 33.33%
33.33% of 300 (SVG width) = 100px

Still a bit fuzzy? Try playing around with viewBox and the width and height of the rectangle in the Codepen. The best way to learn code is by coding!

The min-x and min-y-coordinates of the viewBox

When you try to set the min-x and the min-y coordinates of the viewBox, it will look like this action will move yourrect. This is not the case. The thing that’s being moved is your viewBox, as a mask if you will, on top of your SVG (viewport).

The box with the orange border is the viewBox. The big box is the viewport — Credits to Sara Soueidan

This image is from Sara Soueidan and her awesome blogpost “Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio”.

If you want to know more on SVG, you should visit her blog and the mentioned article. Its an amazing series and overall resource for webdevelopment.

More..?

Of course there’s a lot more to SVG’s, but by knowing what’s in your graphic, it won’t make you cry in fear when you see the syntax or try to modify something in it.

Extra resources on SVG’s

SVG Animations: From Common UX Implementations to Complex Responsive Animation — by Sarah Drasner

Using SVG with CSS3 and HTML5: Vector Graphics for Web Design — by Amelia Bellamy-Royds