How to convert SVG to PNG while still preserving the layers?

Question

I have an SVG image that looks like this:

This is an excerpt of that SVG file:

...

I am wondering if there is a known solution how to convert this SVG into an SVG that solely consist of PNG Base64 strings where the objects in each layer and the layers themselves are preserved. Therefore, as opposed to the current SVG file that only contain and tags, I want to convert this SVG into an SVG file that only contain tags where the image data is contained in the xlink:href property, like this:

yes.


My currently best guess is to load the layers one by one on a Javascript canvas and convert them one by one to a PNG and then replace the tag entirely with the generated image string.

user_2520800 · Answer

Like many in the comments, I am also interested in the use-case for this, I can't see any benefit.

And your:

Just kind of difficult to deal with all the special cases
on how attributes in an SVG can be defined,
a lot of parsing.

makes me even more curious at why, how and what you are doing.

Only parsing should be done by the browser.
Program flow shouldn't be more than:

repeat for all SVG layers
- clone original SVG
  - https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
- remove layers you don't want
  - https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
- convert cloned SVG to binary image using Canvas
loop all cloned images
- replace original layer in SVG with

You still haven't answered all questions Why you want a binary.

If you want an SVG tag (for some reason)

You could also dataURI the layered SVG with:

function svg2img(){
    let svg = document.querySelector('svg');
    let xml = new XMLSerializer().serializeToString(svg);
    let svg64 = btoa(xml); //for utf8: btoa(unescape(encodeURIComponent(xml)))
    return 'data:image/svg+xml;base64,' + svg64;
};

Disclaimer: I copied the code snippet from a blog; didn't test the code

How to convert SVG to PNG while still preserving the layers?

1 Answers