Nested SVG overlap programmatic challenge





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















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.










share|improve this question

























  • We really need a Minimal, Complete, and Verifiable example here.

    – Robert Longson
    Nov 25 '18 at 7:32











  • Thanks for your response. If I had an example, minimal or complete or verifiable or otherwise, I wouldn't have raised the question. I have no idea how to accomplish this, and hence I'm asking the community.

    – billmill
    Nov 25 '18 at 8:21











  • An example of the problem (two cut down example SVG files) and at least a picture of what the two images should look like when combined. You have that, no?

    – Robert Longson
    Nov 25 '18 at 8:24











  • I don't think that I do. As far as I can tell from a licensing perspective, I can't post these icons here. And no, I can't show what the pictures should look like when combined -- I am completely hopeless with visual tools. On the other hand I took great pains to describe the effect I am trying to achieve in my description of the problem.

    – billmill
    Nov 25 '18 at 8:27








  • 1





    I have done what I can. If my intent is still not clear, I'll just delete the question.

    – billmill
    Nov 25 '18 at 8:47


















0















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.










share|improve this question

























  • We really need a Minimal, Complete, and Verifiable example here.

    – Robert Longson
    Nov 25 '18 at 7:32











  • Thanks for your response. If I had an example, minimal or complete or verifiable or otherwise, I wouldn't have raised the question. I have no idea how to accomplish this, and hence I'm asking the community.

    – billmill
    Nov 25 '18 at 8:21











  • An example of the problem (two cut down example SVG files) and at least a picture of what the two images should look like when combined. You have that, no?

    – Robert Longson
    Nov 25 '18 at 8:24











  • I don't think that I do. As far as I can tell from a licensing perspective, I can't post these icons here. And no, I can't show what the pictures should look like when combined -- I am completely hopeless with visual tools. On the other hand I took great pains to describe the effect I am trying to achieve in my description of the problem.

    – billmill
    Nov 25 '18 at 8:27








  • 1





    I have done what I can. If my intent is still not clear, I'll just delete the question.

    – billmill
    Nov 25 '18 at 8:47














0












0








0








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.










share|improve this question
















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.







svg






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 25 '18 at 8:46







billmill

















asked Nov 25 '18 at 7:22









billmillbillmill

96110




96110













  • We really need a Minimal, Complete, and Verifiable example here.

    – Robert Longson
    Nov 25 '18 at 7:32











  • Thanks for your response. If I had an example, minimal or complete or verifiable or otherwise, I wouldn't have raised the question. I have no idea how to accomplish this, and hence I'm asking the community.

    – billmill
    Nov 25 '18 at 8:21











  • An example of the problem (two cut down example SVG files) and at least a picture of what the two images should look like when combined. You have that, no?

    – Robert Longson
    Nov 25 '18 at 8:24











  • I don't think that I do. As far as I can tell from a licensing perspective, I can't post these icons here. And no, I can't show what the pictures should look like when combined -- I am completely hopeless with visual tools. On the other hand I took great pains to describe the effect I am trying to achieve in my description of the problem.

    – billmill
    Nov 25 '18 at 8:27








  • 1





    I have done what I can. If my intent is still not clear, I'll just delete the question.

    – billmill
    Nov 25 '18 at 8:47



















  • We really need a Minimal, Complete, and Verifiable example here.

    – Robert Longson
    Nov 25 '18 at 7:32











  • Thanks for your response. If I had an example, minimal or complete or verifiable or otherwise, I wouldn't have raised the question. I have no idea how to accomplish this, and hence I'm asking the community.

    – billmill
    Nov 25 '18 at 8:21











  • An example of the problem (two cut down example SVG files) and at least a picture of what the two images should look like when combined. You have that, no?

    – Robert Longson
    Nov 25 '18 at 8:24











  • I don't think that I do. As far as I can tell from a licensing perspective, I can't post these icons here. And no, I can't show what the pictures should look like when combined -- I am completely hopeless with visual tools. On the other hand I took great pains to describe the effect I am trying to achieve in my description of the problem.

    – billmill
    Nov 25 '18 at 8:27








  • 1





    I have done what I can. If my intent is still not clear, I'll just delete the question.

    – billmill
    Nov 25 '18 at 8:47

















