css - Removing pixelated edges from svg image -
i have got svg image need put in header of webpage. edges of image pixelated , bothers me. question if there kind of way remove these pixelated edges svg. below example of svg.
the orange part svg image i'm talking about.
check shape-rendering
attributes of svg objects. default setting should pretty smooth, shape-rendering="crispedges"
it's going bit jagged.
<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>
Comments
Post a Comment