Forum How do I...?

viewBox Attribute Width and Height

redherring917
Hi there. I'm confused some by what the width and height values of the viewBox attribute should be for an SVG. Your documentation gives one SVG example as:

<svg width="3cm" height="2cm" viewBox="0 0 300 200">

And another as:

<svg width="5cm" height="5cm" viewBox="0 0 200 200">

I can see that the there is an obvious proportional relationship between the SVG's width and height and the viewBox width and height definition, but I don't understand the "unit" relationship (in the first example, 1cm = 100 viewBox units while in the second one 1cm = 40 viewBox units).

Thanks.



mikeday
The viewBox defines the coordinate system within the SVG file, while the width and height determine how big the SVG should be drawn in the containing document.
redherring917
Roger. Thanks Mike!