Reputation: 2002
I have a SVG with width and height set to 100% and the property "preserveAspectRatio" is set to "xMidYMid meet".
With google chrome, after adding tag (Making it HTML5) the behavior changes. The SVG element does not occupy all the space on page, and height of SVG is set in proportion to width automatically.
HTML without DOCTYPE - Working as expected
<html>
<head>
<style>
body{
padding:0;
margin:0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
style="width:100%;height:100%;background-color:#0f0"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 150">
<rect
x="11"
y="11"
width="80"
height="130"
style="stroke: #000000; fill:none;"/>
</svg>
</body>
</html>
HTML with DOCTYPE - Not working
<!DOCTYPE HTML>
<html>
<head>
<style>
body{
padding:0;
margin:0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
style="width:100%;height:100%;background-color:#f00"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 150">
<rect
x="11"
y="11"
width="80"
height="130"
style="stroke: #000000; fill:none;"/>
</svg>
</body>
</html>
Note :: The inline results snippets may be incorrect refer Plunker
Plunker Without DocType
Plunker With DocType
Upvotes: 7
Views: 8796
Reputation: 124059
If you set the width and height of the html and body elements you can get either result regardless of the presence of the html DOCTYPE
body, html {
padding:0;
margin:0;
height: auto;
width: 100%;
}
or
body, html {
padding:0;
margin:0;
height: 100%;
width: 100%;
}
legacy rendering simply has a different default for the default html height property. Both cases "work" provided you understand that, it's just a case of which one you want.
You may also want to make the svg element display: block e.g.
svg {
display: block;
}
Upvotes: 6