Removing Pixelated Edges from Svg Image
I Have Got an Svg Image Which I Need to Put in the Header of My Webpage. the Edges of the Image Are Pixelated and This Bothers Me. Now My Question Is If There...
I have got an SVG image which I need to put in the header of my webpage. The edges of the image are pixelated and this bothers me. Now my question is if there is some kind of way to remove these pixelated edges from the SVG. Below is an example of my SVG.
The orange part is the SVG image I'm talking about.
1 Answer
Check the shape-rendering attributes of your SVG objects. The default setting should look pretty smooth, but with shape-rendering="crispEdges" it's going to look a 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>James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
