16

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 : enter image description here

LINK

SheetJS
  • 22,470
  • 12
  • 65
  • 75
Mina Gabriel
  • 23,150
  • 26
  • 96
  • 124
  • From their documentation, "canvg is a SVG parser and renderer.". If you already have the SVG, either as a string or as a URL reference, you can load it into the canvas, then use canvas methods you describe to extract an image. But you need to start with SVG. That's what the library is for. – Scott Sauyet Jul 09 '12 at 13:59
  • i think i should mention i'm using highcharts , please see my update – Mina Gabriel Jul 09 '12 at 14:05
  • maby wait till dom is ready? `document.ready()` – Ron van der Heijden Jul 09 '12 at 14:35
  • 1
    What do you mean by `getSVG() ... doesn't get the latest updates`? I've been using it without any issues. – freakish Jul 09 '12 at 14:35
  • i had to change some transform() using jquery and when i convert the chart to PDF using getSVG() it doesn't append my changes to the svg , and what i have done can't be solved using highcharts.rendrer() – Mina Gabriel Jul 09 '12 at 14:43

2 Answers2

23

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);
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • can you show us how to do this on the following [jsFiddle](http://jsfiddle.net/minagabriel/uaxZP/4/) i tried and it didn't work .... thanks Duopixel – Mina Gabriel Jul 09 '12 at 15:02
  • 1
    Or you can use `var svg = $("#container svg")[0];` to get the DOM element from the selector without the ID. – Rup Jul 09 '12 at 15:31
  • @Duopixel does [0] referred to the Dom element with in the selector ?? what does that call – Mina Gabriel Jul 09 '12 at 15:34
  • 1
    Yes, a jQuery selector lets you access the selected DOM elements as if it were an array - it has a `.length` property and you can use an array index to read them. I can't find a reference for the array syntax sorry but you can also use [`.get(0)`](http://api.jquery.com/get/) instead of `[0]` – Rup Jul 09 '12 at 15:36
0

For the problem you are not getting your svg content,
If only one svg chart is on page then use:

$('svg').html();

and if more than present then please see there is a div of highcharts_container because they create that svg charts. If you are using them.
Then use:

$('id of that div').html();
Artem Shmatkov
  • 1,434
  • 5
  • 22
  • 41
Guest
  • 1