CSS
SVG
background-image

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

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


対象


  • とにかく手っ取り早く SVG を使いたい人

  • フリーの SVG 素材で間に合わせたい人

  • HTML に SVG タグを埋め込みたくない人

  • SVG スプライトも Web フォントも使いたくない人

  • IE 11 でも表示したい人

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


想定

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

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


手順


  1. とにかく Material Design Icons を開きます
    1.png


  2. Search... ボックスに face と入力します
    2.png

  3. 一覧からお好みの SVG をクリックします


  4. </> ボタンを押し、プルダウンメニューから View SVG を選択します
    3.png

  5. テキストエリアの中身をすべてコピー…するのではなく、 d 属性の中身のみコピーします。 <path fill="#000000" d="..." />... です
    4.png

  6. 下記のようなスタイルシートを記述し、 ... の部分にコピーした内容をペーストして完了です


<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 進数表記の場合)。


なんで '#' を '%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 のカラー変数を反映させたいんだけど

$encodeColor(color)

replace("#", "%23", s("%s", color))

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

<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 スプライトを使った方が良いと思います。はい。