如何在图像src属性中使用SVG？

Question

我想使用这个SVG：

<svg height="30" width="200">
  <text x="0" y="15" fill="red">⚡</text>
</svg>

作为图像的src属性。我该怎么做？

- INeedYourHelp

---

你的意思是什么？你有一个单独的SVG文件和要在HTML页面上显示的代码吗？你想在HTML文件中包含SVG代码本身吗？ - Donald Duck

就算没有，我只有一个表情符号（复制的文本），我想办法在img标签中使用它。 - INeedYourHelp

所以您只想要一个<img>标签来显示表情符号，而不需要单独的文件？ - Donald Duck

这是正确的，或者我们可以将这个表情符号转换为SVG，然后传递给img标签？ - INeedYourHelp

如果您有单独的SVG文件，您可以像处理其他图像格式一样使用<img src="myFile.svg">。如果您不想创建额外的文件，您可以使用data URI：<img src="data:image/svg+xml,<!-- your SVG code here -->">。这对您有帮助吗？ - Donald Duck

Answer 1

只需将其转换为数据URL，记住现在需要有效的命名空间。

<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200">
  <text x="0" y="15" fill="red">⚡</text>
</svg>'>

- Robert Longson

---

使用&23;转义**#**（例如在颜色中）。 - Danny '365CSI' Engelman

Answer 2

外部SVG文件必须有正确的SVG命名空间声明才能被浏览器识别。

<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200">
  <text x="0" y="15" fill="red">⚡</text>
</svg>

- Paul LeBeau