How do I fit svg to html width and height?

Question

I want to create a page contains only one svg element that fit width and height and has maximum possible scale.

score 4 · Accepted Answer · edited May 23 '17 at 12:34

Related questions

How can I make an svg scale with its parent container?

How to resize an image to fit in the browser window?

didn't work, but combination of proposed methods solved the problem.

1) replace width="A" height="B" in opening <svg ...> tag to viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto".

Now it nearly works But not very accurate because browser automatically adds margin: 8 to body's style (even if there is not <body> tag in .html file). So

2) add <style> body { margin: 0 } </style>

score 0 · Answer 2 · answered May 17 '17 at 15:59

This might help. I used this CSS to fit a background image to width and height and it scales down accordingly to the browser.

html { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

You can set your SVG in a DIV and add a class to it, then you simply use the above CSS to scale the DIV's content.

score 0 · Answer 3 · answered May 17 '17 at 16:09

0

put your image in a div, and apply these css rules:

div{
  height:100vw;
  height:100vh;
}
svg{
  height:100%;
  width:100%
}

answered May 17 '17 at 16:09

Amir Shahbabaie

1,352
2
14
33

2

Unfortunately that just crops the svg – Pavel May 17 '17 at 16:34

score 0 · Answer 4 · answered Dec 15 '22 at 10:34

Here is the solution for you guys. Check the link here

   html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
    
    .svg-cont {
      width: 100vh;
      height: 100vh;
      display: flex;
      justify-content: center;
      margin: auto;
    }
    .svg-cont > svg {
      width: 100%;
      height: 100%;
    }

How do I fit svg to html width and height?

4 Answers4