First, to create them, I draw icons with vectors at the actual size the final icon will be rendered on regular non-retina displays, then export as SVG with Illustrator. But what I really want are the paths; fill and stroke colors and shading effects can be added manually.
Then, I open the SVG output in a text editor, and since it's all XHTML formatted, I can easily modify everything to get the look I want. I can re-organize the path and fill elements, change their fill colors, and add things like shadows right in the SVG file as filter elements, in case your editor makes sub-optimal choices as to how to encode your design.
These icons look perfect when rendered on both normal screens at 1x and retina displays at 2x resolution. If I needed an in-between size, I'd have to design a new vector for the new target size. One vector design will typically not work well for different rendered sizes at this small scale, as every pixel counts, and anti-aliasing does more harm than good. That problem is just unavoidable, even when you try to make a flattened PNG at all these in-between sizes.
I've also found SVG ideal for small bits of text with special non-web-safe fonts. Converting text to paths and exporting to SVG is the way to go over gif or png text, and looks great on retina displays.