HTML5から使える様になったSVGですが、Data-URI-Schemeを利用しスタイルシートで描写することで、画像とCSSの別々のファイルに分ける必用がなくCSS一括で操作出き、ブラウザの画像読み込み待ち時間が減るいいやつです。
SVGブラウザ対応DATAURIブラウザ対応
SVGは最新ブラウザであればALLOKです。
DATAURIスキームはIEがCSSの対応のみになってます。

前の記事([イラレCC].aiファイルをSVGで保存してData-URl-schemeにする)でAIで画像を作成し、SVGコードを取得しました。

データスキーム形式でSVGを表示させるにはbase64でエンコードしたものを利用します。以下のようなサイトを利用して、先程のコードをエンコードします。

不要コードの削除

前回のAIで作成されたSVGコードには不要なレイヤー名やファイルタイトルがあります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><title>SVG矢印</title><rect width="30" height="30" rx="4" ry="4"/><polyline points="10.5 6 19.5 15 10.5 24" style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px"/></svg>
ソースコード装飾ならGoogle code prettify

↓今回はtitleタグがあるので、削除します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><rect width="30" height="30" rx="4" ry="4"/><polyline points="10.5 6 19.5 15 10.5 24" style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px"/></svg>
ソースコード装飾ならGoogle code prettify

DATA−URI−schemeに変換

URL-encoder for SVGを利用してbackground-image用に変換します。

https://github.com/yoksel/url-encoder/

CSSに記載

背景として追加します。