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