要約

データurlを使う
「"」と「'」を「\」でエスケープする
「#」をurlエンコード(%23)する
色指定はrgb()か色名を使って「#」を避ける
</style>を<\/style>にエスケープする

背景

アイコンやロゴを表現するときIMGタグの代わりにCSSで書きたい場面はよくあると思う。

画像url.css

.hoge::before{
  content:" ";
  background-image: url("hoge.png");
  width: 28px;
  height: 28px;
  display: block;
  background-repeat: no-repeat;
}

url()の中にはファイルのurlやデータurlが書ける。

データurl.css

background-image: url("data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7");
background-image: url("data:image/gif;GIF89a%01%00%01%00%60%00%00%21%F9%04%01%0A%00%FF%00%2C%00%00%00%00%01%00%01%00%00%08%04%00%FF%05%04%00%3B");

エンコードはbase64かurlエンコードが多いと思う。
しかし、svgをエンコードせずにデータurlに含めようとしても上手く表示できない。

上手く表示できない.css

background-image: url('data:image/svg+xml;utf8,<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.346 28.346"><defs><style>.cls-1{fill:#040000;}</style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg>')

これはデータurlを邪魔する文字をエスケープしてないからだけど、
データurl全体をbase64などでエンコードすると後で変更が大変なので必要な文字だけエスケープしたい。
そこで、どの文字をエスケープする必要があるか調べる。

方法

illustratorで適度なイラストを描いてsvgファイルを用意する。

「ファイル→書き出し→スクリーン用に書き出し」で出力形式をsvgにするとsvgファイルを出力できる。

出力した.svg

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" width="10mm" height="10mm" viewBox="0 0 28.346 28.346"><defs><style>.cls-1{fill:#040000;}</style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg>

レイヤー名が役に立つ場面は無いと思うので削る。
width、heightはcssで指定したサイズが効かなくなるので削る。

修正した.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.346 28.346"><defs><style>.cls-1{fill:#040000;}</style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg>

cssの中にデータurlを邪魔する文字を入れてどこでエラーが出るか調べる。

データurlのエスケープ.php

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title>
<style>
<?php
$esc = array("'","#",'"');//エラーが起きた文字をエスケープする
for($ascii = 32; $ascii <= 126; $ascii++){
    if(in_array(chr($ascii),$esc,true)){
        $str = urlencode(chr($ascii));
//      $str = '\\'.(chr($ascii));
    }else{
        $str = chr($ascii);
    }
    echo '.ascii'.$ascii.'{display:flex;}'.PHP_EOL;
    echo '.ascii'.$ascii.'::before{
    content:" ";
    background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><!-- '.$str.' --><defs><style>.cls-1{fill:rgb(0,0,0);}<\/style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg>\');
    width: 28px;
    display: block;
    height: 28px;
    background-repeat: no-repeat;
;}'.PHP_EOL;
}
?>
</style>
</head>
<body><?php
for($ascii = 32; $ascii <= 126; $ascii++){
    echo '<div class="ascii'.$ascii.'">'.chr($ascii).'</div>'.PHP_EOL;
}
?>
</body></html>

結果

「#」はurlエンコードでしか避けられないようだ。
「"」と「'」はurlエンコードでも「\」エスケープでも避けられた。
svgの中に「</style>」があるとhtmlの中の<style>タグが終わってしまうので「\」でエスケープする(<link>や＠importで読み込む場合は不要)。
それ以外の文字はエスケープする必要は無いようだ。

余談

短いsvgならstyleを削って個別のpathにfill=""で色を指定しても良いと思う。

CSSに書くインラインSVGをエスケープする

要約

背景

方法

結果

余談