多分これが一番早い SVG Background Image の利用手順だと思います

要するに `background-image: url(...);` で SVG を使うまとめです。プレゼントもあるよ。

## 対象

* とにかく手っ取り早く SVG を使いたい人
* フリーの SVG 素材で間に合わせたい人
* HTML に SVG タグを埋め込みたくない人
* SVG スプライトも Web フォントも使いたくない人
* IE 11 でも表示したい人

という出不精な人向けの記事です。

## 想定

下記の要素に「顔の形をした」 SVG を表示したいとします。

```html
<i class="c-icon--face"></i>
```

## 手順

1. とにかく [Material Design Icons](http://materialdesignicons.com/) を開きます
![1.png](https://qiita-image-store.s3.amazonaws.com/0/248832/b8d15c97-e4a4-8acb-c936-456def4c795f.png)
2. `Search...` ボックスに `face` と入力します
![2.png](https://qiita-image-store.s3.amazonaws.com/0/248832/a3d5dce2-db75-8d00-4426-1303cd161cab.png)
3. 一覧からお好みの SVG をクリックします
4. `</>` ボタンを押し、プルダウンメニューから `View SVG` を選択します
![3.png](https://qiita-image-store.s3.amazonaws.com/0/248832/56427760-1aba-1334-4a06-3c892537b6a4.png)
5. テキストエリアの中身をすべてコピー…するのではなく、 `d` 属性の中身のみコピーします。 `<path fill="#000000" d="..." />` の `...` です
![4.png](https://qiita-image-store.s3.amazonaws.com/0/248832/3565785d-8a10-40e4-296b-e1cc56b217db.png)
6. 下記のようなスタイルシートを記述し、 `...` の部分にコピーした内容をペーストして完了です

```css

<style>
.c-icon--face {
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="..." /></svg>') no-repeat center center;
  display: block;
  width: 128px;
  height: 128px;
}
</style>
```

必要であれば `background-size` をいじってサイズを変更できます。

## 補足

### でもこれ CSS で色変えられなくない？

はい、背景画像なので CSS の `fill` プロパティや `stroke` プロパティは適用されません。
適宜 `fill="%23000000"` の `000000` の部分を変えてください（ 16 進数表記の場合）。

_追記: 嘘です。本当は `mask` プロパティを使えば変えられます（この記事を書いた時は対応ブラウザにやや難があったんですが、今はもう大丈夫でしょう）。単純に `background` を `mask` にして、 `background-color` に色を指定すれば OK です。_

```
.c-icon--face {
  background-color: #ff0000;
  mask: url('...') no-repeat center center;
  display: block;
  width: 128px;
  height: 128px;
}
```

### なんで '#' を '%23' にしてるの？

Chrome の Deprecation Warning 避けです。

```
[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead.
```

### Stylus のカラー変数を反映させたいんだけど

```stylus
$encodeColor(color)
  replace("#", "%23", s("%s", color))
```

というような mixin を作り、以下のように使うと良いと思います。

```stylus
<path fill='" + $encodeColor(black) + "' d="..." />
```

### なんで `d` 属性値だけコピペするの？

SVG を `background-image` として使うには、 `svg` タグに `xmlns` 属性を記述する必要があります。が、 Material Design Icons の SVG には記述されていないためです。
また、 Material Design Icons の SVG は `d` 属性値以外はすべて同一であることから（たぶん）、複数の SVG を扱う際には上記の手順を踏むことになると思います（そういう意味では mixin を用意しても良いかもしれません）。

### `content` プロパティには使えるの？

`content: url('...');` でも良いのですが、一部の環境で表示がおかしくなった…ような記憶があります（曖昧）。

## 動作確認環境

* MacOS 10.14.2 + Chrome 71
* MacOS 10.14.2 + Firefox 64
* MacOS 10.14.2 + Safari 12
* MacOS 10.14.2 + Simulator + iPhone 5s + iOS 12.1 + Safari
* MacOS 10.14.2 + Genymotion + Google Nexus 4 + Android 4.4 + 標準ブラウザ
* Windows 10 + Chrome 71
* Windows 10 + Firefox 64
* Windows 10 + Edge 42

## IE 11 で使うには

上記のリストに、

* Windows 10 + IE 11

を加えるためには一手間必要です。

### 手順

1. 前述した CSS の `data:image/svg+xml;charset=UTF-8,` を `data:image/svg+xml,` にします
2. `svg` 要素全体を JavaScript の `encodeURI` 関数などで URL エンコードします
3. `#` を `%23` に変換して完了です

### 説明

まず、 IE 11 で SVG Background Image を使うには、 `svg` 要素全体を Base64 エンコードか URL エンコードしてやる必要があるようです。ここでは少しでも可読性の高い URL エンコードを採りました。
次に、エンコードに使用する関数としては `encodeURIComponent` …であれば一発なのですが、ここでも可読性を高めるために `encodeURI` を使っています。
ただし `encodeURI` では `#` が変換されないので、 `%23` に変換する必要があります。

### 面倒くさいんですけど！

という人向けに Material Design Icons でのみ使えるお便利ブックマークレットを用意しました 🎁
SVG のコードが表示されている状態（共通手順の 5. の画像の状態）で呼び出してください。 IE 11 に対応した Data URI scheme を表示してくれるので、後は `background-image: url(...);` の `...` にコピペするだけです。

```
javascript: (() => { const svg = encodeURI(document.querySelector('[ng-model="code.svgTag"]').value.replace(/<svg[^>]*?>/, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">')).replace(/#/g, '%23'); prompt('', `data:image/svg+xml,${svg}`); })(); void 0;
```

## 最後に

大人しく SVG スプライトを使った方が良いと思います。はい。