Html 为什么我的缩放SVG图标在渲染时模糊？

我使用Illustrator创建了一个SVG图标。 将此图标内联粘贴并调整大小到我的HTML代码中会使图像模糊

Firefox、Chrome和Edge都会出现此问题

正文{
对齐项目：居中；
显示器：flex；
高度：100vh；
证明内容：中心；
宽度：100vw；
}
svg{
高度：22px；
宽度：22px；
}
svg:悬停路径{fill:tomato；}

它之所以“模糊”，是因为消除了混叠。当线条或形状的边缘仅部分覆盖像素时，浏览器通过绘制半透明像素来近似该部分覆盖

例如，如果背景为白色，而黑色形状的边缘仅覆盖半个像素。通过将该像素设置为50%的灰色，可以近似得到该值

正在以22x22像素绘制您的图标。如果我把你的图标设计放大20倍，覆盖一个22x22像素的网格。你应该能够看到发生了什么

div{
位置：相对位置；
}
div>*{
位置：绝对位置；
排名：0；
}
svg{
高度：440px；
宽度：440px；
}
svg：不是（.grid）{
不透明度：0.5；
}

也许是我那可怜的老眼睛，但我觉得它并不模糊。你能提供一个例子来说明它应该是什么样子吗？我觉得你的最小笔划是SVG的1/16…我会从一个更大的SVG开始，使用更小的笔划大小。viewBox的大小非常小，只有16/16。图标大小也太小：22/22。谷歌最小的图标是24/24。我已经在illustrator中加载了您的svg，并将artboard大小更改为500/500。我还将图标大小更改为24/24。模糊消失了@enxaneta说的话。如果您的坐标需要使用分数单位，这通常表示您意外地将SVG误认为具有“真实尺寸”。作为矢量图形，它们没有。选择一个适合整数坐标的尺寸，在尺寸上精确缩小。例如，如果您知道SVG将以32x32的速度渲染，请在640x640四元网格中“绘制”。然后将您忘记在此处添加的

宽度

和

高度

属性设置为页内维度（例如“32px”）。