We really need a Minimal, Complete, and Verifiable example here.

– Robert Longson
Nov 25 '18 at 7:32





We really need a Minimal, Complete, and Verifiable example here.

– Robert Longson
Nov 25 '18 at 7:32













Thanks for your response. If I had an example, minimal or complete or verifiable or otherwise, I wouldn't have raised the question. I have no idea how to accomplish this, and hence I'm asking the community.

– billmill
Nov 25 '18 at 8:21





Thanks for your response. If I had an example, minimal or complete or verifiable or otherwise, I wouldn't have raised the question. I have no idea how to accomplish this, and hence I'm asking the community.

– billmill
Nov 25 '18 at 8:21













An example of the problem (two cut down example SVG files) and at least a picture of what the two images should look like when combined. You have that, no?

– Robert Longson
Nov 25 '18 at 8:24





An example of the problem (two cut down example SVG files) and at least a picture of what the two images should look like when combined. You have that, no?

– Robert Longson
Nov 25 '18 at 8:24













I don't think that I do. As far as I can tell from a licensing perspective, I can't post these icons here. And no, I can't show what the pictures should look like when combined -- I am completely hopeless with visual tools. On the other hand I took great pains to describe the effect I am trying to achieve in my description of the problem.

– billmill
Nov 25 '18 at 8:27







I don't think that I do. As far as I can tell from a licensing perspective, I can't post these icons here. And no, I can't show what the pictures should look like when combined -- I am completely hopeless with visual tools. On the other hand I took great pains to describe the effect I am trying to achieve in my description of the problem.

– billmill
Nov 25 '18 at 8:27






1




1





I have done what I can. If my intent is still not clear, I'll just delete the question.

– billmill
Nov 25 '18 at 8:47





I have done what I can. If my intent is still not clear, I'll just delete the question.

– billmill
Nov 25 '18 at 8:47












1 Answer
1






active

oldest

votes


















1














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>








