How to make a SVG container hug its contents?

Question

I am working on a project where some SVG tags are auto-generated based on the user provided input. For instance the most common scenario I have is that I may have many SVG objects (i.e. rect, ellipse, polygon, etc.) inside a <svg> container.

Now the issue is that my container SVG has a certain length and width regardless of its contents. I am trying to make my container SVG tag to only have so much length and width so that it can contain its content but no blank space.

For example: in this fiddle the SVG with id=svg1 is much larger than its contents need it to be.

How can i make the SVG container of appropriate size?

Note: I don't know which shapes are going to be put inside the SVG container and where they are going to be placed. Also, the SVG can contain another <svg> tag inside it and shapes can be inside this inner SVG.

Note 2: In some cases the width and height of the SVG container may be needed to be increased so as to not truncate the contents. Alos, it is imperative that i only use a pure HTML/CSS solution for certaion reasons.

Answer 1

Ok, if i understood it well, then you want your 'svg tag' of exact 'height' and 'width' in which its 'child' resides.

one possible solution would be:-

(assuming your svg is positioned at 0,0)

1. you need to track which element is drawn in your svg (i hope you are already doing this).
2. then you need to use 'getBbox()' to get its 'height' and 'width'
3. Now here you need to calculate the exact position of your 'child' element with respect to position (0,0).

lets take an example

var svgwidth=500;
var svgheight=500;

<svg id="svg1" width="500" height="500">
</svg>

now let say user draw a rectangle in it.

<rect id="rect1" x="0" y="0" height="200" width="300"></rect>

now we need to determine exact 'width' and 'height' for our 'svg'.

var rect1=document.getElementById('rect1');
var bbox=rect1.getBBox();

var widtharea=bbox.x+bbox.width;
var heightarea=bbox.y+bbox.height;

Now compare 'widtharea' with 'svgwidth', if its larger then 'svgwidth', update value of 'svgwidth'. similarly compare 'heightarea' with 'svgheight'

you need to perform above step every time user create any element in svg.