网页中 img 标签引用 SVG 时如何设置宽高属性

设置宽高属性的原因

网页中 img 标签引用 SVG 时，浏览器需要知道图片的尺寸才能正确渲染。如果未设置宽高属性，SVG 文件可能无法显示或显示为空白。这是因为 SVG 文件本身不包含固定的尺寸信息，必须由外部标签指定。

设置宽高属性可以确保图片在页面中占据正确的空间，避免布局错乱。例如，在 MDN 的示例中，img 标签同时设置了 height 和 width 属性，以确保 SVG 图形按预期尺寸显示。这有助于提升用户体验和页面加载的稳定性。

在 img 标签中，可以通过 height 和 width 属性直接指定 SVG 的尺寸。例如，使用 height=87 和 width=100 可以将 SVG 图形限制为 87x100 像素。这种方法简单直接，适用于大多数场景。

如果 SVG 图形没有固定的宽高比，可以同时设置 height 和 width 属性。如果只需要指定其中一个维度，浏览器会根据 SVG 的原始比例自动计算另一个维度。但为了确保显示效果一致，建议同时设置两个属性。

在浏览器中打开网页后，检查 img 标签引用的 SVG 是否正确显示。如果未设置宽高属性，图片可能无法加载或显示为空白。此时可以通过开发者工具查看 img 标签的属性，确认是否缺少 height 或 width。

如果图片显示正常，说明宽高属性设置正确。如果图片仍然无法显示，可以检查 SVG 文件路径是否正确，或确认服务器是否正确配置了 SVG 文件的 MIME 类型。此外，还可以尝试使用 srcset 属性为不同尺寸的 SVG 提供备选方案。

设置宽高属性时，建议使用像素值或百分比，避免使用单位不明确的值。例如，使用 width=100% 可以让 SVG 占据容器的全部宽度，但需要确保容器有明确的尺寸限制。此外，宽高属性不应与 CSS 样式中的 width 和 height 冲突，否则可能导致显示异常。

对于复杂的 SVG 图形，建议使用矢量图形编辑器（如 Inkscape 或 Illustrator）导出时自动包含尺寸信息。这样可以减少手动设置宽高属性的麻烦，同时确保图形在不同设备上的一致性。如果 SVG 文件较大，还可以使用 SVG 优化工具（如 SVGO）减小文件大小，提升加载速度。