CSSでSVGを読み込む際はタグをエンコードしないと表示されない

CSSでSVGが表示されないことがある

MacのChrome 70以降はCSSでSVGをインラインで読み込む際はエンコードされていないと表示できないため注意が必要だ。

ChromeとFirefoxだと表示されないが、Safariだとエンコードなしでも表示されるので、この点にも注意。

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

/* エンコードなしだと表示されない */
.pocket1 {
  width: 60px;
  height: 44px;
  background: #EF3E55 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M12.53 6.84l-3.76 3.61c-.213.204-.486.306-.76.306-.273 0-.547-.102-.76-.306L3.488 6.84c-.437-.418-.45-1.113-.032-1.55.42-.438 1.114-.452 1.55-.033l3.005 2.88 3.006-2.88c.436-.42 1.13-.405 1.55.032.42.436.405 1.13-.032 1.55zm3.388-5.028c-.207-.572-.755-.956-1.363-.956H1.45c-.6 0-1.144.376-1.357.936-.063.166-.095.34-.095.515v4.828l.055.96c.232 2.184 1.365 4.092 3.12 5.423.03.024.063.047.095.07l.02.015c.94.687 1.992 1.152 3.128 1.382.524.105 1.06.16 1.592.16.492 0 .986-.046 1.472-.136.058-.014.116-.024.175-.038.016-.002.033-.01.05-.018 1.088-.237 2.098-.69 3.004-1.352l.02-.014.095-.072c1.754-1.33 2.887-3.24 3.12-5.423l.054-.96V2.307c0-.167-.02-.333-.08-.495z"/></svg>') 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;
}

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

カテゴリーcss