How to make several SVG's that are stacked ontop of eachother; responsive to their parent div's height/width?

Question

I have 3 shapes via SVG that I converted to html.

Currently I have these 3 shapes stacked together sharing a parent div, resulting in a diamond(ish) type shape.

I am having trouble re-sizing these elements. I would like them to resize all together as one "unit" if that makes sense.

Any help always appreciated!

body{
	background:#E5E5E5
	}

.diamond{
	margin:50px;
	width:auto;
	height:auto;
	background:blue;
	position:absolute;
	}

.Octagon, .Star8, .Star8_2{
	position:absolute;
	float:left;
	}
.Octagon{
	height:401px;
	width:401px;
	}
.Star8{
	height:399px;
	width:399px;
	margin:1px;
	}
.Star8_2{
	height:282px;
	width:282px;
	margin:59px;
	}
	
svg path{
	stroke:#777;
	stroke-width:3px;
	fill:transparent;
	}
svg{
	height:100%;
	width:100%;
	}
	
	

<div class="diamond">

<div class="Star8_2">
<svg>
<path d="M58.8,60.1C67.6,40.5,75.5,20.4,83.9,0.6C103.7,8.9,123.5,17.1,143.3,25.4C162.7,17.6,182,9.5,201.3,1.6C209.3,20.9,217.1,40.3,
225.2,59.5C244.2,67.5,263.2,75.4,282.2,83.3C274.3,102.3,266.3,121.3,258.4,140.4C266.7,160.5,274.9,180.6,283.2,200.7C263.8,208.6,244.5,216.6,225.1,224.5C224,225,222.7,
225.3,222.3,226.6C214.6,244.9,207,263.2,199.4,281.5C181.2,273.9,163.1,266.3,144.9,258.8C143.7,258.2,142.6,258.3,141.5,258.9C122.3,266.8,103.2,274.7,84,282.5C76.3,263.9,
68.7,245.3,61,226.6C60.3,225.1,60,223.1,58.1,222.6C39.1,214.7,20.1,206.7,1.1,198.8C9,180,16.9,161.1,24.7,142.3C25.3,141.2,25.4,140,24.8,138.9C17.2,120.4,9.6,102,2.1,
83.5C21,75.6,40,68,58.8,60.1L58.8,60.1" transform="matrix(1,0,0,1,-1.1,-0.6)"></path>
</svg>
</div>

<div class="Star8">
<svg>
<path d="M141.6,58C160.8,38.6,180.2,19.4,199.5,0C218.6,19.1,237.7,38.1,256.7,57.2C257.7,58.5,259.5,57.8,260.9,58C287.2,58,313.6,58,
339.9,58C339.9,85.5,339.9,113,339.9,140.6C359.6,160.2,379.2,179.9,398.9,199.5C379.2,219.1,359.6,238.8,339.9,258.4C339.8,285.6,339.9,312.8,339.9,340C312.7,340,285.5,
339.9,258.3,340C238.7,359.7,219,379.3,199.4,399C179.8,379.4,160.1,359.8,140.5,340C113,339.9,85.4,340,57.9,340C57.9,312.5,58,284.9,57.9,257.4C38.5,238.2,19.3,218.8,
-0.1,199.5C19.2,180.2,38.5,160.8,57.9,141.5C57.9,113.6,57.9,85.8,57.9,57.9C85.9,58,113.7,58,141.6,58L141.6,58" transform="matrix(1,0,0,1,0.1,0)"><br>
</path>
</svg>
</div>

<div class="Octagon">
<svg>
<path d="M59.6,60.6C106.7,41.1,153.9,21.5,201,2C248.1,21.5,295.3,41,342.4,60.6C361.9,107.7,381.4,154.9,401,202C381.5,249.2,
361.9,296.3,342.4,343.5C295.3,363,248.1,382.5,201,402.1C153.9,382.6,106.7,363.1,59.6,343.5C40.1,296.3,20.5,249.1,1,202C20.5,154.9,40.1,107.7,59.6,
60.6L59.6,60.6" transform="matrix(1,0,0,1,-1,-2)"></path>
</svg>
</div>

