How to scale SVG image to fill browser window?

layout xhtml svg scaling aspect-ratio

This seems like it ought to be easy, but I'm just not getting something.

I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio.

For example, at the moment I have a 1024x768 SVG image; if the browser viewport is 1980x1000 then I want the image to display at 1333x1000 (fill vertically, centred horizontally). If the browser was 800x1000 then I want it to display at 800x600 (fill horizontally, centred vertically).

Currently I have it defined like so:

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

However this is scaling up to the full width of the browser (for a wide but short window) and producing vertical scrolling, which isn't what I want.

What am I missing?

Inexplicably, I tried moving the inline style attributes to a CSS style block in the head, and after that it worked. I don't know why it made a difference. (Though I did need to add overflow: hidden -- otherwise there was a 4-pixel vertical scroll.)

And ... oh my god ... svg attributes are case sensitive! viewbox doesn't work!

Phrogz

How about:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

Or:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

I have an example on my site using (roughly) this technique, albeit with 5% padding all around, and using position:absolute instead of position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Using position:fixed prevents a very edge-case scenario of linking to a sub-page anchor on the page, and overflow:hidden can ensure that no scroll bars ever appear (in case you have extra content.)

And a late +1 for leaving that link up 2 years on.

Note that this solution relies on the viewBox attribute.

The link is still there, nearly 4 years later. Good work, @Phrogz!

Yes, thanks @Phrogz... And just in case it ever goes down, I made a codepen version: codepen.io/cyanos/full/XbXxOQ

And +1 for over 8 years

How to scale SVG image to fill browser window?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US