使用数据URI SVG作为CSS背景图像

背景故事：

• 目标：创建可通过CSS应用且与比例无关的三角形阴影（即矢量，而不是光栅图像）
• 经过大量研究（尽管我当然愿意接受其他选择），我选择使用SVG背景图像作为数据uri（以避免额外的HTTP请求）
• 我知道这是可行的：

我被困的地方：

• 我创建了一个简单的svg三角形，带有高斯模糊效果，如果它直接用HTML编写（与CSS相反），svg就可以完美地工作：

  
  ​
  

• 所以我试着用我自己的三角形svg复制上面的（）

• 我将哈希符号替换为“%23”，但没有骰子
• 它不起作用：

  body{background image:url（“数据：image/svg+xml；utf8，数据：image/svg+xml；utf8，”）；}

---

想法？

看看如何在

url（）

中使用双引号，然后所有SVG内容都使用单引号？你也需要这样做。否则，解析器不知道url内容的结尾

或者，您可以使url使用单引号，并保持SVG内容不变

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }

body{background image:url（'data:image/svg+xml；utf8'）；}

您还可以使用base64编码来获得更清晰的格式，即使它增加了SVG文件的实际大小。 另见

i、 e:

您可以使用此bash命令（在MacOS X上测试）轻松生成CSS后台属性：

echo "background: url('data:image/svg+xml;base64,"$(openssl base64 < Downloads/material-design-icons-1.0.0/action/svg/ic_exit_to_app_24px.svg)"');"

echo“背景：url（'data:image/svg+xml；base64，”$（openssl base64

确保在未使用base64编码的数据URI中使用百分比编码

例如，对于SVG，编码如下：

body { 
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20class%3D%22shadow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cpolygon%20style%3D%22stroke%3A%23252423%3Bfill%3A%23252423%3B%22%20points%3D%220%2C200%200%2C0%20200%2C0%22%2F%3E%3C%2Fsvg%3E'); 
}

这相当于以下SVG：

<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>

要对图像进行百分比编码，可以使用以下JavaScript代码：

console.log(encodeURIComponent('<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>'))

console.log（encodeURIComponent（“”））

还可以通过替换SVG字符串中的4个字符直接在IMG src上工作：

IMG.src='data:image/SVG+xml；utf8，“+SVG.replace（/”/g，“”）.replace（//g，“%3e”）.replace（/#/g，“%23”）

遗憾的是，并不是每个浏览器都支持数据uri（例如：Chrome）中的“清除”SVG语法，您必须使用encodeURIComponent对其进行转义。但它不再是人类可读的，只需转义一个最小的字符集，您就可以“或多或少地”“阅读并在适当位置修改它。。。您可以使用上面@danny评论的简单代码行。但是，如果将结果封装在一个简单的带引号的

url（'data:…'）

，则无需转义双引号。下面是转换器（es6）：

const svg2css=svg=>“url（'data:image/svg+xml；utf8，“+svg.replace（//\n/g）”。replace（///g，%3e”）。replace（///g，“%23”）”

使用它：

$0.style.backgroundImage=svg2css（“”）

console.log(encodeURIComponent('<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>'))