CODEWITHSUNDEEP
htmlcsssvg
ezero
ezero

Reputation: 1310

Remove browser anti-aliasing on .svg image

Is there any way to stop Chrome and Firefox from applying anti-aliasing to an .svg image? It doesn't matter if the image is scaled up or down, or kept at its original size, it always occurs. This is fine for large images but for small icons, the anti-aliasing is really obvious and makes the image look blurry.

I have tried various different values of the image-rendering css property. I believe image-rendering: crisp-edges is the one I need but this is not properly supported yet and has no effect.

enter image description here

The edges of the shape above should be straight black with no anti-aliasing.

Upvotes: 3

Views: 6674

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

Add shape-rendering="crispEdges" to the shapes. You can do this via CSS too e.g.

* {
  shape-rendering: crispEdges;
}

Upvotes: 4

Related Questions