为什么我调整大小后的 SVG 图标在渲染时变得模糊？

Question

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

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

body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}
svg {
  height: 22px;
  width: 22px;
}
svg:hover path {fill: tomato;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 11.9H6v-1.2c0-.4-.3-.7-.7-.7H3.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h2.7V14c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7v-1.2h9.5c.1 0 .2-.1.2-.2v-.5c.1-.1 0-.2-.1-.2zm-10.5 2h-1V11h1v2.9zM15.6 3.1H8V1.9c0-.4-.3-.7-.7-.7H5.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h4.7v1.2c0 .5.3.8.7.8h1.5c.4 0 .7-.3.7-.7V4.1h7.6c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.2-.2-.2zM7 5.1H6v-3h1v3zm8.6 2.4h-2.7V6.3c0-.4-.3-.7-.7-.7h-1.5c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2H10v1.2c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7V8.5h2.7c.1 0 .2-.1.2-.2v-.5c0-.2-.1-.3-.2-.3zm-3.7 2h-1v-3h1v3z"/></svg>

我已经尝试添加

shape-rendering="geometricPrecision" 或 width="100%" 到 svg 标签，
shape-rendering="crispEdges" 到 path 和
transform: translateZ(0); 到 svg 样式

但没有什么能让矢量图标变得清晰。

使图标变小或变大都没有帮助。使用

svg {
  height: 42px;
  width: 42px;
}

仍然显示模糊的 SVG 图标。

关于如何使缩放的矢量图像清晰的任何想法？

CodePen 上的示例代码：https://codepen.io/dash/pen/LYPxBPJ

Answer 1

它是 "blurry" 的原因是抗锯齿。当线条或形状的边缘仅部分覆盖像素时，浏览器会通过绘制半透明像素来近似覆盖该部分。

例如，如果您的背景是白色，而黑色形状的边缘仅覆盖半个像素。这将通过将该像素设置为 50% 灰色来近似。

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

div {
  position: relative;
}
div > * {
  position: absolute;
  top: 0;
}

svg {
  height: 440px;
  width: 440px;
}

svg:not(.grid) {
  opacity: 0.5;
}

<div>
  <svg class="grid" viewBox="0 0 22 22" fill="none" stroke="red" stroke-width="0.045">
    <path d="M0,0 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22"/>
    <path d="M0,0 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22"/>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 11.9H6v-1.2c0-.4-.3-.7-.7-.7H3.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h2.7V14c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7v-1.2h9.5c.1 0 .2-.1.2-.2v-.5c.1-.1 0-.2-.1-.2zm-10.5 2h-1V11h1v2.9zM15.6 3.1H8V1.9c0-.4-.3-.7-.7-.7H5.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h4.7v1.2c0 .5.3.8.7.8h1.5c.4 0 .7-.3.7-.7V4.1h7.6c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.2-.2-.2zM7 5.1H6v-3h1v3zm8.6 2.4h-2.7V6.3c0-.4-.3-.7-.7-.7h-1.5c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2H10v1.2c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7V8.5h2.7c.1 0 .2-.1.2-.2v-.5c0-.2-.1-.3-.2-.3zm-3.7 2h-1v-3h1v3z"/></svg>
</div>

您可以看到图标中的大部分形状都没有与像素边界对齐。它们的边缘穿过像素的中间。

您使用的图标设计为以 16x16 或它的倍数显示。如果这次我们在其上叠加一个 16x16 的网格，您会看到大部分形状与像素边界对齐。

div {
  position: relative;
}
div > * {
  position: absolute;
  top: 0;
}

svg {
  height: 320px;
  width: 320px;
}

svg:not(.grid) {
  opacity: 0.5;
}

<div>
  <svg class="grid" viewBox="0 0 16 16" fill="none" stroke="red" stroke-width="0.045">
    <path d="M0,0 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22v1h-22v1 h22"/>
    <path d="M0,0 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22h1v-22h1 v22"/>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.6 11.9H6v-1.2c0-.4-.3-.7-.7-.7H3.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h2.7V14c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7v-1.2h9.5c.1 0 .2-.1.2-.2v-.5c.1-.1 0-.2-.1-.2zm-10.5 2h-1V11h1v2.9zM15.6 3.1H8V1.9c0-.4-.3-.7-.7-.7H5.8c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2h4.7v1.2c0 .5.3.8.7.8h1.5c.4 0 .7-.3.7-.7V4.1h7.6c.1 0 .2-.1.2-.2v-.6c0-.1-.1-.2-.2-.2zM7 5.1H6v-3h1v3zm8.6 2.4h-2.7V6.3c0-.4-.3-.7-.7-.7h-1.5c-.4 0-.7.3-.7.7v1.2H.4c-.1 0-.2.1-.2.2v.5c0 .1.1.2.2.2H10v1.2c0 .4.3.7.7.7h1.5c.4 0 .7-.3.7-.7V8.5h2.7c.1 0 .2-.1.2-.2v-.5c0-.2-.1-.3-.2-.3zm-3.7 2h-1v-3h1v3z"/></svg>
</div>

为了让您的图标获得 best/sharpest 结果，您应该：

按预期大小 (16x16) 显示图标
查找或创建专为 22x22 设计的新图标集
许多图标集专为 24x24 显示而设计。也许您可以改为使用其中一组（并以 24x24 显示）

为什么我调整大小后的 SVG 图标在渲染时变得模糊？

Why is my resized SVG icon blurry when rendered?

html

css

svg

scale