使用 <img> 与 <image> 引用 SVG

Question

我注意到有两种方法可以引用 SVG 图像。您可以使用标准<img>标签

<img src="picture.svg" alt="SVG Image"/>

或者你可以使用<image>标签

<svg>
   <image xlink:href="picture.svg" x="0" y="0" height="50px" width="50px"/>
</svg>

对我来说，简单地使用该标签似乎更好<img>，因为您获得的alt属性使其更适合搜索，并且您还可以通过 CSS 应用样式。我在应用样式时遇到问题，因为 SVG<image>需要属性。

<image>我想知道您使用 SVG标签而不是标准标签是否有重要原因<img>？

Answer 1

该<svg>元素用于将内联 SVG 放入文档中。因此在这种情况下，如果您想避免加载外部文件，您可以将 的内容picture.svg直接放在<svg>和</svg>标签之间。

如果这不是预期目的，并且您只想显示 SVG 格式的图像，则没有真正的理由将其放入 SVG 块中；只需使用<img>.