Make svg scale to full screen size

Question

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.

Try `html,body{ height: 100%; }` – Richard Foster Sep 05 '14 at 15:52 — Richard Foster, Sep 05 '14 at 15:52
No luck still displaying the same – Ernie Sep 05 '14 at 15:59 — Ernie, Sep 05 '14 at 15:59

score 9 · Accepted Answer · answered Sep 06 '14 at 04:55

9

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.

answered Sep 06 '14 at 04:55

Paul LeBeau

97,474
9
154
181

The viewBox is close but not perfect, thanks. Now that I got it more or less displaying right accessing the id inside the svg getting the position on the screen and moving a div to it still moves it to the place it did when the map was its default size. So the map coordinates is not scaling with the map – Ernie Sep 08 '14 at 07:21
You need to convert between SVG coordinates and screen coordinates. There are ways to do that. – Paul LeBeau Sep 08 '14 at 07:37

score 6 · Answer 2 · answered Sep 05 '14 at 17:21

6

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

answered Sep 05 '14 at 17:21

Vivek Kumar Bansal

246
2
7

Have you tried any of the techniques mentioned in the article? – Vivek Kumar Bansal Sep 09 '14 at 04:54
I have and the solution was a mix of that and setting the correct viewBox settings – Ernie Sep 09 '14 at 11:28

Make svg scale to full screen size

2 Answers2

Linked