ufldzw
Last Updated: July 07, 2017
·
22.37K
· flipstewart
Daff18b2308e4ca7ef29420451ac12da

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

Say Thanks
Respond

6 Responses
Add your response

4106
Be56c908d3b96887a7a597648945e88d

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

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

5 months ago ·