CODEWITHSUNDEEP
csssvg
iain
iain

Reputation: 472

Bad IE11 SVG rendering - background-image

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!

Upvotes: 2

Views: 2674

Answers (1)

user1704915
user1704915

Reputation: 31

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

Upvotes: 3

Related Questions