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

-1

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

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

来源

2017-04-07 Phundament

SVG图像的一点是，像素化不应该发生，只要图像是一个矢量绘图开始。也许你可以尝试再次导出图像。否则，您可以查看抗锯齿。 –

“不应该发生”正在夸大它。矢量渲染器中出现的反锯齿效果非常棒，但它不能创造奇迹。浅角度的高对比度边缘仍然会产生“锯齿状”边缘。 –

话虽如此，橙色形状的底部边缘看起来并不像它有适当的反锯齿。但它可能会受到你用来捕获屏幕截图的任何影响。为了帮助我们弄清楚，你应该发布你正在使用的SVG（或者至少是它的适当部分） –

检查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>

来源

2017-04-07 13:04:01

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

回答

相关问题