How to render svg elements with crisp edges while still keeping anti-aliasing?

Question

Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?

I\'m creating a browser-based tool that works in modern br

Answer 1

[I'm posting this as an answer rather than a comment, because I want to post a picture. Otherwise, this is a comment on the useful post by @defghi1977 . +1 to him, by the way.]

Produced

This was rendered by Firefox 38.0.5 .
In Internet Explorer 11, both shape-rendering setting produces the same result with anti-aliasing and not crisp.