4

Is it possible to load two SVGs with JavaScript? For example, then use the first SVG as the base and the second SVG as a badge in the corner and then scale the combination as one and save as a single SVG?

Improve this question
4
  • 1
    sounds like you could do that with some CSS
    – Starscream1984
    Commented Sep 8, 2015 at 8:10
  • Thanks @Starscream1984 can you please demonstrate a little bit I'm use to doing stuff in Illustrator and that I could do it with my favorite programming language is mind blowing. I didn't realize it.
    – Noitidart
    Commented Sep 8, 2015 at 8:35
  • 1
    What do you mean by "save it"? Do you want to create a third SVG from the other two?
    – SPRBRN
    Commented Sep 8, 2015 at 8:36
  • Thanks @SPRBRN yep I want to take the base, scale it to say 128x128, then take the badge and scale it to 1/3 of that and place it in the corner, then save that as a single SVG to file.
    – Noitidart
    Commented Sep 8, 2015 at 8:38

2 Answers 2

Reset to default
2

Yes, you can append an <svg> element into an svgDocument : 

var svgDocs = document.querySelectorAll('svg');
svgDocs[0].appendChild(svgDocs[1]);
svgDocs[1].width.baseVal.value/=3;
svgDocs[1].height.baseVal.value/=3;
svg{ border:1px solid}
<svg version ="1.1" id="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
  <circle cx="60" cy="60" r="50" fill="pink"/>
</svg>

<svg version ="1.1" id="second" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
  <rect x="10" y="10" width="100" height="100" fill="green"/>
</svg>

Improve this answer
5
  • Thanks very much @kaiido can you please demonstrate using external svg files, like say one is at path "blah.svg" and another at "badge.svg". Is it possible to do some FileReader stuff here? Or to create a URL.createObjectURL out of this? such as this jsfiddle: jsfiddle.net/8H24D
    – Noitidart
    Commented Sep 8, 2015 at 20:33
  • Sure, you could also with a FileReader, but if you've got urls, then xhr would be a better option... But anyway, the easiest way is to use <object> or <iframe> : plnkr.co/edit/RW6feFndSG5Ud9OD77HG?p=preview
    – Kaiido
    Commented Sep 9, 2015 at 0:57
  • 1
    @Noitidart I think I didn't quite got the save as new svg requirement, but now, looking at your fiddle, I'm wondering : you know that the svg file content is actually almost the same as the svgElement.outerHTML ? so (new XMLSerializer()).serializeToString(svgDoc), will return a serialized version that you can save as an svg file, but you may need some further operations if you need to create a fully valid SVG file (with the doctype and everything) and you can find it here in the PPS.
    – Kaiido
    Commented Sep 9, 2015 at 8:22
  • 1
    So here is a new version of the plunker with a download link : plnkr.co/edit/5tdYVrjUk3Ti4gSUVAqF?p=preview
    – Kaiido
    Commented Sep 9, 2015 at 8:35
  • Wow thank you so much I'm going to research tright now Im in the middle of some other code but will visit, thank you so much man!
    – Noitidart
    Commented Sep 9, 2015 at 8:46
1

stepwise:

0: Load your resources with: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

1: Use transforms to scale, translate, as needed: https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform

2: To convert the final composite SVG element to file use/modify https://github.com/NYTimes/svg-crowbar, which I found from this Convert JavaScript-generated SVG to a file or better discussion: Generating, viewing, and saving SVG client-side in browser

disclaimer: I haven't tested this approach, so can't guarantee it, but I've done a lot of work programmatically with SVGs in the last few months, and I think it will work.

my work:(needs refactor but linked in case it could help understanding the HTML SVG API): https://github.com/Terebinth/Vickers/blob/master/lib/minesweeper/minesweeper_001_.coffee

Improve this answer
3
  • Thanks you Wylie for the crowbar thing that is really very cool! :) I was wondering if you know of a Firefox version of it?
    – Noitidart
    Commented Sep 8, 2015 at 20:34
  • maybe better: stackoverflow.com/questions/23582101/…
    – Wylie Kulik
    Commented Sep 9, 2015 at 0:39
  • 1
    Blob is not needed in this case, a simple var url ='data:image/svg+xml; charset=utf8, '+(new XMLSerializer()).serializeToString(svgDoc) should do the trick just well.
    – Kaiido
    Commented Sep 9, 2015 at 1:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.