Tukukkk

I have a challenge before me and unfortunately I tend to suck at visual things. I need to take two separate SVG images, from a pool of such images from two separate vendors, each possibly with their own coordinate systems, and combine them in the following way. I have some things I can count on:

1. Each image from both vendors is square.


2. Vendor A's images are monochrome.


3. All images render nicely in a browser.


4. I've paid for licenses to both sets of images and per the terms I don't need to worry about attribution.


5. I can access the source to all SVG files.


6. I can manipulate the files more or less however I want to using groovy, if I can figure out the magic pattern.

I need to apply the following rules in my little self-imposed process:

1. Lay down an outline SVG frame that expects to render in a space 48 x 48.


2. Insert the chosen SVG image from the Vendor A set.


3. Apply a uniform color change to a chosen preselected color on that image.


4. Insert the chosen image from the Vendor B, and scale and position it such that it occupies the lower left quadrant. It should lay on top of the underlying Vendor A image. Its colors will remain untouched.


5. The whole thing should be renderable in J. Random Modern Browser.

So far I can't really seem to figure out the right pattern of nested SVGs, and most online tutorials give examples that don't even render in any of the free online svg editors. I'm stuck and unsure how even to begin. Ordinarily I'd put some sample code in one of these questions, but at the moment none of them seem to come even close to working.

Vendor A icons look something like this:

<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">

<g>

    <g transform="translate(50 50) scale(0.69 0.69) rotate(0) translate(-50 -50)" style="fill:#0059B3">

        <svg fill="#0059B3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">

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

        </svg>

    </g>

</g>

</svg>

Vendor B icons look something like this:

<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(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

</svg>

I need to combine the two such that the second one sits on top of the LOWER LEFT quadrant of the first. And the first needs to have a color change applied without altering the inner svg text, if that's possible. It's beyond my abilities in Microsoft Paint to show that but I hope that's clear.

As I've told you in my comment you need to transform your SVG in <symbol> elements and you <use> those <symbol>s. When you are using a <symbol> that has a viewBox attribute you can resize and reposition the shapes inside with the width, height, x and y attributes of the <use> element. In order to be able to change colors you move the styles in the <use> elements. Also you may opt for presentational attributes instead of css.

svg{border:1px solid; width:90vh}

<svg viewBox="0 0 100 100">



<defs>     

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

<g>

    <g transform="translate(50 50) scale(0.69 0.69) rotate(0) translate(-50 -50)" >

        <svg viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">

            <rect width="100" height="100"  />

        </svg>

    </g>

</g>

</symbol>



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

    <rect width="100" height="100"  />

</symbol>

</defs> 



  <use xlink:href="#B" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" x="5" y="5" width="90" height="90"/>

  <use  width="40" height="40" x="50" y="50" xlink:href="#B" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>

  

</svg>