How to scale SVG image to fill browser window?
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.)