0

I was just going through THIS SVG article. I came across the following example explaining the viewbox:

<svg width="500" height="200" viewBox="0 0 50 20" >

    <rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>

</svg>

The article explains the viewbox in the above example as follows;

In this case the view box starts at 0,0 and is 50 wide and 20 high. That means, that the 500 by 200 pixels element internally uses a coordinate system that goes from 0,0 to 50,20. In other words, every 1 unit in the coordinates used in the shapes inside the corresponds to 500/50 = 10 pixels in the width, and 200/20 = 10 pixels in the height. That is why the rectangle with a x-position of 20 and an y-position of 10 is really located at 200,100, and its width (10) and height (5) corresponds to 100 pixels and 50 pixels.

Now my question is why is the viewbox needed when an SVG already has a width and height ? I am new to SVG and i don't see a compelling enough reason to use viewbox. can somebody explain why does viewbox get used ?

Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
  • I've always used viewboxing to have dynamically sized SVGs - set the width and height to 100% and let the viewbox handle scaling. Just an opinion though, not an answer. – Scott Jul 26 '16 at 20:53
  • @ScottKaye can u put in an answer an example of what your saying , because i still don't quite get it :) – Alexander Solonik Jul 26 '16 at 21:17
  • Why don't you just display the SVG in the browser then remove the viewBox and display it again. See the difference? – Robert Longson Jul 26 '16 at 21:29

0 Answers0