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?

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • 1
    sounds like you could do that with some CSS – Starscream1984 Sep 08 '15 at 08: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 Sep 08 '15 at 08:35
  • 1
    What do you mean by "save it"? Do you want to create a third SVG from the other two? – SPRBRN Sep 08 '15 at 08: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 Sep 08 '15 at 08:38

2 Answers2

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>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 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: http://jsfiddle.net/8H24D/ – Noitidart Sep 08 '15 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 `` or ` – Kaiido Sep 09 '15 at 00: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](http://stackoverflow.com/a/29579084/3702797) in the PPS. – Kaiido Sep 09 '15 at 08:22
  • 1
    So here is a new version of the plunker with a download link : http://plnkr.co/edit/5tdYVrjUk3Ti4gSUVAqF?p=preview – Kaiido Sep 09 '15 at 08: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 Sep 09 '15 at 08: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

Community
  • 1
  • 1
Wylie Kulik
  • 696
  • 5
  • 17
  • 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 Sep 08 '15 at 20:34
  • maybe better: http://stackoverflow.com/questions/23582101/generating-viewing-and-saving-svg-client-side-in-browser?rq=1 – Wylie Kulik Sep 09 '15 at 00: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 Sep 09 '15 at 01:01