I'm having issues with large amounts of whitespace surrounding an SVG in internet explorer. I've created the simplest example I could that reproduces the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
svg {
border: 1px solid red;
}
</style>
</head>
<body>
<svg width="600" height="600" viewbox="0 0 600 600">
<rect fill="powderblue" x="0" y="0" width="600" height="600"/>
<text x="500" y="500">test</text>
</svg>
</body>
</html>
Viewing this in IE11 produces a large amount whitespace to the right and below the SVG. Note the scrollbars in the screenshot below, indicating the large amount of empty space in IE but not in Chrome.
The whitespace disappears if I do any of the following:
- Remove the viewbox attribute
- Move the text further to the top right
- Delete the text (don't have to delete the text tags, just the content)
As an experiment I added a paragraph below the SVG to see if the whitespace would displace the paragraph. The paragraph appeared directly below the SVG - it wasn't displaced by the whitespace.
Any idea how I can fix this so that the whitespace doesn't appear?
viewbox
(which should beviewBox
BTW) does not change anything here. Perhaps post a screenshot that shows what you think is going wrong.xmlns="http://www.w3.org/2000/svg"