</div>

Answer 1

Just give your SVGs appropriate viewBox attributes that will ensure they line up when rendered at the same size.

You can then set the size of the "diamond" div to anything you want and the SVGs will all scale in unison.

body {
    background: #E5E5E5
}

.diamond {
    margin: 50px;
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;
}

.Octagon, .Star8, .Star8_2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
    	
svg path {
    stroke: #777;
    stroke-width: 3px;
    fill: transparent;
}

svg {
    height:100%;
    width:100%;
}

<div class="diamond">

<div class="Star8_2">
<svg viewBox="-59 -59 401 401">
<path d="M58.8,60.1C67.6,40.5,75.5,20.4,83.9,0.6C103.7,8.9,123.5,17.1,143.3,25.4C162.7,17.6,182,9.5,201.3,1.6C209.3,20.9,217.1,40.3,
225.2,59.5C244.2,67.5,263.2,75.4,282.2,83.3C274.3,102.3,266.3,121.3,258.4,140.4C266.7,160.5,274.9,180.6,283.2,200.7C263.8,208.6,244.5,216.6,225.1,224.5C224,225,222.7,
225.3,222.3,226.6C214.6,244.9,207,263.2,199.4,281.5C181.2,273.9,163.1,266.3,144.9,258.8C143.7,258.2,142.6,258.3,141.5,258.9C122.3,266.8,103.2,274.7,84,282.5C76.3,263.9,
68.7,245.3,61,226.6C60.3,225.1,60,223.1,58.1,222.6C39.1,214.7,20.1,206.7,1.1,198.8C9,180,16.9,161.1,24.7,142.3C25.3,141.2,25.4,140,24.8,138.9C17.2,120.4,9.6,102,2.1,
83.5C21,75.6,40,68,58.8,60.1L58.8,60.1" transform="matrix(1,0,0,1,-1.1,-0.6)"></path>
</svg>
</div>

<div class="Star8">
<svg viewBox="-1 -1 401 401">
<path d="M141.6,58C160.8,38.6,180.2,19.4,199.5,0C218.6,19.1,237.7,38.1,256.7,57.2C257.7,58.5,259.5,57.8,260.9,58C287.2,58,313.6,58,
339.9,58C339.9,85.5,339.9,113,339.9,140.6C359.6,160.2,379.2,179.9,398.9,199.5C379.2,219.1,359.6,238.8,339.9,258.4C339.8,285.6,339.9,312.8,339.9,340C312.7,340,285.5,
339.9,258.3,340C238.7,359.7,219,379.3,199.4,399C179.8,379.4,160.1,359.8,140.5,340C113,339.9,85.4,340,57.9,340C57.9,312.5,58,284.9,57.9,257.4C38.5,238.2,19.3,218.8,
-0.1,199.5C19.2,180.2,38.5,160.8,57.9,141.5C57.9,113.6,57.9,85.8,57.9,57.9C85.9,58,113.7,58,141.6,58L141.6,58" transform="matrix(1,0,0,1,0.1,0)"><br>
</path>
</svg>
</div>

<div class="Octagon">
<svg viewBox="0 0 401 401">
<path d="M59.6,60.6C106.7,41.1,153.9,21.5,201,2C248.1,21.5,295.3,41,342.4,60.6C361.9,107.7,381.4,154.9,401,202C381.5,249.2,
361.9,296.3,342.4,343.5C295.3,363,248.1,382.5,201,402.1C153.9,382.6,106.7,363.1,59.6,343.5C40.1,296.3,20.5,249.1,1,202C20.5,154.9,40.1,107.7,59.6,
60.6L59.6,60.6" transform="matrix(1,0,0,1,-1,-2)"></path>
</svg>
</div>

</div>

Answer 2

I did this a long time ago using jQuery. You should use jQuery's ".resize()" event which will be triggered whenever the Selected element is resized. It will look like this..

$(".someElement").resize(function(){
   // your code
});

Inside this function, you can update the coordinates yourself according to the width of ".someElement" which you can get using..

$(".someElement").width();