Element Match Child Width And Height

I have a simple svg element which has children of elements: fiddle

document.getElementsByTagName('svg')[0].style.height = document.getElementsByTagName('g')[0].getBoundingClientRect().height + 'px';

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <g opacity="1" transform="translate(0,0) scale(3,3) rotate(0)">
        <g transform="translate(2.2775,3) scale(1,1) rotate(0)">
            <g transform="translate(0,0) scale(1,1) rotate(0)">
                <rect x="-1.2" y="-3.5999999999999996" width="5.430000000000001" height="7.469999999999999" fill="rgba(0,0,0,0)" stroke="none"></rect>
                <g transform="translate(0,0) scale(0.3,0.3) rotate(0)">
                    <path stroke="none" d="M8.05,-8L8.05,5.1Q8.05,6.3 8.4,6.95Q8.75,7.6 10.1,7.65L10.1,8.9L1.65,8.9L1.65,7.65Q3,7.6 3.35,6.95Q3.7,6.3 3.7,5.1L3.7,-3.35L3.65,-3.35L1,1L0,0.6L3.65,-8L8.05,-8"></path>
                </g>
            </g>
            <g transform="translate(4.029999999999999,0) scale(1,1) rotate(0)">
                <rect x="-1.2" y="-3.5999999999999996" width="6.48" height="7.6499999999999995" fill="rgba(0,0,0,0)" stroke="none"></rect>
                <g transform="translate(0,0) scale(0.3,0.3) rotate(0)">
                    <path stroke="none" d="M4.65,-4.65Q5.65,-4.25 5.8,-2.75Q5.75,-1.75 4.95,-1.1Q4.15,-0.4 3.15,-0.4Q0.7,-0.65 0.45,-3Q0.45,-4.95 2.05,-6.45Q3.65,-7.9 7.45,-8Q10.35,-7.9 11.8,-6.4Q13.3,-4.95 13.3,-3.05Q12.95,0.15 9.85,1.3Q6.8,2.4 4.55,3.95L4.55,4Q8.05,3.6 10.1,5.05L11.5,5.15Q12.25,4.85 12.35,3.15L13.6,3.15Q13.65,5.3 12.85,7.3Q12,9.35 9.45,9.5Q7.65,9.3 6.5,8.25Q5.35,7.1 3.8,6.8Q1.7,6.9 1.4,8.9L0.1,8.9Q-0.35,6.15 1.7,4.45Q3.75,2.75 5.85,1.65Q7.15,0.85 8.05,-0.4Q9,-1.7 9.05,-3.3Q8.95,-6.85 6.15,-6.6Q3.45,-6.55 3.55,-5.55Q3.7,-5 4.65,-4.65"></path>
                </g>
            </g>
        </g>
        <g transform="translate(4.3675,9) scale(1,1) rotate(0)">
            <g transform="translate(0,0) scale(1,1) rotate(0)">
                <rect x="-1.2" y="-3.5999999999999996" width="6.33" height="7.6499999999999995" fill="rgba(0,0,0,0)" stroke="none"></rect>
                <g transform="translate(0,0) scale(0.3,0.3) rotate(0)">
                    <path stroke="none" d="M6.55,-8Q8.45,-8.05 10.4,-7.2Q12.45,-6.4 12.6,-4.15Q12.35,-1.5 10.05,-0.15Q13.15,1.65 13.1,4Q13.05,6.1 11.1,7.75Q9.2,9.4 6.05,9.5Q3.85,9.5 2,8.35Q0.15,7.15 0,4.8Q0.05,3.4 1,2.35Q1.95,1.3 3.2,0.75Q0.55,-0.5 0.35,-3.45Q0.45,-5.8 2.45,-6.9Q4.45,-8 6.55,-8M8.35,-1.05Q9.85,-2.15 10.15,-4.05Q10.15,-5.55 8.8,-6.15Q7.5,-6.8 6.25,-6.75Q4.1,-6.85 3.55,-4.85Q3.75,-3.5 5.7,-2.3Q7.75,-1.1 8.35,-1.05M7.6,3.15L4.7,1.55Q2.8,2.65 2.5,4.75Q2.55,6.1 3.65,7.1Q4.7,8.05 6,8.1Q7.25,8.3 8.35,7.6Q9.4,6.9 9.5,5.55Q9.3,4.05 7.6,3.15"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Solution 2:

That's not really how SVGs are supposed to work. SVG is an image format. You normally specify the size of the "canvas" and then you draw things onto it.

It's a bit like saying "There is a cat in this JPEG, how do I set the JPEG to the size of the cat".

That being said, if you don't mind using some JS, Almis' solution will work most of the time.

But otherwise, there is no way to automatically set an SVG to the size of its contents.