SVG画像をCSSにインライン記述で背景画像として設定するのメモメモ

SVG画像を背景画像に設定するだけなら、通常のJPGやPNGと同じくファイルのパスを書けばよい。
一方で、cssで色を変えられたりするインライン記述はなかなか便利だが、ちょっとコツがいるのでそのあたりをメモメモ。

SVG画像はテキストエディタで開くことができ、CSSには下記のような指定で、<svg>～</svg>を差し替えるというのが、まずは基本。

----------
background-image: url("data:image/svg+xml;utf8,<svg>～</svg>");
----------

ただし、AdobeXDで書き出したSVG画像をコピペするだけだとエラーになるので、ちょいと加工する必要あり。

とりあえずこれで動いた。