CODEWITHSUNDEEP
csssvgbackground-image
Yogesh
Yogesh

Reputation: 331

SVG tags doesnt work with background image of css

I want to use SVG tags inside css background-image property. Its working with Chrome, Firefox, Edge but doesn't work with IE-10,11 Codepen link:-

Code:- 

body {
  background-image: url('data:image/svg+xml;utf8,<svg fill="red" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  padding: 2rem;
}
<h1>The background-image Property</h1>

Upvotes: 2

Views: 331

Answers (1)

Sam Tolton
Sam Tolton

Reputation: 357

You need to remove the ;utf8 and URL encode your SVG as explained here: Inline SVG background not working in Internet Explorer 11

body {
  background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22red%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  padding: 2rem;
}

Upvotes: 2

Related Questions