SVG Sprite with xlink in CSS ::after

Question

I’m using a SVG sprite like this in the body:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="bars" width="1792" height="1792" viewBox="0 0 1792 1792">
        <path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/>
    </symbol>
</svg>

If I need the symbol, I call it like this:

<svg class="icon left bars" style="fill: #000;">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bars"></use>
</svg>

Now I need this SVG in a CSS ::after. I know that you can use a SVG as background image in the ::after but it won’t work with use:

.element::after {
  background: url('data:image/svg+xml;utf8,<svg class="icon left bars" style="fill: #000;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bars"></use></svg>') no-repeat;
  //background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='61' height='41' fill='#000' stroke='none'><path d='M0,0 6,10 L12,0 L0,0 Z'></path></svg>") no-repeat;
  content: "";
  display: block;
  height: 16px;
  width: 16px;
}

Demo: JSFiddle

Is there anyone who got this working?

Possible duplicate of [How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability](http://stackoverflow.com/questions/10956636/how-to-use-svg-sprite-sheet-as-css-background-image-while-maintaining-aspect-rat) — smnbbrv, Nov 11 '16 at 12:08
@Ishettyl No, you don’t the commented version with a plain SVG code works. @smnbbrv No because the `` can’t be used with `background-position`. — KittMedia, Nov 11 '16 at 12:09
`` with `` just works differently than a SVG with `` elements. — KittMedia, Nov 11 '16 at 12:16
I've also ran into this but cannot get it working either. Has anyone an idea? — kwasmich, Jul 20 '17 at 13:57

Sarah Eagle · Answer 1 · 2018-06-14T13:57:14.357

.element::before {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 75.33 68.119'>\ <polygon fill-rule='evenodd' clip-rule='evenodd' fill='red' points='8.125,11.865 75.33,0 73.794,37.574 70.938,68.119 0,64.603 '/>\ </svg>"); content:""; display:inline-block; width:75.33px; height:68.119px;}

<div class="element"></div>

However it only works on non-IE browsers, a shame as you could turn it into a mixin in less/sass so you dont bloat your working css.

I got it from https://codepen.io/AmeliaBR/details/xijuv And also worth a read https://manu.ninja/inline-svg-how-i-learned-to-stop-worrying-and-love-gzip/

EDIT working in IE 11 See this answer CSS: Using raw svg in the URL parameter of a background-image in IE

This question doesn’t refer to a simple usage of an inline SVG in `::before` or `::after` but explicitly use the SVG’s `` feature. Thus this is not the answer. — KittMedia, Jun 14 '18 at 14:27

SVG Sprite with xlink in CSS ::after

1 Answers1