share|improve this answer





















  • 1





    Thank you for your response. This gets me closer but with some tweaking (for example, I need to use the original svg whole and entire, and also you didn't reference #A) the solution still isn't quite there. My "minimal verifiable etc" example isn't quite capturing what's happening when I put my full icons in place; the "B" icon I picked at random is getting chopped off. I can solve that by making my symbol B viewBox arbitrarily large (but not too large). I just can't quite figure out programmatically how to tell exactly how large. I'll amend my question to reflect this.

    – billmill
    Nov 25 '18 at 19:09











  • Y hope you have now a starting point and you'll be able to ask a better question

    – enxaneta
    Nov 25 '18 at 19:13











  • I believe I do, thanks to you! New question coming shortly.

    – billmill
    Nov 25 '18 at 19:25












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465479%2fnested-svg-overlap-programmatic-challenge%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














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>








share|improve this answer





















  • 1





    Thank you for your response. This gets me closer but with some tweaking (for example, I need to use the original svg whole and entire, and also you didn't reference #A) the solution still isn't quite there. My "minimal verifiable etc" example isn't quite capturing what's happening when I put my full icons in place; the "B" icon I picked at random is getting chopped off. I can solve that by making my symbol B viewBox arbitrarily large (but not too large). I just can't quite figure out programmatically how to tell exactly how large. I'll amend my question to reflect this.

    – billmill
    Nov 25 '18 at 19:09











  • Y hope you have now a starting point and you'll be able to ask a better question

    – enxaneta
    Nov 25 '18 at 19:13











  • I believe I do, thanks to you! New question coming shortly.

    – billmill
    Nov 25 '18 at 19:25
















1














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>








share|improve this answer





















  • 1





    Thank you for your response. This gets me closer but with some tweaking (for example, I need to use the original svg whole and entire, and also you didn't reference #A) the solution still isn't quite there. My "minimal verifiable etc" example isn't quite capturing what's happening when I put my full icons in place; the "B" icon I picked at random is getting chopped off. I can solve that by making my symbol B viewBox arbitrarily large (but not too large). I just can't quite figure out programmatically how to tell exactly how large. I'll amend my question to reflect this.

    – billmill
    Nov 25 '18 at 19:09











  • Y hope you have now a starting point and you'll be able to ask a better question

    – enxaneta
    Nov 25 '18 at 19:13











  • I believe I do, thanks to you! New question coming shortly.

    – billmill
    Nov 25 '18 at 19:25














1












1








1







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>








share|improve this answer















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>








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>





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>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 25 '18 at 10:22

























answered Nov 25 '18 at 10:15









enxanetaenxaneta

10.6k2821




10.6k2821








  • 1





    Thank you for your response. This gets me closer but with some tweaking (for example, I need to use the original svg whole and entire, and also you didn't reference #A) the solution still isn't quite there. My "minimal verifiable etc" example isn't quite capturing what's happening when I put my full icons in place; the "B" icon I picked at random is getting chopped off. I can solve that by making my symbol B viewBox arbitrarily large (but not too large). I just can't quite figure out programmatically how to tell exactly how large. I'll amend my question to reflect this.

    – billmill
    Nov 25 '18 at 19:09











  • Y hope you have now a starting point and you'll be able to ask a better question

    – enxaneta
    Nov 25 '18 at 19:13











  • I believe I do, thanks to you! New question coming shortly.

    – billmill
    Nov 25 '18 at 19:25














  • 1





    Thank you for your response. This gets me closer but with some tweaking (for example, I need to use the original svg whole and entire, and also you didn't reference #A) the solution still isn't quite there. My "minimal verifiable etc" example isn't quite capturing what's happening when I put my full icons in place; the "B" icon I picked at random is getting chopped off. I can solve that by making my symbol B viewBox arbitrarily large (but not too large). I just can't quite figure out programmatically how to tell exactly how large. I'll amend my question to reflect this.

    – billmill
    Nov 25 '18 at 19:09











  • Y hope you have now a starting point and you'll be able to ask a better question

    – enxaneta
    Nov 25 '18 at 19:13











  • I believe I do, thanks to you! New question coming shortly.

    – billmill
    Nov 25 '18 at 19:25








1




1





Thank you for your response. This gets me closer but with some tweaking (for example, I need to use the original svg whole and entire, and also you didn't reference #A) the solution still isn't quite there. My "minimal verifiable etc" example isn't quite capturing what's happening when I put my full icons in place; the "B" icon I picked at random is getting chopped off. I can solve that by making my symbol B viewBox arbitrarily large (but not too large). I just can't quite figure out programmatically how to tell exactly how large. I'll amend my question to reflect this.

– billmill
Nov 25 '18 at 19:09





Thank you for your response. This gets me closer but with some tweaking (for example, I need to use the original svg whole and entire, and also you didn't reference #A) the solution still isn't quite there. My "minimal verifiable etc" example isn't quite capturing what's happening when I put my full icons in place; the "B" icon I picked at random is getting chopped off. I can solve that by making my symbol B viewBox arbitrarily large (but not too large). I just can't quite figure out programmatically how to tell exactly how large. I'll amend my question to reflect this.

– billmill
Nov 25 '18 at 19:09













Y hope you have now a starting point and you'll be able to ask a better question

– enxaneta
Nov 25 '18 at 19:13





Y hope you have now a starting point and you'll be able to ask a better question

– enxaneta
Nov 25 '18 at 19:13













I believe I do, thanks to you! New question coming shortly.

– billmill
Nov 25 '18 at 19:25





I believe I do, thanks to you! New question coming shortly.

– billmill
Nov 25 '18 at 19:25




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465479%2fnested-svg-overlap-programmatic-challenge%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()