Is there an equivalent of canvas's toDataURL method for SVG? [closed]

Answer 1

Illustrating Hubert OG 's answer with code; 2 remarks first.

First (thank you, Robert Longson), it might work without encodeURIComponent, but you better include it (for example, if you have something like fill="url(#pattern)" the encodeURIComponent is necessary, because of the # character)

Second, the SVG namespace is not optional, but it might not be included in svgElt.outerHTML. Especially, if you have created your svg node via createElementNS, like so

svgElt = document.createElementNS("http://www.w3.org/2000/svg", 'svg')

then a subsequent call to svgElt.outerHTML will not contain the namespace attribute, and this would result in not working code, unless you include the namespace attribute later in some fashion

var imgEnc    = new Image();
var imgEncNS  = new Image();
var prefix    = 'data:image/svg+xml,';
var svgOpen   = '<svg width="200" height="30">';
var svgClose  = '</svg>';
var svgOpenNS = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">';
var rect      = '<rect width="200" height="30" fill="black"/>';
var html      = svgOpen + rect + svgClose;
var htmlNS    = svgOpenNS + rect + svgClose;
var htmlEnc   = window.encodeURIComponent(html);
var htmlEncNS = window.encodeURIComponent(htmlNS);
imgEnc.src   = prefix + htmlEnc;
imgEncNS.src = prefix + htmlEncNS;
function T(txt){
  document.body.appendChild(document.createTextNode(txt));
}
function HR(){ document.body.appendChild(document.createElement('hr')); }
function BR(){ document.body.appendChild(document.createElement('br')); }
function A(arg){ document.body.appendChild(arg); }
T('without namespace'); BR(); A(imgEnc); HR();
T('with namespace'); BR(); A(imgEncNS);

you can fix the missing namespace issue by using function outerXHTML from my answer to this question

or like this

function imgFromSVGnode(node){
    function setNS(elt, parentNS){
        var namespace = elt.namespaceURI;
        if (namespace!==parentNS){
            elt.setAttribute('xmlns', namespace);
        }
        for (var i=0; i<elt.childNodes.length; i++){
            setNS(elt.childNodes[i], namespace);
        }
    }
    setNS(node, null);
    var html = node.outerHTML;
    var dataURL = 'data:image/svg+xml,' + window.encodeURIComponent(html);
    var img = new Image();
    img.src = dataURL;
    return img;
};

Answer 2

From: http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

The reason why you cannot use an SVG image element as source for the drawImage method is simple, but painful: the current Canvas specification does not (yet) allow to reference SVGImageElement as source for drawImage and can only cope with HTMLImageElement, HTMLCanvasElement and HTMLVideoelement. This short-coming will hopefully be addressed during the process of defining "SVG in HTML5" behavior and could be extended to allow SVGSVGElement as well. The xhtml:img element in listing 3 uses visibility:hidden as we do not want it to interfere with its visible copy on the Canvas.

Answer 3

var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString);

Answer 4

Yes, you can't do that directly, but you can use canvg for that, I mean, to draw SVG to Canvas, and get data url from Canvas. It's not without bugs, especially for complex gradients processing, but I had some positive experience with it.

Answer 5

first download a js library svg_todataurl.js and include it

then just paste this code

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");