Antialiasing, web SVG and Raphaël.js

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

I stumbled across this post while looking for an answer too. After trying to set the stroke at a lighter colour I found that it just made it look blurry.

However, if you set the stroke to "none" like below, it makes a big difference in the smoothness of the edges.

    var circle = paper.circle(50, 40, 20);
    circle.attr("fill", "#F00");
    circle.attr("stroke", "none");

Answer 2

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.