Question

Question can some one tell me how can i convert my SVG element to a string ?

i’m using canvg to convert my SVG to an image.

it has to be render in a canvas first , the canvg() method is expecting a SVG STRING

code :

  function updateChartImage(){
        canvg(document.getElementById('canvas'),expecting ` svg string`);
       var canvas = document.getElementById("canvas") ; 
       var img = canvas.toDataURL("image/png");
       img = img.replace('data:image/png;base64,', '');
       $("#hfChartImg").val(img) ;
       $('#img').attr({ src: img });
        }

i have tried

$('#container svg').html() ; // it gives me an error 
//Uncaught TypeError: Cannot call method 'replace' of undefined 

notice that

  $('#container svg') 
  $('#container').html() // both works fine and

UpDATE

i’m using highcharts the have a getSVG() function that i can pass to the canvg() but the problem is it dosen’t get the latest updates , so i have to do it this way , when running the getSVG() function i get the following :

LINK

Answer 1

As far as I can recall jQuery’s .html() makes use of innerHTML which is meant for html, not svg. SVG’s are xml documents, so you can use XMLSerializer()

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);