Question

I’m using Raphaël.js to draw some small circles (2-4px radius), which is done through SVG on all browser except IE. The circles don’t look smooth to me, so my question is:

1. Is there some way to add antialiasing to Raphaël.js?
2. Barring that, is there some way to antialias SVG objects?

Answer 1

On further experimentation, I think the trouble is not so much that the SVG was not antialiased (indeed, I found when drawing lines that I usually wanted to disable antialiasing by setting shapeRendering to crisp-edges; see this issue) as that I wanted even smoother edges on my circles than the antialiasing provided.

To achieve this in Raphaël.js, you can set the fill and stroke colors separately. For instance, on a white background, setting the stroke to a lighter color than the fill achieves the desired effect.