Je suis sûr que les réponses sur le positionnement absolu sont correctes. Par souci d'expérience, j'ai essayé de créer une solution SVG uniquement. Le résultat est loin d'être idéal, peut-être que quelqu'un connaît une solution plus élégante à un puzzle svg similaire? :)
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>