Select Page

<SVG viewBox=”W T F ?”></SVG>

Recently I have been involved with a project that is pretty much centered around SVG’s. Almost unavoidably I encountered the viewBox attribute for SVG’s and even more unavoidably encountered problems with it. Min-x, min-y, width, height all seems straight forward. I’ve used these attributes countless times before on other things; I know what they do! As it turns out, no I don’t.

What I originally thought

To be completely honest when it came to min-x and min-y I just ignored these to begin with, it was the aspect ratio/scale I was having problems with so width and height were my priority. I figured these values would define how wide and how high my image is in px or whichever unit I specify. My image was too small, so I make these numbers a little bigger and bam! My image is now… even smaller?

How viewBox actually works

To get it out the way, min-x and min-y define your images origin in the viewPort. To move your image down use negative min-y and to move it right use negative min-x. Now to get into the counter-intuitive part; width and height. These are not the width and height of your image or your viewPort! Rather, they specify how your viewPort gets divided up into a Cartesian plane. This coordinate system is what your svg uses when it is rendered. This is why the larger the height/width, the smaller your image.

Example:

<svg width=”100″ height=”100″ viewBox=”0 0 100 100″></svg>

(Above) This will create a viewPort that is 100 pixels wide and 100 pixels high. It will then create a Cartesian plane that increments 1 pixel at a time. So the coordinate (1, 40) will be 1 pixel across and 40 pixels down.

<svg width=”100″ height=”100″ viewBox=”0 0 50 50″></svg>

(Above) This will also create a viewPort that is 100 pixels wide and 100 pixels high. We see a difference when it creates a Cartesian plane that increments 2 pixel at a time (100 pixels split into 50 divisions), so the coordinate (1, 40) will be 2 pixel across and 80 pixels down. See where the larger height = smaller image confusion occurs.

Min-x Min-why

With min-x and min-y as 0 0, your origin (0,0) is set in the top left corner. Like the SVG’s own coordinates, this uses the increments specified by the viewBox width and height values (Not the viewPort width and height attributes!).

Example:

<svg width=”100″ height=”100″ viewBox=”-10 -10 100 100″></svg>

(Above) This will create a viewPort that is 100 pixels wide and 100 pixels high. It will then create a Cartesian plane that increments 1 pixel at a time, so the coordinate (1, 40) will be 11 pixel across and 50 pixels down. Also remember negative numbers to move down/right, positive to move up/left.

<svg width=”100″ height=”100″ viewBox=”-10 -10 50 50″></svg>

(Above) This will also create a viewPort that is 100 pixels wide and 100 pixels high. We see a difference when it creates a Cartesian plane that increments 2 pixel at a time (100 pixels split into 50 divisions), so the coordinate (1, 40) will be 22 pixel across and 100 pixels down. Notice the origin is 20,20 and not 10,10.

Hopefully this sheds a little light on the viewBox attribute of SVG’s. For further reading you can find a more comprehensive SVG article here. It also has this really sweet interactive example so definitely give it a look.

From hard data to fluid design – Scott.

 

Scott blogs about how design can make data consumable and therefore valuable, including this great one on web accessibility, check it out.

%d bloggers like this: