将参考 SVG 图像嵌入 HTML 文件答案

【问题标题】：Embedding a referential SVG image into HTML file将参考 SVG 图像嵌入 HTML 文件
【发布时间】：2012-05-17 06:14:01
【问题描述】：

我有一个项目，我想将简单的图形背景放入表格单元格中。 background-image 和一个小的 svg 文件效果很好！

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

我尝试了 svg 中的 ID 属性和 css url() 函数中的哈希引用的各种组合，但没有成功。这似乎是一件可取的事情，但环顾四周，我没有看到任何想法。这告诉我要么无法完成，要么以其他方式完成......

建议？

【问题讨论】：

【解决方案1】：

您可以将 svg 文件保存在其他地方并将其放在 iframe 中。

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

可能还有其他方法..

svg 的最佳 tuts 是 MDN。

【讨论】：

【解决方案2】：

实际上，在提出问题并思考之后，我意识到我已经阅读了答案。您需要使用数据 url 来创建内嵌 svg 图形。您可以将其赋予 css 类的 background-image 属性，如下所示：

{背景图片:url( “数据：图像/svg+xml；utf8,\ ...\ ");}

编码 utf8 将允许您直接输入代码，用反斜杠转义新行并避免双引号（据我所知；-）。现在你只需设置 TD 的 CLASS 就可以了！

现在我要做的就是弄清楚如何在底部而不是顶部对齐背景...

【讨论】：

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

【解决方案3】：

此代码也可能有效：

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

【讨论】：