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画像からピクセル化されたエッジを削除する

答えて

関連する問題