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:
chrome/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
Post a Comment