Last Updated: July 07, 2017
· flipstewart

For crisp edges, use anything but crispEdges

circle { shape-rendering: crispEdges; }


circle { shape-rendering: auto; }


shape-rendering sets the priority for how your SVGs should be rendered. You can specify auto, optimizeSpeed, crispEdges, or geometricPrecision, where auto tries to accommodate speed and crispness without sacrificing precision. For whatever reason, only one of those options produces messy SVGs... and it's crispEdges.

So, for accuracy and crisp edges, use anything but crispEdges

Say Thanks

6 Responses
Add your response


Nice tip. I should think that's just a bug that will be fixed soon though. Still, good to avoid for now.

over 1 year ago ·

you need it for QR Codes for example ;)

over 1 year ago ·
0  by8vx2xvikfv o1d3xpvjgov5tbz a13qe0vjpgeiqbofjpftuurge2ue enkf0ckyyssgf sxs

I agree that the crispEdges option makes curvy svg's look bad, but they do serve a purpose when styling straight lines more or less. I use D3 to create charts with axes that look a lot cleaner when I add shape-rendering: crispEdges to their CSS :)

over 1 year ago ·

What "crispEdges" does is basically it disables anti-aliasing.
The reason one pixel lines look blurred is that SVG, just like Canvas, considers whole numbered coordinates to fall in between pixels.
If you draw a line with a 1px wide stroke on a half coordinate it will look sharp even without "crispEdges".
See the example, the first line will produce a two pixel wide gray line due to anti-aliasing, but both the other lines will produce a sharp one pixel wide black line.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <line x1="0" y1="4" x2="16" y2="4" stroke="#000" stroke-width="1" /> <line x1="0" y1="8" x2="16" y2="8" stroke="#000" stroke-width="1" shape-rendering="crispEdges"/> <line x1="0" y1="11.5" x2="16" y2="11.5" stroke="#000" stroke-width="1" /> </svg>

over 1 year ago ·
Gbwixdlgv7iu8rop7tzx normal

As Johan said above, it is absolutely normal that crispEdges will make a circle look bad, because this is the same when you design it in PhotoShop for example. A circle without antialiasing margins looks really bad.

But for rectangle objects, there is nothing better than crispEdges when using SVG.

over 1 year ago ·

Still true a year later. I just did a global replace of crispEdges with geometricPrecision and now everything looks good, even the circles in my flowchart.

5 months ago ·