Is possible center <g> in <svg>? - svg

Question

I searched on the web and I do not found a solution for my problem, is possible to do that, center my element depending of size of my parent content.
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke="#333">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>

Answer 1

I would put the loader in a symbol. Also I would give the loader and the svg element a viewBox attribute.
svg{border:1px solid;}
<svg width="100%" viewBox="-250 -50 500 100" xmlns="http://www.w3.org/2000/svg" stroke="#333">
<symbol id="the_symbol" viewBox="-2 -2 40 40">
<g stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18A18,18 0 0 0 0,18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</symbol>
<use xlink:href="#the_symbol" x="-20" y="-20" width="36" height="36" fill="none" />
</svg>
UPDATE
The OP is commenting that they want the root svg to take various sizes, while the loader has to be always the same size.
//the size and position of the symbol
let o = {x:36,y:18}
function init(){
let p = getsize(o);
//reset the size and position of the use element
theUse.setAttributeNS(null,"width",p.x)
theUse.setAttributeNS(null,"height",p.x)
theUse.setAttributeNS(null,"x",250-p.y)
theUse.setAttributeNS(null,"y",50-p.y)
}
// a function to calculate the size and position of the use element
function getsize(o){
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
}
setTimeout(function() {
init();
addEventListener('resize', init, false);
}, 15);
svg{border:1px solid;}
symbol{overflow:visible}
<svg id="svg" width="100%" height="100%" viewBox="0 0 500 100" xmlns="http://www.w3.org/2000/svg" stroke="#333">
<symbol id="the_symbol" viewBox="0 0 36 36">
<g stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18A18,18 0 0 0 0,18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</symbol>
<use id="theUse" xlink:href="#the_symbol" fill="none" />
</svg>