Databases
StackOverflow2013
Postsdbo
POGetting SVG to scale with browser/device window
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting SVG to scale with browser/device window
    text
    copied!<p>OBJECTIVE I have an svg that I would like to scale with the browser window.</p> <p>Parameters</p> <p>a) It is to keep it's proportions (here a square)</p> <p>b)to fit the bowser/device window to 80%</p> <p>c)But to a maximum of 800px.</p> <p>d) I'm not interested in javascript solutions</p> <p>Code so far (although I've tried many combinations) SVG root element, the preserve aspect ratio has been left to default</p> <pre><code>svg viewBox="0 0 800 800" </code></pre> <p>and with regards to html &amp; viewport HTML (embedding with object)</p> <pre><code>object type="image/svg+xml" id="svgobject" data="question0final.svg" </code></pre> <p>CSS, things tried, amongst others...</p> <pre><code>#svgobject{ position:absolute; top:0; left:0; height:100%; width:100%} </code></pre> <p>(From; <a href="https://stackoverflow.com/questions/5643254/how-to-scale-svg-image-to-fill-browser-window">How to scale SVG image to fill browser window?</a>)</p> <pre><code>#svgobject{width:80%; max-width:800px; margin-right: auto; margin-left: auto;} </code></pre> <p>I've read a number of good resources, but I can't work out my errors</p> <p>FYI here are some of the better links I've found on SVG positiioning</p> <p><a href="https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files">Do I use &lt;img&gt;, &lt;object&gt;, or &lt;embed&gt; for SVG files?</a></p> <p><a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html" rel="nofollow noreferrer">http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html</a></p> <p><a href="http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii" rel="nofollow noreferrer">http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii</a></p> <p><a href="http://www.w3.org/TR/SVG/coords.html" rel="nofollow noreferrer">http://www.w3.org/TR/SVG/coords.html</a></p> <p><a href="http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/" rel="nofollow noreferrer">http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/</a></p> <p><a href="https://developer.mozilla.org/en/CSS/Scaling_of_SVG_backgrounds" rel="nofollow noreferrer">https://developer.mozilla.org/en/CSS/Scaling_of_SVG_backgrounds</a></p> <p>(I find that SVGs as CSS backgound seem to pixelate)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload