6

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. Screenshot with Chrome on the left and IE on the right

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?

4
  • IE 11 displays just what any other browser would: a 600px by 600px powderblue square with a text positioned at 500px/500px. No special issue there. What do you want to achieve, exactly?
    – ccprog
    Commented Jun 29, 2017 at 15:05
  • It's not clear what you think is going wrong. Removing the viewbox (which should be viewBox BTW) does not change anything here. Perhaps post a screenshot that shows what you think is going wrong. Commented Jun 29, 2017 at 16:10
  • I can't reproduce the effect with IE 11.187.14393 on Windows 10 Pro Version 1607. On the other hand, the browser wouldn't show the SVG at all unless I stated the svg namespace xmlns="http://www.w3.org/2000/svg"
    – ccprog
    Commented Jun 30, 2017 at 14:16
  • I'm using Windows 7 at work.
    – William
    Commented Jul 2, 2017 at 17:40

2 Answers 2

3

It's obviously a bug in IE. One simple workaround is to set overflow: hidden on the SVG.

svg {
  overflow:hidden;
}
<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>

0

If the issue is the whitespace around the left and top of the svg box, try setting the body margin to 0

body{
    margin: 0;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.