從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圖像中刪除像素化邊緣

回答

相關問題