ufldzw
Last Updated: July 07, 2017
·
27.32K
· flipstewart

For crisp edges, use anything but crispEdges

circle { shape-rendering: crispEdges; }

crispEdges

circle { shape-rendering: auto; }

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

6 Responses
Add your response

4106

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 ·
9306

you need it for QR Codes for example ;)

over 1 year ago ·
9370

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 ·
14849

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 ·
17492

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 ·
29074

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.

over 1 year ago ·