用CSS把SVG图片显示为背景图，可分为2种写法：

单独的.svg文件，css里用 background-image: url('xx.svg'); 去调用图片
使用url的data属性，把svg文件合并到css中

第2种写法直接把svg的xml内容拷贝到css中，有些浏览器会识别不出来，这是由于写法不规范造成的。

规范的写法把svg内容放到css内时需要encode，有两种encode方式： base64 和 URLEncode

base64

做base64的编码后，需要 background-image: url('data:image/svg+xml;base64,这里放base64后的svg')

urlencode

urlencode可以直接放 background-image: url('data:image/svg+xml;charset=utf-8,这里放urlencode后的svg)

但需要注意URLEncode有两种可能：

空格变加号，这是在 content type 是 ‘application/x-www-form-urlencoded’时，也就是提交表单时，POST DATA的URLEncoding方式。
空格变%20，这是标准的URL的encode，在css中使用svg需要用这种encode方法。

如果你找到的工具编码出来空格是加号，可以把+都替换成%20即可。

例子

下面2个文件是个例子：

bg.svg

1	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100" height="100" viewBox="0, 0, 100, 100"><circle cx="50" cy="50" r="50"/></svg>

test.html

<!DOCTYPE html>
<html>
<head>
    <title>svg background</title>
    <style type="text/css">
        div {margin: 50px; border: 1px solid #CDCDCD; padding:5px; height:150px; width:300px; background-repeat: no-repeat; background-position: center center; float:left;}
        .bg1{background-image: url('bg.svg');}
        .bg2{background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.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%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%2C%200%2C%20100%2C%20100%22%20fill%3D%22%23ECECEC%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%2F%3E%3C%2Fsvg%3E');}
        .bg3{background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwLCAwLCAxMDAsIDEwMCIgZmlsbD0iI0VDRUNFQyI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz48L3N2Zz4=');}
        .bg4{background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100" height="100" viewBox="0, 0, 100, 100" fill="#ECECEC"><circle cx="50" cy="50" r="50"/></svg>');}
    </style>
</head>
<body>
    <div class="bg1">使用独立的svg文件</div>
    <div class="bg2">urlencode, urlencode编码，注意空格需要编码成%20，空格转义成加号的方式无效</div>
    <div class="bg3">base64，用base64编码后的</div>
    <div class="bg4">直接写，这是不规范的写法，可能有部分浏览器会生效，能看到背景图</div>
</body>
</html>

小工具

每次从网上下载的SVG的图片中，都带有一些注释、过多的无实际意义的 g 标签，id 属性等，这些也占用CSS空间，我这个有强迫症患者，每次都得手工清理，然后再找个工具base64编码，才能写到 CSS 内，今天我做了个小工具来把这些都自动化了，地址在： http://www.devmgr.cn/encodesvgtocssbackground.html

可以自动清理 SVG 中无实际意义的节点并 base64 encode，还把常用的css 属性也写到了一起。

GeXiangDong

CSS中用SVG图片做背景图

base64

urlencode

例子

bg.svg

test.html

小工具