HTML 中的 SVG 代码与嵌入 <img> 标签的 SVG答案

【问题标题】：SVG code within HTML versus SVG embedded with <img> tagHTML 中的 SVG 代码与嵌入 <img> 标签的 SVG
【发布时间】：2021-03-20 10:03:10
【问题描述】：

在 HTML 文件中包含 SVG 代码与使用标记嵌入相比有技术（缺点）优势吗？

我问的不是个人偏好或意见，而是技术层面的事实差异。

浏览器兼容性就是一个例子。 Caniuse.com 告诉我在这方面几乎没有区别（SVG as img vs inline SVG code）。但也许还有其他我不知道的因素？

SVG 作为 HTML 代码的一部分：

<html>
...
<body>
    ...
    <svg version="1.1" ... >
        ...
    </svg>
    ...
</body>
</html>

嵌入为图像的 SVG：

<html>
...
<body>
    ...
    <img src="image.svg" ... >
    ...
</body>
</html>

【问题讨论】：

一方面，除非文件是外部文件，否则您不能使用 SVG 片段标识符。另一方面，如果 SVG 不是内部的，则您不能主动更改它。只是我脑海中的两个例子。
使用的图像格式发生变化时会发生什么？首先，您可以再次编写 css，因为您不再拥有用于图片的 SVG 元素。在第二种情况下，您只需更改图像源的扩展名。但是，您已经为每个人生成了 2 个请求而不是 1 个请求。网站可能会改变吗？不？然后你做了更多的工作，以使未来的潜在维护更容易，但需要额外的请求。
我相信当 svg 使用字体或位图等外部文件时，出于安全原因，它在用作时不起作用。另一方面，根据我的记忆，使用 css 用作时更容易调整大小。
这能回答你的问题吗？ Inline SVG vs SVG File Performance

标签： html svg

【解决方案1】：

两者各有优缺点：

<svg> 标签的优点：

<img> 标签的优点：

无论如何，<svg> 标签似乎更有用。我建议你使用它。

【讨论】：