Search code examples
htmlsvg

SVG icon looks different when included in the page

I want to display this svg (this is a download link) in my page. I do that like this:

<img alt="logo" src="/assets/logo.svg">

But this is the result:

enter image description here

I have those ugly lines around the central circle but they are not there when I open the SVG file.

Is it a browser bug?

Solution

  • It's called antialiasing and all browsers have it to blend shapes together. It can be disabled by setting shape-rendering="crispEdges" or shape-rendering:crispEdges as a CSS style.

    Two of your shapes could do with having this set, the polygon above the circle and the path below it.