I am having problems with a lot of spaces surrounding SVG in Internet Explorer. I created a simple example that could reproduce 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 creates a large number of spaces to the right and below the SVG. Pay attention to the scroll bars in the screenshot below, indicating a large amount of white space in IE, but not in Chrome.
The space disappears if I do one of the following:
- Remove viewbox attribute
- Move the text in the upper right corner
- Delete text (no need to delete text tags, only content)
As an experiment, I added a paragraph below the SVG to see if the space will move the paragraph. The paragraph appeared directly under the SVG - it was not moved by a space.
, , ?