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
Written by Flip Stewart
Related protips
6 Responses
Nice tip. I should think that's just a bug that will be fixed soon though. Still, good to avoid for now.
you need it for QR Codes for example ;)
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 :)
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>
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.
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.
Have a fresh tip? Share with Coderwall community!
