How to keep aspect ratio of internal elements of SVG, allowing you to scale SVG yourself?

I am very new to SVG, so I apologize if this is an obvious question. I did a little work and it seems to hit the wall.

I am trying to create an SVG element in an HTML document that:

• has a solid border on the external viewport
• maintains aspect ratio of internal elements.
• does not preserve aspect ratio of external SVG element
• may arbitrarily vary in size while maintaining these contraindications

This JSFiddle illustrates what I mean and what I tried:

http://jsfiddle.net/a8q6S/

And here is the same code, as I cannot post this otherwise:

<div>
     <h2>correct placement and aspect ratio, but cannot be resized without losing relative placement</h2>

    <svg viewBox="0 0 100 100" style="width: 100px; height: 100px; border: 1px solid red;">
        <circle cx="0" cy="0" r="10"></circle>
        <circle cx="50" cy="50" r="10"></circle>
        <circle cx="100" cy="100" r="10"></circle>
    </svg>
</div>
<div>
     <h2>correct aspect ratio of circle, incorrect relative placement</h2>

    <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin" style="width: 200px; height: 100px; border: 1px solid red;">
        <circle cx="0" cy="0" r="10"></circle>
        <circle cx="50%" cy="50%" r="10"></circle>
        <circle cx="100%" cy="100%" r="10"></circle>
    </svg>
</div>
<div>
     <h2>correct relative placement, can be resized, but loses internal aspect ratio</h2>

    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width: 200px; height: 100px; border: 1px solid red;">
        <circle cx="0" cy="0" r="10"></circle>
        <circle cx="50" cy="50" r="10"></circle>
        <circle cx="100" cy="100" r="10"></circle>
    </svg>
</div>

Is it possible? Am I going about it wrong?