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

【问题标题】：Referencing SVG with <img> vs <image>使用 <img> 与 <image> 引用 SVG
【发布时间】：2014-12-17 12:44:58
【问题描述】：

我注意到有两种方法可以引用 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>？

【问题讨论】：

标签： css image svg

【解决方案1】：

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

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

【讨论】：

非常感谢。这回答了我的问题。
不客气。请注意，我没有说您应该使用<img>。使用 SVG <image> 就可以了；在没有其他 SVG 的情况下没有必要。
是的，谢谢你的澄清。我想具体说明一下我的用例，我们想在用户移动时缩小 SVG 图像。我们可以使用 JS 直接在 <image> 标签上编辑属性，但是通过切换到 <img>，我们可以只使用媒体查询并在它们达到屏幕尺寸时更改 CSS 宽度和高度。为非常简单的事情节省了很多痛苦。