CODEWITHSUNDEEP
htmlsvg
Gio Polvara
Gio Polvara

Reputation: 26978

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?

Upvotes: 2

Views: 1068

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

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.

Upvotes: 2

Related Questions