title: I want to resize an svg image to 100% of screen width. Height should then overflow keeping the original height / width ratio
body: <p>I am placing an svg worldmap on a website (I have left only one path (country/region) in the code):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mapcontainer {height: 120%; width: 100%;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mapcontainer"&gt;
    &lt;svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 620"&gt;
      &lt;path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>From what I have researched the syntax above for the viewBox attribute should make an SVG scale to fill screen or container, but it hits 100% height of screen and leaves space on both sides in width. But I want this particular map to scale to 100% width of screen and overflow on height.</p>
  
  <p>I have tried:</p>
  
  <ul>
  <li>Setting width inside the svg element</li>
  <li>Ignoring height with ! in the svg file and in css</li>
  <li>Several uses of <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio" rel="nofollow">preserveaspectratio</a> along with the viewbox, including <em>none</em> which was the only time the width got to 100%, though this warped height.</li>
  </ul>
  
  <p>Your help is much appreciated!</p>