Btukfyl

My challenge is to take two random svg icons and splice them together such that the inner one is located on the lower left quadrant of the overall image. Thanks to a previous answer I have a framework for doing this but the inner icon is getting truncated unless I make manual changes. I need to do this programmatically, so the question becomes, how do I know how large to make my B viewport, algorithmically speaking?

If this is Icon A:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">

    <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)"

</svg>

This is a minimal but fairly accurate example of an Icon B:

<svg height="512pt" viewBox="-51 0 512 512.00253" width="512pt" xmlns="http://www.w3.org/2000/svg">

    <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />

</svg>

This is the framework for putting them together:

<svg viewBox="0 0 100 100">



<defs>

<symbol id="A" viewBox="0 0 100 100"> <!-- making viewbox of symbol A

                                           match viewbox on contained

                                           svg element, which works -->



%ENTIRE CONTENTS OF SVG A%



</symbol>



<symbol id="B" viewBox="51 0 512 512"> <!-- making viewbox of symbol B

                                           match viewbox on contained

                                           svg element, which truncates -->



%ENTIRE CONTENTS OF SVG B%



</symbol>

</defs> 



  <use xlink:href="#A" x="0" y="0" width="100" height="100" />

  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />



</svg>

This is the current svg:

<svg viewBox="0 0 100 100">



<defs>

<symbol id="A" viewBox="0 0 100 100">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">

  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)"

  </svg>



</symbol>



<symbol  id="B" viewBox="51 0 512 512">

<svg height="512pt" viewBox="-51 0 512 512.00253" width="512pt" xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />

  </svg>



</symbol>

</defs> 



  <use xlink:href="#A" x="0" y="0" width="100" height="100" />

  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />



</svg>

Here's what that looks like. Note the truncation; that inner icon is getting chomped on the right and bottom.

I can manually tweak it like this, with the results below. But I can't do manual tweaking on these.

<svg viewBox="0 0 100 100">



<defs>

<symbol id="A" viewBox="0 0 100 100">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">

  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)"

  </svg>



</symbol>



<!-- Note this pair of 680 values, and the 0 x-pos on the line below -->

<symbol  id="B" viewBox="0 0 680 680">

<svg height="512pt" viewBox="0 0 512 512.00253" width="512pt" xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />

  </svg>



</symbol>

</defs> 



  <use xlink:href="#A" x="0" y="0" width="100" height="100" />

  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />



</svg>

Note the tweaked "680" h/w on the symbol B viewbox. (And also tweaking the viewbox on the inner svg to shift the X position to 0, which I'm really unhappy doing). That "680" number was determined experimentally, which would be fine only if this was a one-time deal and not something I need to make systematic. How do I know how big to make that viewbox programmatically?

Remove the width and the height attributes from the inner SVG

svg{width:90vh}

<svg viewBox="0 0 100 100">



<defs>

<symbol id="A" viewBox="0 0 100 100">

<svg viewBox="0 0 100 100">

  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)" />

  </svg>



</symbol>



<symbol  id="B" viewBox="0 0 512 512">

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />

  </svg>



</symbol>

</defs> 



  <use xlink:href="#A" x="0" y="0" width="100" height="100" />

  <use xlink:href="#B" x="0" y="50" width="50" height="50" />



</svg>

UPDATE

The OP comments that they can't remove the width and the height attributes from the inner SVG. In this case I need to add a few lines of JavaScript. First I need to get the size of the second SVG canvas in px.

const pt = 96/72;

let size = 512 * pt;

Also I need to know the stroke width

let strokeWidth = 30 * pt; 

Next I need to reset the value for the viewBox attribute for the `#B``

const pt = 96/72;

let size = 512 * pt;

let strokeWidth = 30 * pt;

B.setAttributeNS(null,"viewBox", `-${strokeWidth/2} -${strokeWidth/2} ${size+strokeWidth} ${size+strokeWidth}`)

<svg viewBox="0 0 100 100">



<defs>

<symbol id="A" viewBox="0 0 100 100">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">

  <rect width="100%" height="100%" style="fill:rgb(255,0,0);stroke-width:3; stroke:rgb(0,0,0)" />

  </svg>



</symbol>



<symbol  id="B" viewBox="0 0 512 512">

<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:30; stroke:rgb(0,0,0)" />

  </svg>



</symbol>

</defs> 



  <use xlink:href="#A" x="0" y="0" width="100" height="100" />

  <use xlink:href="#B" x="0" y="50" width="50%" height="50%" />



</svg>