svgを外部ファイルから<img>ないし<object>で参照したり、直接<g>や<path>で書き込んだりする方法はよくありますが、今回はbackgroundで、なおかつパスを使わずに扱う方法を書きます。
#やり方
##1. svgファイルをテキスト展開する
ご存知の方も多いとは思いますが、svgはjpegやpngなどのバイナリではなく、xml形式のアスキーです。
テキストエディタなどでsvgを表示します。
こんな感じ
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g id="XMLID_3_">
<path id="XMLID_12_" class="st0" d="M97.4,69.3c2.8,0,5,2.2,5,5v2c0,2.8-2.2,5-5,5H52.6c-2.8,0-5-2.2-5-5v-2c0-2.8,2.2-5,5-5H97.4z"/>
</g>
</svg>
##2. URLエンコードする
詳しい方は自前でコマンドを打てると思いますが、よくわからない方は【みんなの知識 ちょっと便利帳】URLエンコード/デコードツール =UTF-8=この辺りを使いましょう。
こうなる
%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%20150%20150%22%20style%3D%22enable-background%3Anew%200%200%20150%20150%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23FFFFFF%3B%7D%0A%3C%2Fstyle%3E%0A%3Cg%20id%3D%22XMLID_3_%22%3E%0A%09%3Cpath%20id%3D%22XMLID_12_%22%20class%3D%22st0%22%20d%3D%22M97.4%2C69.3c2.8%2C0%2C5%2C2.2%2C5%2C5v2c0%2C2.8-2.2%2C5-5%2C5H52.6c-2.8%2C0-5-2.2-5-5v-2c0-2.8%2C2.2-5%2C5-5H97.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A
##3. CSSに貼り付ける
いよいよCSSに貼り付けますが、この時に先頭につける文字列があります！
これ
data:image/svg+xml;charset=utf8,
先のページでエンコードを行なった場合はutf8です。他の文字コードを使ったら適宜修正してください。
これで「この文字列は画像なんだからちゃんと画像出せよ」っていう合図ができたので、あとはbackground-imageのurlに貼り付けます。
最終形
.something {
background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%20150%20150%22%20style%3D%22enable-background%3Anew%200%200%20150%20150%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23FFFFFF%3B%7D%0A%3C%2Fstyle%3E%0A%3Cg%20id%3D%22XMLID_3_%22%3E%0A%09%3Cpath%20id%3D%22XMLID_12_%22%20class%3D%22st0%22%20d%3D%22M97.4%2C69.3c2.8%2C0%2C5%2C2.2%2C5%2C5v2c0%2C2.8-2.2%2C5-5%2C5H52.6c-2.8%2C0-5-2.2-5-5v-2c0-2.8%2C2.2-5%2C5-5H97.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
}
##別にbackground: url('path/to/file');でいいじゃないか！
返す言葉もございません。
というのも、たまたまjQuery Mobileのcssスクリプトを見る機会があり、その時発見した手法なので
- わざわざsvgのファイルを作らなくていい
くらいしか利点がありません。