I want to resize an svg image to 100% of screen width. Height should then overflow keeping the original height / width ratio

2
votes

I am placing an svg worldmap on a website (I have left only one path (country/region) in the code):

.mapcontainer {height: 120%; width: 100%;}
<div class="mapcontainer">
  <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">
    <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" />
  </svg>
</div>

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.

I have tried:

  • Setting width inside the svg element
  • Ignoring height with ! in the svg file and in css
  • Several uses of preserveaspectratio along with the viewbox, including none which was the only time the width got to 100%, though this warped height.

Your help is much appreciated!

3
htmlcsssvg
I see that the div is not closed, and do not understand why the xml-utf is there 'in space'. Can show us a bit more of your code?..thanks – Francis Hemsher
Thanks Francis. I removed unnecessary code and added the rest. – henjolo
I removed the viewBox and included the width="950" and height="620" in the svg. I don't have all paths to evaluate, but it looks OK for me. – Francis Hemsher

3 Answers

2
votes

What you probably want is to specify the preserveAspectRatio as slice on the svg, and only specify width in the css.

By setting just a width (and not a height) on the svg, the browser will automatically keep the aspect ratio.

You may also want to set a min-height of 100% in the CSS.

(I've added a red border to see what's happening)

.mapcontainer {width: 100%;}
<div class="mapcontainer">
  <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"
  preserveAspectRatio="xMidYMin slice">
    <rect fill="red" x="0" y="0" width="950" height="620" />
    <rect fill="white" x="10" y="10" width="930" height="600" />
    <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" />
  </svg>
</div>
0
votes

There is a new unit of measure in CSS called the vw, or viewport width -- you can fix the aspect ratio by setting its style to height:120vw as long as it fills 100% of the viewport width.

0
votes

I added a rect in the svg to see how it filled the div. Then I used the innerWidth/innerHeight to set svg width and height:

 document.addEventListener("onload", init(), false)

 function init() {
   var svgW = window.innerWidth
   var svgH = window.innerHeight
   svg2.setAttribute("width", svgW)
   svg2.setAttribute("height", svgH)
 }
<body style='font-family:arial;overflow:hidden;'>
  <div style="position:absolute;top:0px;left:0px;background-color:lightgreen">
    <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">
      <rect x="0" y="0" fill="lightblue" width="100%" height="100%" />
      <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" />
    </svg>
  </div>
</body>