从 svg 图像中去除像素化边缘

Question

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

橙色部分是我正在谈论的 SVG 图像。

Answer 1

检查shape-renderingSVG 对象的属性。默认设置应该看起来很平滑，但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>