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:
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");
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.
I've only tested this in Safari 6 but adding an anti-aliased stroke of the same color seemed to help:
<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >
Antialiasing is done via the SVG renderer, so you'd need to look at the client that is showing the SVG. The problem, however, is that what you're drawing is too small to be antialiased well. If you've got a 2px radius circle it's basically rendered as a diamond because that's the closest you can get to a circle at that size. The first pixel of radius is used for the core of the circle, the second pixel used to give a little bit of rounding, but it's so small that it looks like a diamond.
Anti-aliasing needs some extra pixels to work with and such small shapes don't provide much. Unless you scale up your images, they won't get antialiased.
