img引入svg不显示

如果您在使用 img 标签引入 SVG 图片时遇到了显示问题，可能是因为 img 标签默认会将 SVG 图片当作普通图像处理，而不是矢量图像。您可以尝试以下几种方法来解决这个问题：

1. 使用 object 标签引入 SVG 图片。

<object type="image/svg+xml" data="your-svg-image.svg"></object>

2. 直接在 HTML 文件中嵌入 SVG 代码。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" />
</svg>

3. 在 CSS 样式中将 img 标签的 display 属性设置为 inline-block。

img {
  display: inline-block;
}

4. 将 SVG 图片转换为 base64 编码，并使用 data URI 引入。

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxzd...

其中，第二种方法是最简单的解决方案，但是会增加 HTML 文件的大小。第一种方法可以完全保留 SVG 图像的矢量特性，并且可以通过 JavaScript 操作 SVG 内容。第三种方法只是一种 Hack，可能会影响到其他的图片布局。第四种方法也可以保留 SVG 图像的矢量特性，但是需要将 SVG 转换为 base64 编码。