Sono sicuro che le risposte sul posizionamento assoluto siano corrette. Per motivi di sperimentazione, ho provato a creare una soluzione solo SVG. Il risultato è tutt'altro che ideale, forse qualcuno conosce una soluzione più elegante per un puzzle svg simile? :)
http://jsfiddle.net/gLdsco5p/3/
<svg width="64" height="64" viewBox="0 0 91 91">
<rect id="Artboard1" x="0" y="0" width="90.326" height="90.326" style="fill:none;"/>
<g id="Artboard11" serif:id="Artboard1">
<g id="user-circle-o" transform="matrix(2.69327,0,0,2.69327,7.45723,7.45723)">
<path d="M14,0C21.734,0 28,6.266 28,14C28,21.688 21.766,28 14,28C6.25,28 0,21.703 0,14C0,6.266 6.266,0 14,0ZM23.672,21.109C25.125,19.109 26,16.656 26,14C26,7.391 20.609,2 14,2C7.391,2 2,7.391 2,14C2,16.656 2.875,19.109 4.328,21.109C4.89,18.312 6.25,16 9.109,16C10.375,17.234 12.093,18 14,18C15.907,18 17.625,17.234 18.891,16C21.75,16 23.11,18.312 23.672,21.109ZM20,11C20,7.687 17.312,5 14,5C10.688,5 8,7.688 8,11C8,14.312 10.688,17 14,17C17.312,17 20,14.312 20,11Z" style="fill:rgb(190,190,190);fill-rule:nonzero;"/>
</g>
<g transform="matrix(1,0,0,1,1.36156,0)">
<circle cx="63.708" cy="18.994" r="9.549" style="fill:rgb(255,0,0);"/>
</g>
<g transform="matrix(1.66713,0,0,1.66713,-51.5278,-2.33264)">
<text id="counter" x="68.034px" y="15.637px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:7.915px;fill:white;">1</text>
</g>
</g>
</svg>