2

I have an SVG image as a background, with background-size:contain. In all browsers except IE, it looks perfect. However, in IE the bottom of the logo is cut off slightly and the edges are blurry.
I tried this(removing set width and height from SVG file) and this(adding a margin below) and it still cut off, and can't find anything about the blurry edges.

IE11 Rendering:
IE11 Rendering

Chrome/Firefox Rendering:
Chrome Rendering Firefox Rendering

Here's my CSS for how I'm displaying that image:

.header-container::before {
   content: "";
   display: block;
   width: 15em;
   padding: 0.825em 0;
   background-image: url('reed-logo-white.svg?1427895453');
   background-position: 0 0;
   background-repeat: no-repeat;
   background-color: transparent;
   background-size: contain;
   margin: 1em auto;
}

Does anyone know how to fix this, or at least tell me why it's happening? Thanks in advance!

Community
  • 1
  • 1
iain
  • 331
  • 3
  • 18

1 Answers1

3

I was also frustrated by this problem. The only solution I found was to resave my SVG files so that: 1) the artboard dimensions are pixel integers (no fractions), and 2) if that doesn't work, add 2px to the artboard dimensions (width or height), to add more white space around the artwork

user1704915
  • 31
  • 3