html - 为什么 SVG 图像在使用 CSS 调整大小时变得丑陋(已测试 Chrome、Firefox)

Question

我可以在 Chrome 和 Firefox 中重现这个问题。

这是有问题的 SVG 图像: https://www.iconfinder.com/icons/284101/editor_hambuger_list_menu_view_icon#size=512

这是重现问题的最少代码:

<img 
style="width: 15px; vertical-align: middle;"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMiAxMiIgd2lkdGg9IjIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzPjxwYXRoIGQ9Ik0wLjUwMDgzNjEzNCwwIEMwLjIyNDIzMTk3NSwwIDAsMC4yMTQwMzUwMzQgMCwwLjUwNDY4NDQ0OCBMMCwxLjQ5NTMxNTU1IEMwLDEuNzc0MDQ1MDggMC4yMTc3NDE3MjgsMiAwLjUwMDgzNjEzNCwyIEwyMS40OTkxNjM5LDIgQzIxLjc3NTc2OCwyIDIyLDEuNzg1OTY0OTcgMjIsMS40OTUzMTU1NSBMMjIsMC41MDQ2ODQ0NDggQzIyLDAuMjI1OTU0OTI0IDIxLjc4MjI1ODMsMCAyMS40OTkxNjM5LDAgTDAuNTAwODM2MTM0LDAgWiBNMC41MDA4MzYxMzQsNSBDMC4yMjQyMzE5NzUsNSAwLDUuMjE0MDM1MDMgMCw1LjUwNDY4NDQ1IEwwLDYuNDk1MzE1NTUgQzAsNi43NzQwNDUwOCAwLjIxNzc0MTcyOCw3IDAuNTAwODM2MTM0LDcgTDIxLjQ5OTE2MzksNyBDMjEuNzc1NzY4LDcgMjIsNi43ODU5NjQ5NyAyMiw2LjQ5NTMxNTU1IEwyMiw1LjUwNDY4NDQ1IEMyMiw1LjIyNTk1NDkyIDIxLjc4MjI1ODMsNSAyMS40OTkxNjM5LDUgTDAuNTAwODM2MTM0LDUgWiBNMC41MDA4MzYxMzQsMTAgQzAuMjI0MjMxOTc1LDEwIDAsMTAuMjE0MDM1IDAsMTAuNTA0Njg0NCBMMCwxMS40OTUzMTU2IEMwLDExLjc3NDA0NTEgMC4yMTc3NDE3MjgsMTIgMC41MDA4MzYxMzQsMTIgTDIxLjQ5OTE2MzksMTIgQzIxLjc3NTc2OCwxMiAyMiwxMS43ODU5NjUgMjIsMTEuNDk1MzE1NiBMMjIsMTAuNTA0Njg0NCBDMjIsMTAuMjI1OTU0OSAyMS43ODIyNTgzLDEwIDIxLjQ5OTE2MzksMTAgTDAuNTAwODM2MTM0LDEwIFoiIGlkPSJwYXRoLTEiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9ImVkaXRvcl9saXN0X3ZpZXdfaGFtYnVnZXJfbWVudV9nbHlwaCI+PHVzZSBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48dXNlIGZpbGw9Im5vbmUiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L2c+PC9nPjwvc3ZnPg==" /> Menu

您可以在以下位置试用它并查看它的运行情况: http://jsfiddle.net/adamovic/s3dZ2/1/

任何人都知道为什么这个可缩放矢量图形会在线条变得不成比例的地方调整大小，并且知道如何解决这个问题？

顺便说一句，在生产中我将此图像的大小调整为 1EM，以显示在文本“菜单”旁边，但要重现此问题，这是最简单的方法。

更新:将示例从 11.5 像素更新为 15 像素，重现了同样的问题。

在生产中我使用宽度:1EM；或类似的响应式设计，知道如何响应式缩放此图像以使线条成比例吗？

也许像 min-width 和 max-width 这样的修复可以工作，但我无法让它与某些 mozilla 图像特定命令一起工作。

Answer 1

在 11.5 像素处，图像的高度应为 6.3 像素。其中，每条黑线的高度应为 1.1 像素，每条白线的高度应为 1.5 像素。最重要的是，浏览器将图片调整为 6 像素高度。

如果图像每行(白色和黑色)有 1 个像素并且大小为 5 的倍数，它看起来会很棒。

稍后编辑在给定的图片中，黑线占图像大小的 16.67%(所有线代表 50%)，白线占 25%。所以...对于 8 像素的高度，黑线的高度为 1.3 像素，白线的高度为 2 像素。在纸上看起来不错且未更改的最小图像黑线为 2 个像素，白线为 3 个像素，这意味着图像的高度为 12 像素。

基本上，如果一个像素必须共享白线和黑线，浏览器将创建一个灰色阴影，这是两者的平均值，因为它只能显示一种颜色。

EX:一个像素必须显示 0.67 白色(#FFFFFF 或 255,255,255)和 0.33(#000000 或 0,0,0)黑色:0.67*255 + 0.33*0 = 170.85(近似 171)所以显示的颜色是(#ABABAB 或 171,171,171)