将参考SVG图像嵌入HTML文件

我有一个项目，我想把简单的图形背景到表格单元格。背景图像和一个小svg文件非常有用

但是我真的想把源代码保存在一个文件中。也就是说，我希望能够在头部定义图像，并在内联样式css中引用它

我尝试了svg中ID属性的各种组合以及css url（）函数中的哈希引用，但没有成功。这似乎是一件令人向往的事情，但环顾四周，我没有看到任何想法。这告诉我要么做不到，要么用其他方式做

---

建议？

您可以将svg文件保存到其他位置，并将其放在iframe中

<iframe src="index.svg" width="100%" height="100%" />

可能还有其他的方法

---

找到了svg的最佳教程

实际上，在问了这个问题并思考之后，我意识到我已经读过了答案。您需要使用数据url来创建内嵌svg图形。这可以赋予css类的背景图像属性，如下所示：

{背景图像：url( “数据：image/svg+xml；utf8\ ...\ ”；}

编码utf8将允许您直接输入代码，用反斜杠转义新行并避免双引号（据我所知；-）。现在你只需设置TD的等级，它的效果非常好

---

现在我要做的就是找出如何在底部而不是顶部对齐背景…

这段代码也可以：

 <svg>
    <use xlink:href="..." /> 
 </svg>

是的，我忽略了将其格式化为代码，换行符折叠。我经常使用这种技术。请注意，严格来说，字符串应该是URL编码的。我相信IE9坚持这一点，这使得它很难阅读。Firefox和Safari似乎只反对#（或%23编码），我认为他们可能已经克服了这一点。。。