Webページの背景に簡単な模様を入れるためにbackground-imageにSVG画像を指定する場合があります。
通常はSVGのデータを独立のファイルにして url();で読み込むのですが、色々な事情で画像ファイルを用意したくない場合に、データURIスキームを使ってCSSファイルの中に画像データを埋め込むことが考えられます。
たとえば、↓の画像の右下にある三角形の場合はこんな感じ。
#hoge {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><polygon points="70,100 100,100 100,80" fill="%23c8c8c8"/><polygon points="80,100 100,100 100,80" fill="%23cf2030"/></svg>');
background-position: right bottom; /* 画像を右下に配置 */
background-attachment: fixed; /* 画像を固定 */
background-repeat: no-repeat; /* 画像の繰り返しを防止 */
}
ちょっとした解説
url('data:image/svg+xml;utf8,の部分
データURIスキームを使って、SVGのデータを読ませます。
utf8を指定しておくことで、<や>をエスケープする必要がなくなります。ただし、#は%23にエスケープする必要があるので、色指定などでは一手間かかります。
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100">の部分
XML宣言（<?xml version="1.0" encoding="UTF-8" standalone="yes"?>）は無くても動くようです。
xmlnsは指定しておかないと動かないようです。
今回は画像を右下に配置したいのですが、どうもbackground-position: right bottom;の指定ではうまくいかないようなので、適用対象のブロック要素全体を覆うSVG画像を用意します。viewBoxはパーセンテージでは指定できない（ピクセル値？でしか指定できない）ので、ともかくこのSVG画像自体はwidth="100%" height="100%"にした上で、viewBoxの値を使って位置を指定する感じでやりました。SVGわからん。
あとは、この100x100のviewBox内に、右下角の位置に灰色の三角形と赤い三角形を並べました。上述の通り、データURIスキーム内での色指定は#c3c3c3だとダメっぽいので%23c3c3c3にエスケープしています。
日本語のネット情報だと、データURIスキームを使う場合はbase64にエンコードする方が多いのですが、可読性のためエンコードせずに文字列で埋め込んでいます。また、英語でチラッと検索した感じだとutf8を指定せず不等号等もエスケープする例が出てくるのですが、エスケープ混じりも可読性が低いし手間なので、utf8を指定してみたら概ねうまく行った次第。