title: Fit/Stretch SVG to div background without reescaling
body: <p>I have this SVG file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
      &lt;!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"&gt;
  ]&gt;
  &lt;svg version="1.1"
       xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
       x="0px" y="0px" width="1px" height="100%" viewBox="64 0 1 26" enable-background="new 64 0 1 26" xml:space="preserve"&gt;
  &lt;defs&gt;
  &lt;/defs&gt;
  &lt;path id="Outer_dark_border_1_" opacity="0.8" fill="#2F5870" d="M244,0H12C5.373,0,0,5.373,0,12v218v14v12h12h232h12v-12v-14V12
      C256,5.373,250.627,0,244,0z M255,225v5v25H1v-25v-5V12.906C1,6.331,6.331,1,12.906,1h230.188C249.669,1,255,6.331,255,12.906V225z"
      /&gt;
  &lt;path id="Outer_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M243.094,1H12.906C6.331,1,1,6.331,1,12.906V234v9.094V255h11.906
      h230.188H255v-11.906V234V12.906C255,6.331,249.669,1,243.094,1z M254,24v230H2V24V13C2,6.925,6.925,2,13,2h230
      c6.075,0,11,4.925,11,11V24z"/&gt;
  &lt;linearGradient id="Top_gradient_2_" gradientUnits="userSpaceOnUse" x1="128" y1="24" x2="128" y2="2"&gt;
      &lt;stop  offset="0.48" style="stop-color:#427B9D"/&gt;
      &lt;stop  offset="0.52" style="stop-color:#5D8EAB"/&gt;
  &lt;/linearGradient&gt;
  &lt;path id="Top_gradient_1_" opacity="0.8" fill="url(#Top_gradient_2_)" d="M243,2H13C6.925,2,2,6.925,2,13v11h11h230h11V13
      C254,6.925,249.075,2,243,2z"/&gt;
  &lt;path id="Inner_dark_border_1_" opacity="0.8" fill="#2F5870" d="M8,25v223h240V25H8z M247,247H9V26h238V247z"/&gt;
  &lt;path id="Inner_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M7,24v225h242V24H7z M248,248H8V25h240V248z"/&gt;
  &lt;polygon id="Solid_border_1_" opacity="0.8" fill="#427B9D" points="249,24 249,249 7,249 7,24 2,24 2,254 10,254 254,254 254,246 
      254,24 "/&gt;
  &lt;rect id="top_1_" x="64" fill="none" width="1" height="26"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and this HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;div style="background: url(top.svg); width: 900px; height: 100px;"&gt;
  asd
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the result looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LV5Dn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LV5Dn.png" alt="(Image link broken)"></a>
  </p>
  
  <p>What I want is the SVG to stretch to the container. As you can see from the "asd", it only stretches the SVG horizontally, and centers vertically. I have tried to play around with dimensions and I have really no idea how to accomplish this.</p>
  
  <p>So, to be clear: I want the blue bar to fill the entire div, so that ASD is in the top of it.</p>
  
  <p>Update: when I change the height of the SVG from height="100%"  to height="26px", then it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/3axOF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3axOF.png" alt="(Image link broken)"></a>
  </p>
  
  <p>I am almost there, but still not there.</p>
  
  <p>and when changing width and height of svg element both to 100%, it looks like this which is not correct:</p>
  
  <p><a href="https://i.stack.imgur.com/DVpNK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DVpNK.png" alt="(Image link broken)"></a>
  </p>