Im trying to scale a svg to the full size of the browser window. The svg object is inside a div with both height and width set to 100% I have tried playing with the viewBox inside the svg to no avail.

The screen Im using has a 1080p res.

    <div style="width:100%; height: 100%;">
      <object id="map" type="image/svg+xml" data="worldHigh.svg">Your browser does not support SVG</object>
    </div>

viewBox="0 0 1920 1000"

With these settings the svg displays with its normal size and does not scale to the size of the window.

When I set the width and height in the svg I can get it to the size of the display yet then the coordinates of the paths is wrong and sending a div to that spot is not where it should be.

Im trying to scale a svg to the full size of the browser window. The svg object is inside a div with both height and width set to 100% I have tried playing with the viewBox inside the svg to no avail.

The screen Im using has a 1080p res.

    <div style="width:100%; height: 100%;">
      <object id="map" type="image/svg+xml" data="worldHigh.svg">Your browser does not support SVG</object>
    </div>

viewBox="0 0 1920 1000"

With these settings the svg displays with its normal size and does not scale to the size of the window.

When I set the width and height in the svg I can get it to the size of the display yet then the coordinates of the paths is wrong and sending a div to that spot is not where it should be.

• javascript
• html
• css
• svg

• Try html,body{ height: 100%; } – Richard Foster Commented Sep 5, 2014 at 15:52
• No luck still displaying the same – Ernie Commented Sep 5, 2014 at 15:59

2 Answers 2

I think you are misunderstanding how viewBox works. It should describe the dimensions of your SVG contents, not your screen. The purpose of viewBox is to tell the browser the dimensions of the graphic content, so it knows how much it needs to scale it to fit the parent container.

So you need to find the minX, minY, width and height of the map. If it's the same file I found by Googling, then it looks like the correct viewBox is: viewBox="0 0 1010 666". Try that.

This article covers responsive svg in detail
http://tympanus/codrops/2014/08/19/making-svgs-responsive-with-css/