从 svg 图像中删除像素化边缘答案

【问题标题】：Removing pixelated edges from svg image从 svg 图像中删除像素化边缘
【发布时间】：2017-04-07 12:37:45
【问题描述】：

我有一个 SVG 图像，我需要将它放在我的网页标题中。图像的边缘是像素化的，这让我很困扰。现在我的问题是，是否有某种方法可以从 SVG 中移除这些像素化边缘。下面是我的 SVG 示例。

橙色部分是我说的 SVG 图片。

【问题讨论】：

SVG 图像的要点是不应该发生像素化，只要图像一开始是矢量图。也许您可以尝试再次导出图像。否则，您可以研究抗锯齿。
“不应该发生”是夸大其词。矢量渲染器中发生的抗锯齿非常棒，但它不能创造奇迹。浅角度的高对比度边缘仍然会产生“锯齿”边缘。
话虽如此，橙色形状的底部边缘看起来并没有经过适当的抗锯齿处理。但它可能会受到您用来捕获屏幕截图的任何影响。为了帮助我们弄清楚，您应该发布您正在使用的 SVG（或至少是其中的适当部分）

标签： css image-processing svg rendering webpage-rendering

【解决方案1】：

检查 SVG 对象的 shape-rendering 属性。默认设置应该看起来很流畅，但使用shape-rendering="crispEdges" 会显得有点锯齿状。

<svg width="300" height="100" viewBox="0 0 300 100">
  <path d="M-10 0 C 100 70 200 50 310 40" stroke="orange" fill="transparent"
        stroke-width="60" shape-rendering="auto"/>
  <text x="10" y="90">(auto)</text>
</svg>
<svg width="300" height="100" viewBox="0 0 300 100">
  <path d="M-10 0 C 100 70 200 50 310 40" stroke="orange" fill="transparent"
        stroke-width="60" shape-rendering="crispEdges"/>
  <text x="10" y="90">(crispEdges)</text>
</svg>

【讨论】：

背景图像通过 SVG 边缘泄漏，我感到绝望。现已修复，谢谢！