<div>
  <i>foreground image</i>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 13"><path fill="#59a6ca" d="M15.57 2.845L14.238 1.51c-.13-.13-.353-.13-.48 0L6.66 8.623l-3.093-3.11c-.13-.13-.352-.13-.482 0L1.75 6.845c-.128.13-.128.352 0 .48l4.67 4.67c.073.055.147.092.24.092s.167-.037.24-.093l8.67-8.67c.13-.13.13-.35 0-.48z"/></svg>
</div>

<div><i>unencoded UTF8 SVG background</i>
  <div class="bg" id="bg"></div>
  <i>fails in Firefox, IE10, IE11</i>
</div>

<div><i>encodeURIComponent() + UTF8 SVG with full charset=utf-8</i>
  <div class="bg" id="bg2"></div>
</div>

<div><i>encodeURIComponent() + UTF8 SVG with shorthand utf8</i>
  <div class="bg" id="bg3"></div>
  <i>fails in IE10, IE11</i>
</div>

<div><i>encodeURIComponent() + UTF8 SVG with no media type param</i>
  <div class="bg" id="bg4"></div>
</div>
div {
  display: inline-block;
  margin: 20px;
  vertical-align: top;
}
i {
  display: block;
}
svg, .bg {
  margin: 10px 0;
  display: inline-block;
  width: 300px;
  height: 300px;
  background: #e0e0e0;
}

#bg {
  background: #e0e0e0 url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 13"><path fill="#59a6ca" d="M15.57 2.845L14.238 1.51c-.13-.13-.353-.13-.48 0L6.66 8.623l-3.093-3.11c-.13-.13-.352-.13-.482 0L1.75 6.845c-.128.13-.128.352 0 .48l4.67 4.67c.073.055.147.092.24.092s.167-.037.24-.093l8.67-8.67c.13-.13.13-.35 0-.48z"/></svg>') 50% 50% no-repeat;
}

#bg2 {
  background: #e0e0e0 url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2013%22%3E%3Cpath%20fill%3D%22%2359a6ca%22%20d%3D%22M15.57%202.845L14.238%201.51c-.13-.13-.353-.13-.48%200L6.66%208.623l-3.093-3.11c-.13-.13-.352-.13-.482%200L1.75%206.845c-.128.13-.128.352%200%20.48l4.67%204.67c.073.055.147.092.24.092s.167-.037.24-.093l8.67-8.67c.13-.13.13-.35%200-.48z%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
}

#bg3 {
  background: #e0e0e0 url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2013%22%3E%3Cpath%20fill%3D%22%2359a6ca%22%20d%3D%22M15.57%202.845L14.238%201.51c-.13-.13-.353-.13-.48%200L6.66%208.623l-3.093-3.11c-.13-.13-.352-.13-.482%200L1.75%206.845c-.128.13-.128.352%200%20.48l4.67%204.67c.073.055.147.092.24.092s.167-.037.24-.093l8.67-8.67c.13-.13.13-.35%200-.48z%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
}
#bg4 {
  background: #e0e0e0 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2013%22%3E%3Cpath%20fill%3D%22%2359a6ca%22%20d%3D%22M15.57%202.845L14.238%201.51c-.13-.13-.353-.13-.48%200L6.66%208.623l-3.093-3.11c-.13-.13-.352-.13-.482%200L1.75%206.845c-.128.13-.128.352%200%20.48l4.67%204.67c.073.055.147.092.24.092s.167-.037.24-.093l8.67-8.67c.13-.13.13-.35%200-.48z%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.