CODEWITHSUNDEEP
svg
Phundament
Phundament

Reputation: 55

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 is some kind of way to remove these pixelated edges from the SVG. Below is an example of my SVG.

example of svg

The orange part is the SVG image I'm talking about.

Upvotes: 2

Views: 18189

Answers (1)

r3mainer
r3mainer

Reputation: 24587

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>

Upvotes: 6

Related Questions