CSSでSVGを表示する方法の３つ

このようなsvgを表示したい とすると　幾つかのアプローチが考えられる。

直接CSSに入れ込む

一番楽チンで　IEでサポートされず無視されるからプロトタイプの時に便利。バックスラッシュで改行可能

CSS:

.move {
    background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">\
    <g transform="translate(7, 7) rotate(135)">\
    <line x1="-0.5" y1="0" x2="0.5" y2="0" stroke="rgba(255,0,0,0.5)" stroke-width="1"/>\
    <line x1="-2.5" y1="2" x2="2.5" y2="2" stroke="rgba(255,0,0,0.5)" stroke-width="1"/>\
    <line x1="-4.5" y1="4" x2="4.5" y2="4" stroke="rgba(255,0,0,0.5)" stroke-width="1"/>\
    </g></svg>');
}

ファイルを用意してurlを指定する

おそらく一番一般的でしょう。クローズブラウザー。描画の祭にリクエストが発生するが（他のリソースと同様に）ブラウザーのキャッシュが効き複数回描画が必要になったとしてもリクエストは一個のみ。

SVGファイル（例えばmyfile.svg）

<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
    <g transform="translate(7, 7) rotate(135)">
        <line x1="-0.5" y1="0" x2="0.5" y2="0" stroke="rgba(255,0,0,0.5)" stroke-width="1"/>
        <line x1="-2.5" y1="2" x2="2.5" y2="2" stroke="rgba(255,0,0,0.5)" stroke-width="1"/>
        <line x1="-4.5" y1="4" x2="4.5" y2="4" stroke="rgba(255,0,0,0.5)" stroke-width="1"/>
    </g>
</svg>

CSS:

.move {
    background-image: url("myfile.svg")
}

Base64でエンコードしてCSSに入れ込む

クローズブラウザー。リクエストは発生しない。普通の人間は多分読めないし、エンコードして短くなったわけではありません。 おそらくプログラムでコンテンツを作成してbtoaでバイナリに変換してbackground-imageとして表示したい時などに有効な方法でしょうかね

(最初間違って;base64,を書いていなかったから 何も表示されなかったですね。@rikuoさんご教授をありがとうございます！)

CSS:

.move {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPg0KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcsIDcpIHJvdGF0ZSgxMzUpIj4NCiAgICAgICAgPGxpbmUgeDE9Ii0wLjUiIHkxPSIwIiB4Mj0iMC41IiB5Mj0iMCIgc3Ryb2tlPSJyZ2JhKDI1NSwwLDAsMC41KSIgc3Ryb2tlLXdpZHRoPSIxIi8+DQogICAgICAgIDxsaW5lIHgxPSItMi41IiB5MT0iMiIgeDI9IjIuNSIgeTI9IjIiIHN0cm9rZT0icmdiYSgyNTUsMCwwLDAuNSkiIHN0cm9rZS13aWR0aD0iMSIvPg0KICAgICAgICA8bGluZSB4MT0iLTQuNSIgeTE9IjQiIHgyPSI0LjUiIHkyPSI0IiBzdHJva2U9InJnYmEoMjU1LDAsMCwwLjUpIiBzdHJva2Utd2lkdGg9IjEiLz4NCiAgICA8L2c+DQo8L3N2Zz4=")
}