create SVG in memory without displaying it

[kimgerdes]

trafficstars

Hello, I am trying to use Snap to precompute a series of SVGs, that are shown on demand. is that possible? My function creates the SVG with s=Snap(600, 800) and returns s This allows to paste s anywhere but it is already created on the bottom of the page without any id associated. We would just like to get the SVG in the variable. Thanks for any pointers to what I could do.

[kirianguiller]

I am also interested in knowing if this can be done. Thanks !

[ibrierley]

Not entirely sure what you are after, but you could make it invisible, or off screen, or create a fragment and append as needed.

[matelich]

I had a need at one point to take an SVG, clone it, modify it, and display as an Image. remove was the key to keep it off the bottom of the screen.

Example:

   var clone = svg.clone().remove;
    s_clone.attr({
        viewBox: '0 0 300 300',
        height: '640px',
        width: '640px',
    });
   //...
    var paths = clone.selectAll('path');
    paths.forEach(function (elem, i) {
        var ropath = elem.clone().remove(); //each clone needs to be removed
        var expanded = '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 300 300\' width=\'640px\' height=\'640px\'>' + ropath.toString() + '</svg>'; //individual components of the original
        images[num - i] = new Image();
        images[num - i].src = 'data:image/svg+xml;base64,' + btoa(expanded);
   });
    images[0] = new Image();
    images[0].src = 'data:image/svg+xml;base64,' + btoa(s_clone.toString());