svg img 标签未显示 - Html

问题描述

在 HTML 中使用 SVG 图像时，可能会遇到 img 标签无法正确显示的情况。

可能原因

1. 浏览器不支持 SVG 图像。
2. SVG 文件路径错误。
3. SVG 文件格式错误。
4. SVG 图像太大，超过浏览器限制。
5. 代码错误。

解决方案

1. 确认浏览器是否支持 SVG 图像，可以使用 Modernizr 或 caniuse.com 查询浏览器支持情况。
2. 确认 SVG 文件路径是否正确，可以使用绝对路径或相对路径。
3. 确认 SVG 文件是否正确，可以使用在线 SVG 校验器进行检查。
4. 如果 SVG 图像太大，可以尝试压缩 SVG 文件或使用其他格式的图像。
5. 检查代码是否正确，包括 img 标签的属性是否正确，以及 SVG 文件是否正确引入。

以下是正确 img 标签引入 SVG 图像的示例代码：

<img src="path/to/your/image.svg" alt="Description of image" width="100%" height="auto">

参考资料

1. Can I Use: SVG
2. Modernizr
3. SVG-validator