如何将svg设置为背景图片
这个问题在这里已经有了答案：
CSS规则
background-image: url('file.svg');
为了使您的SVG缩放，您应尽可能使用百分比进行测量。 例如，如果你想制作一个填充整个背景的渐变：
file.svg
<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(192,192,192);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
</svg>
如果这不能提供足够的控制，您可能还想查看具有媒体查询的响应式CSS。 您可以使用它将其更改为不同的SVG。 该CSS部分最多针对800px宽的屏幕：
@media screen and (max-width: 800px) {
body {
background-image: url('file800.svg');
}
}
您可以使用的另一个工具是background-size规则。 这是一个CSS 3规则，因此您可能需要查看不同浏览器的支持级别。