[SOLVED] Inline Svg in css background property doesn't work on Edge properly

Inline Svg in css background property doesn't work on Edge properly

I have the following html file

  <body>
    <p></p>
  </body>

and I would like to add :before with svg background like this

p:before {
    content: '';        
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background: url("sprite.svg#svgView(viewBox(135, 0, 11, 11))");
    background-size: 100% 100%;
}

sprite.svg is a sprite with several icons. So I would like to receive certain icon from sprite at x position =135. That works perfect in IE, Chrome, Firefox, but not in Edge. What is the problem with svg and Edge?

Solution

Same problem on EDGE 44: Edge does not seem to properly integrate Sprites. But it works very well in SVG inline. See the CAN IUSE note: "IE9-11 desktop & mobile do not properly scale SVG files." Adding height, width, viewBox, and CSS rules seem to be the best workaround. " To test can be? If not a project here: A project on Github but i have not tested ps. I dropped the sprites and placed inlines elements.

<svg
    width="54"
    height="54"
    viewBox="0 0 54 54"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
 <path
    d="M18.6667 34.1429V52H2V19.8571L27 219.8571V52H35.3333V34.1429H18.6667Z"
    stroke="white"
    stroke-width="2"

    stroke-linecap="round"
     stroke-linejoin="round"/>
 </svg>