Why this svg used as a CSS background is not being rendered?

Asked Apr 25 '19 at 14:26

Active Apr 25 '19 at 14:45

Viewed 74 times

.test {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' preserveAspectRatio='none'><defs><linearGradient id='bg' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1'/><stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1'/></linearGradient></defs><polygon fill='url(#bg)' points='0,100 100,0 100,100'/></svg>");
  width: 200px;
  height: 200px;
}

<div class='test'>
  test
</div>

Effect can be seen here: https://jsfiddle.net/6k4Le0so/

Anyone have any idea why this svg doesn't work as background? If saved to file, I can open it in Inkscape just fine.

edited Apr 25 '19 at 14:28

Karl

asked Apr 25 '19 at 14:26

Łukasz Zaroda

you need to add `xmlns="http://www.w3.org/2000/svg"` – Temani Afif Apr 25 '19 at 14:31
Doesn't help. :( – Łukasz Zaroda Apr 25 '19 at 14:32
you need to also encode `#` (https://jsfiddle.net/4hjL1wdg/) – Temani Afif Apr 25 '19 at 14:35
Oh, you are right, BOTH xmlns attribute and encoding of # are required for this to work, I think I tested them separately, thanks! – Łukasz Zaroda Apr 25 '19 at 14:38

Why this svg used as a CSS background is not being rendered?

0 Answers0