css - Bad IE11 SVG rendering - background-image -


i have svg image background, background-size:contain. in browsers except ie, looks perfect. however, in ie bottom of logo cut off , edges blurry.
i tried this(removing set width , height svg file) , this(adding margin below) , still cut off, , can't find blurry edges.

ie11 rendering:
ie11 rendering

chrome/firefox rendering:
chrome rendering firefox rendering

here's css how i'm displaying 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 know how fix this, or @ least tell me why it's happening? in advance!

i frustrated problem. solution found resave svg files that: 1) artboard dimensions pixel integers (no fractions), , 2) if doesn't work, add 2px artboard dimensions (width or height), add more white space around artwork


Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -