使用<img/>与<img/>引用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>需要属性。

我想知道为什么你会使用SVG <image> 标签而不是标准 <img>？

Answer 1

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

如果这不是预期的目的，并且您只是想要显示恰好是SVG格式的图像，那么没有真正的理由放入SVG块内;只需使用<img>。