Lighthouse标记SVG图片宽高比错误是否为误报？如何解决？

问题情况 #

Lighthouse提示某SVG存在「显示宽高比不正确的图片」问题：该SVG通过CSS设置为50x50像素显示，但Lighthouse判定它的实际宽高比是300x150，而SVG根标签明明声明了24x24的宽高。对应的SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> 
  <g>  
    <title>backgr</title>  
    <rect fill="none" id="canvas_backgr" height="402" width="582" y="-1" x="-1"/> 
  </g> 
  <g>  
    <title>Layer 1</title>  
    <path fill="#ffffff" stroke="#990099" id="ster" d="m12.9,2.6l2.3,5c0.1,0.3 0.4,0.5 0.7,0.6l5.2,0.8c0.9,0 1.2,1 0.6,1.6l-3.8,3.9c-0.2,0.2 -0.3,0.6 -0.3,0.9l0.9,5.4c0.1,0.8 -0.7,1.5 -1.4,1.1l-4.7,-2.6c-0.3,-0.2 -0.6,-0.2 -0.9,0l-4.7,2.6c-0.7,0.4 -1.6,-0.2 -1.4,-1.1l0.9,-5.4c0.1,-0.3 -0.1,-0.7 -0.3,-0.9l-3.8,-3.9c-0.5,-0.6 -0.2,-1.6 0.6,-1.7l5.2,-0.8c0.3,0 0.6,-0.3 0.7,-0.6l2.3,-5c0.5,-0.7 1.5,-0.7 1.9,0.1z"/> 
  </g>
</svg>

这是不是Lighthouse误报？ #

不是误报。问题出在SVG内部的那个rect元素：它的宽是582、高是402，是导出SVG时附带的无填充画布背景。当SVG没有viewBox属性时，Lighthouse计算固有宽高比会参考内容的实际边界，也就是这个大矩形的尺寸，而非根标签声明的24x24。582:402的比例被Lighthouse简化识别为300:150（2:1），和CSS设置的50x50（1:1）比例不匹配，所以触发了提示。

怎么消除这个标记？ #

1. 删除无用的背景矩形 #

这个rect是无填充的，没有实际视觉作用，直接删掉就能解决问题，修改后的SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> 
  <g>  
    <title>Layer 1</title>  
    <path fill="#ffffff" stroke="#990099" id="ster" d="m12.9,2.6l2.3,5c0.1,0.3 0.4,0.5 0.7,0.6l5.2,0.8c0.9,0 1.2,1 0.6,1.6l-3.8,3.9c-0.2,0.2 -0.3,0.6 -0.3,0.9l0.9,5.4c0.1,0.8 -0.7,1.5 -1.4,1.1l-4.7,-2.6c-0.3,-0.2 -0.6,-0.2 -0.9,0l-4.7,2.6c-0.7,0.4 -1.6,-0.2 -1.4,-1.1l0.9,-5.4c0.1,-0.3 -0.1,-0.7 -0.3,-0.9l-3.8,-3.9c-0.5,-0.6 -0.2,-1.6 0.6,-1.7l5.2,-0.8c0.3,0 0.6,-0.3 0.7,-0.6l2.3,-5c0.5,-0.7 1.5,-0.7 1.9,0.1z"/> 
  </g>
</svg>

2. 添加viewBox属性 #

给根svg标签加上viewBox="0 0 24 24"，明确指定SVG的可视区域为24x24，这样Lighthouse会以viewBox的宽高比为准，即使内部有大矩形也会被缩放到视口内，修改后的代码：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
  <g>  
    <title>backgr</title>  
    <rect fill="none" id="canvas_backgr" height="402" width="582" y="-1" x="-1"/> 
  </g> 
  <g>  
    <title>Layer 1</title>  
    <path fill="#ffffff" stroke="#990099" id="ster" d="m12.9,2.6l2.3,5c0.1,0.3 0.4,0.5 0.7,0.6l5.2,0.8c0.9,0 1.2,1 0.6,1.6l-3.8,3.9c-0.2,0.2 -0.3,0.6 -0.3,0.9l0.9,5.4c0.1,0.8 -0.7,1.5 -1.4,1.1l-4.7,-2.6c-0.3,-0.2 -0.6,-0.2 -0.9,0l-4.7,2.6c-0.7,0.4 -1.6,-0.2 -1.4,-1.1l0.9,-5.4c0.1,-0.3 -0.1,-0.7 -0.3,-0.9l-3.8,-3.9c-0.5,-0.6 -0.2,-1.6 0.6,-1.7l5.2,-0.8c0.3,0 0.6,-0.3 0.7,-0.6l2.3,-5c0.5,-0.7 1.5,-0.7 1.9,0.1z"/> 
  </g>
</svg>

这样Lighthouse会识别SVG的宽高比为1:1，和CSS设置的50x50匹配，提示自然消失。

3. 调整CSS尺寸匹配内容比例（不推荐） #

如果非要保留那个大矩形，可以把CSS尺寸改成和582:402比例匹配的值（比如60x40），但这不符合你要50x50显示的需求，所以不建议用这种方法。

内容的提问来源于stack exchange，提问作者Marty