SVGをCSSで背景画像に指定する

必要なもの

SVG形式の画像データ

手順

1. SVG画像をエディターで開き、コードを全てコピー

2. パーセントエンコーディング(変換ツール)してurlに指定

3. 必要に応じて色や表示方法を調整

scss

//fill='%23<カラーコード>'を追記して色を調整。
//%23 = #
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg class='drawer__icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Ctitle%3Eframe%3C/title%3E%3Cg%3E%3Cpath fill='%23008ed6' d='M22.31,14.15c-2.13-3.86-6.93-8.07-8-11.43S12.73-1.16,9,2.7A34.71,34.71,0,0,0,.25,16.4c-.59,1.66-.13,5.68,1.25,7.74A12.39,12.39,0,0,0,9.6,30c2.19.45-5.89-4.67-.49-14.1,2.25-3.94,4.51-3.35,6.32,1.1,3.15,7.75-3.27,13,.73,11.8C26.74,25.75,24.17,17.52,22.31,14.15Z' /%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;