CSSでSVGを読み込んでも表示されないサンプル

エンコードなしだと表示されない

/* エンコードなしだと表示されない */
.pocket1 {
  width: 60px;
  height: 44px;
  background: #EF3E55 url('data:image/svg+xml;utf8,') no-repeat center center;
}

エンコードありだと表示される

/* エンコードありだと表示される */
.pocket2 {
  width: 60px;
  height: 44px;
  background: #EF3E55 url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.53%206.84l-3.76%203.61c-.213.204-.486.306-.76.306-.273%200-.547-.102-.76-.306L3.488%206.84c-.437-.418-.45-1.113-.032-1.55.42-.438%201.114-.452%201.55-.033l3.005%202.88%203.006-2.88c.436-.42%201.13-.405%201.55.032.42.436.405%201.13-.032%201.55zm3.388-5.028c-.207-.572-.755-.956-1.363-.956H1.45c-.6%200-1.144.376-1.357.936-.063.166-.095.34-.095.515v4.828l.055.96c.232%202.184%201.365%204.092%203.12%205.423.03.024.063.047.095.07l.02.015c.94.687%201.992%201.152%203.128%201.382.524.105%201.06.16%201.592.16.492%200%20.986-.046%201.472-.136.058-.014.116-.024.175-.038.016-.002.033-.01.05-.018%201.088-.237%202.098-.69%203.004-1.352l.02-.014.095-.072c1.754-1.33%202.887-3.24%203.12-5.423l.054-.96V2.307c0-.167-.02-.333-.08-.495z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}