title: How can I make a .svg file to fill a 100% width of its <div> container?
body: <p>Hi, </p>
  
  <p>I'm trying to insert a .SVG into a div container. My problem is that I can't make the svg file to stretch itself to a 100% width. My code is the following:</p>
  
  <pre><code>&lt;html&gt; 
     &lt;div id="frame1"&gt;
       &lt;img src="svg/layer1.svg"&gt;
     &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#frame1{
        width:100%;
        height: 400px;
        background-color: transparent;
  }
  </code></pre>
  
  <p>SVG file:</p>
  
  <pre><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px"width="800px" height="400px" viewBox="0 0 800 400" 
  enable-background="new 0 0 800 400" xml:space="preserve"&gt;
  &lt;g&gt;&lt;defs&gt;&lt;rect id="SVGID_1_" x="0" y="-0.371" width="800" height="400.742"/&gt;
  </code></pre>
  
  <p>I tried with set <code>preserveAspectRatio="none"</code>, and setting width to 100% inside the svg parameters but it is not working so far. </p>
  
  <p>Thanks in advance</p>