Position SVG item relative to text - svg

Question

This is my code:
<?xml version="1.0">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
<text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text>
<g transform="translate(0,0) rotate(0)">
<rect x="0" y="0" width="10" height="10" fill="blue" />
</g>
</svg>
This gives me hello world and a rectangle. I would like to know how to position my rectangle relative to my text. I thought this would do the trick, but according to my code above the rectangle should sit on top of the text but it does not.
Edit: I tried this but it didn't change anything:
<?xml version="1.0">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
<g transform="translate(0,0) rotate(0)">
<rect x="0" y="0" width="10" height="10" fill="blue" />
</g>
<text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text>
</svg>

Answer 1

Is this close to what you want?
<svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
<rect x="0" y="0" width="100%" height="100%" fill="blue" />
<text id="t1" x="50%" y="50%" text-anchor="middle" dy="0.3em">Hello World</text>
</svg>
The correct value to use for dy, to get the text vertically centred, is font specific. You may have to tweak that value to match whichever font you choose. In my opinion, it is a more reliable alternative to other solutions like alignment-baseline etc.

Answer 2

Another Approach you can try! Maybe It will fit for you ...
p {
font-size: 42px;
}
p>svg {
width: 60px;
height: 60px;
display: inline-block;
position: relative;
top: 28px;
}
<div style="display:none">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 20 20" id="box">
<g transform="translate(0,0) rotate(0)">
<rect x="0" y="0" width="12" height="12" fill="blue" />
</g>
</symbol>
</svg>
</div>
<p>
<svg>
<use xlink:href="#box"></use>
</svg> Hello World
</p>