有没有一种方法可以向SVG元素添加源代码？

Question

我正在寻找类似于以下代码的内容： <img src="./img.svg"/> 但需要使用一个

以下代码无法实现该功能： <svg src="./img.svg"></svg> 编辑：

问题在于我有两种情况，第一种情况是 svg 文件的路径 ，而第二种情况是 SVG 内容字符串。我想使用同一个包装器元素对它们进行样式设置，而不是使用 img 和 svg 元素。是否有一种方法可以同时使用 img 或 svg 元素？

- patotoma

---

@RobertLongson 我有两种情况，第一种是我有一个指向SVG文件的路径，第二种是我有一个包含SVG内容的字符串。我想使用相同的包装元素来处理它们，以便更容易地进行样式设置，而不是同时使用img和svg元素。 - patotoma

@RobertLongson，那看起来是我的问题的解决方案，我将更新问题，并且如果您发布一个带有使用SVG数据URI的img标签的答案，我将接受您。 - patotoma

Answer 1

SVG不使用源，因为它们在标签内包含图形信息，而不是引用文件。这段代码：

<svg src="./img.svg"></svg>

这段代码是多余的，因为您正在使用SVG标签引用SVG文件，所以它不会在HTML中呈现。您应该使用 .svg 文件的 < img > 标签作为源，或将您的SVG转换为包含图形信息的 < svg > 标签。

如果您使用CSS缩放< img >标记，则其行为类似于SVG。我主要使用这种格式：

<img src="./img.svg"></img>

如果我只是要调整图片大小，我会使用 < svg > ，如果你想对图像的矢量进行特定的样式设置（颜色、路径等）。 https://www.w3schools.com/html/html5_svg.asp

- aaron-everly

Answer 2

<img>标签可以指向外部文件，但也可以指向数据 URI。

数据 URI只是一个字符串编码的图像，可以使用Base64或URI（几乎是一个字符串，但您需要将“＃”字符编码为“％23”）。基本上，它看起来像这样...

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

- Robert Longson

Answer 3

<image xlink:href="./img.svg" width="..." height="..." />

width 和 height 必须设置，因为 SVG 没有固定的尺寸概念。为了符合 XML 标准，请不要忘记声明 xlink 命名空间：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ... >

- ccprog

---

我认为你没有回答问题，我正在寻找带有源代码的SVG标签而不是图像标签。 - patotoma

@patotoma 因为你的问题不够清晰，一个 SVG 元素应该做什么，而 img 不能做到。你过于专注于这一点，而没有解释问题所在。 - Robert Longson

@RobertLongson，您说得对，我将更新我的问题以解释我的问题，而不是寻找解决方案。 - patotoma