Inline SVG does not scale to height <p>I'm embedding an SVG inline with this code:</p> <pre><code>&lt;div id="svgInlineDiv" style='background-color:white'&gt;&lt;/div&gt; &lt;script&gt; document.addEventListener("onload",inlineSVG(),false); function inlineSVG() { var SVGFile="img/office_lights.svg"; var loadXML = new XMLHttpRequest; function handler(){ if(loadXML.readyState == 4 &amp;&amp; loadXML.status == 200) svgInlineDiv.innerHTML=loadXML.responseText } if (loadXML != null){ loadXML.open("GET", SVGFile, true); loadXML.onreadystatechange = handler; loadXML.send(); } } &lt;/script&gt; </code></pre> <p>The SVG header looks like this:</p> <pre><code>&lt;svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg9948" version="1.1" inkscape:version="0.48.5 r10040" sodipodi:docname="office_lights_source.svg" viewBox="0 0 1229.4684 1144.845" width="100%" height="100%"&gt; </code></pre> <p>This image scales only to the width of the browser windows, but not its height.</p> <p>The picture is roughly square. When I resize the browser window to be higher than it is wide, it is displayed nicely at full width. But when I resize the browser window to be wider than it is high (as one usually does on a widescreen monitor), the picture still shows at full width, forcing me to scroll down to see the lower part.</p> <p>I've tried playing around with <code>width</code> and <code>height</code> in the CSS as well as the SVG, but to no avail.</p> <p><strong>EDIT:</strong></p> <p>Solved by adding <code>height: 100vh</code> to the <code>div</code>s style.<br> Thanks, Paul LeBeau.</p>