Google Lighthouse 有一個紅色三角形錯誤，該錯誤會顯著影響最佳實踐得分：
- 顯示寬高比不正確的影像
我可以理解為什么這會被視為固定尺寸光柵影像的錯誤（以及具有明確設定尺寸的標準 SVG 矢量影像）。
但在這種情況下，我在網頁上顯示少量 SVG 標志，并且 SVG 標志在頁面的一部分顯示為特定尺寸，而在另一部分顯示不同尺寸。
為了即使在該 SVG 的多個實體以不同尺寸顯示時也能使用相同的單個 SVG，我使用了以下屬性：
preserveAspectRatio="none"
這明確意味著（我希望）沒有不正確的縱橫比。
但是，Google Lighthouse 提出了上述錯誤。
在正常的桌面瀏覽器大小下，圖形非常小（要么 要么27px x 27px）27px x 18px所以，是的，我可能會用.png或.webp影像替換它們。
但是我還需要記住，在更窄的回應式設計斷點處，標志影像的尺寸也會略微增加，因此我需要為每個斷點提供一整套固定尺寸的光柵影像。
有什么方法可以指示 Google Lighthouse 忽略明確宣告的 SVG 影像的縱橫比preserveAspectRatio="none"？
uj5u.com熱心網友回復：
燈塔報錯：
- 顯示寬高比不正確的影像
正是因為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 可以有一個 CSSwidth并且height可以無限地向上或無限地向下縮放它——但它們不能改變SVG的形狀viewBox，如.
如果 CSS 值改變了SVG 的形狀，Lighthouse 會報上面的錯誤。
結論
為避免上述燈塔錯誤：
- SVG必須有一個
viewBox屬性 - SVG可能無法使用
preserveAspectRation="none" - CSS
widthvsheight縱橫比和 SVGviewBox縱橫比必須匹配
另請注意：
在這種情況下，宣告 CSS 屬性aspect-ratio或 HTMLwidth和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;等等。
但是，如果您希望<img>使用不同的縱橫比來設定相同的基于 SVG 的樣式：
width: 36px; height: 24px;// 縱橫比3:2
then you must create a new SVG with a viewBox which establishes an aspect ratio consistent with the CSS values:
viewBox="0 0 540 360"
if you don't want Lighthouse to report an incorrect aspect ratio error.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432814.html
上一篇：填充非線性Svg路徑描邊