Google 具有 preserveAspectRatio="none" 的 Lighthouse 和 SVG
Google Lighthouse and SVGs with preserveAspectRatio="none"
Google Lighthouse 有一个 红色三角错误，这会显着影响 最佳实践 得分：
- 显示宽高比不正确的图像
我能理解为什么这会被视为固定尺寸光栅图像（以及具有显式设置尺寸的标准 SVG 矢量图像）的错误。
但在这种情况下，我在网页上显示少量 SVG 标志，并且 SVG 标志在页面的一部分以特定尺寸显示，而在另一部分以不同尺寸显示。
为了即使在同一 SVG 的多个实例以不同尺寸显示时也能使用同一个 SVG，我使用了属性：
preserveAspectRatio="none"
这明确表示（我希望）没有不正确的纵横比。
但是 Google Lighthouse 仍然会引发上述错误。
在正常的桌面浏览器大小下，图形非常小（27px x 27px 或 27px x 18px）所以，是的，我可以用 .png 或 .webp 替换它们图片。
但是我还需要记住，标志图像尺寸 也 在较窄的响应式设计断点处尺寸略有增加，所以我需要一个完整的每个断点的固定尺寸光栅图像集。
有什么方法可以指示 Google Lighthouse 忽略明确声明 preserveAspectRatio="none" 的 SVG 图像的纵横比？
Lighthouse 报错：
- 显示宽高比不正确的图像
正是因为 SVG 包含 preserveAspectRatio="none" 属性。
在两个特定的上下文中：
- SVG 没有
viewBox 属性
- SVG 包含
preserveAspectRatio="none" 属性
SVG 的内部尺寸 默认为标准替换元素尺寸：
300px x 150px.
这使 SVG 的 固有宽高比 为 1:2。
此时如果SVG显示在不同宽高比的网页上，Lighthouse会报上面的错误。
包括 viewBox 属性
否则，viewBox 属性将确定 SVG 的内部尺寸 和内部纵横比。
与任何其他 <img> 一样，SVG 可以通过 CSS 设置样式以具有 any width 和 any height。但是由这些值 产生的 纵横比 必须 与 SVG 确定的 固有纵横比 相同viewBox.
因此，SVG 可以有 CSS width 和 height 无限向上或无限向下缩放 - 但它们不能改变 形状 [= viewBox.
定义的 SVG 的 129=]
如果CSS值改变了SVG的shape，Lighthouse会报上面的错误。
结论
为避免上述 Lighthouse 错误：
- SVG 必须具有
viewBox属性
- SVG 不能使用
preserveAspectRation="none"
- CSS
width vs height 宽高比和 SVG viewBox 宽高比 必须 匹配
另请注意：
声明 CSS 属性 aspect-ratio 或 HTML width 和 height 属性在这种情况下无济于事。 CSS 和 HTML 都无法覆盖 SVG viewBox.
建立的固有尺寸
示例：
如果你有一个 SVG
viewBox="0 0 360 360"
然后，使用 CSS，您可以将该 SVG 显示为任何尺寸，只要它保持纵横比 1:1。
例如
width: 24px; height: 24px;width: 36px; height: 36px;width: 48px; height: 48px;等
但是，如果您希望使用不同的纵横比设置相同的 SVG-based <img> 样式：
width: 36px; height: 24px; // 3:2
然后您必须创建一个新的 SVG viewBox 建立与 CSS 值一致的宽高比：
viewBox="0 0 540 360"
如果您不希望 Lighthouse 报告不正确的纵横比错误。
Google Lighthouse 有一个 红色三角错误，这会显着影响 最佳实践 得分：
- 显示宽高比不正确的图像
我能理解为什么这会被视为固定尺寸光栅图像（以及具有显式设置尺寸的标准 SVG 矢量图像）的错误。
但在这种情况下，我在网页上显示少量 SVG 标志，并且 SVG 标志在页面的一部分以特定尺寸显示，而在另一部分以不同尺寸显示。
为了即使在同一 SVG 的多个实例以不同尺寸显示时也能使用同一个 SVG，我使用了属性：
preserveAspectRatio="none"
这明确表示（我希望）没有不正确的纵横比。
但是 Google Lighthouse 仍然会引发上述错误。
在正常的桌面浏览器大小下，图形非常小（27px x 27px 或 27px x 18px）所以，是的，我可以用 .png 或 .webp 替换它们图片。
但是我还需要记住，标志图像尺寸 也 在较窄的响应式设计断点处尺寸略有增加，所以我需要一个完整的每个断点的固定尺寸光栅图像集。
有什么方法可以指示 Google Lighthouse 忽略明确声明 preserveAspectRatio="none" 的 SVG 图像的纵横比？
Lighthouse 报错：
- 显示宽高比不正确的图像
正是因为 SVG 包含 preserveAspectRatio="none" 属性。
在两个特定的上下文中：
- SVG 没有
viewBox属性 - SVG 包含
preserveAspectRatio="none"属性
SVG 的内部尺寸 默认为标准替换元素尺寸：
300px x 150px.
这使 SVG 的 固有宽高比 为 1:2。
此时如果SVG显示在不同宽高比的网页上，Lighthouse会报上面的错误。
包括 viewBox 属性
否则，viewBox 属性将确定 SVG 的内部尺寸 和内部纵横比。
与任何其他 <img> 一样，SVG 可以通过 CSS 设置样式以具有 any width 和 any height。但是由这些值 产生的 纵横比 必须 与 SVG 确定的 固有纵横比 相同viewBox.
因此，SVG 可以有 CSS width 和 height 无限向上或无限向下缩放 - 但它们不能改变 形状 [= viewBox.
如果CSS值改变了SVG的shape，Lighthouse会报上面的错误。
结论
为避免上述 Lighthouse 错误：
- SVG 必须具有
viewBox属性 - SVG 不能使用
preserveAspectRation="none" - CSS
widthvsheight宽高比和 SVGviewBox宽高比 必须 匹配
另请注意：
声明 CSS 属性 aspect-ratio 或 HTML width 和 height 属性在这种情况下无济于事。 CSS 和 HTML 都无法覆盖 SVG viewBox.
示例：
如果你有一个 SVG
viewBox="0 0 360 360"
然后，使用 CSS，您可以将该 SVG 显示为任何尺寸，只要它保持纵横比 1:1。
例如
width: 24px; height: 24px;width: 36px; height: 36px;width: 48px; height: 48px;等
但是，如果您希望使用不同的纵横比设置相同的 SVG-based <img> 样式：
width: 36px; height: 24px;//3:2 的纵横比
然后您必须创建一个新的 SVG viewBox 建立与 CSS 值一致的宽高比：
viewBox="0 0 540 360"
如果您不希望 Lighthouse 报告不正确的纵横比错误。