I'm trying to use canvg to rasterize a SVG image embedded in my document. The following code produces correct output in Firefox 17:
//svg is a jQuery object that we selected earlier
//canvas is a canvas created earlier
//use a temporary DOM object to serialize the SVG DOM object into text;
var tmpContainer = $(document.createElement('div'));
tmpContainer.append(svg.clone());
var svgText = tmpContainer.get(0).innerHTML;
canvg(canvas.get(0), svgText);
However, in IE 8 (the other browser my organization supports), svgText never picks up a value. I've tried other options, like the html() method from jQuery with little success--after all, it's not really html.
My question is this: how can I get the SVG as a string of text in IE8? Are there other ways I can pass this to canvg() that I'm just not thinking of?
Okay, so I've got bad news. Ready? Here goes:
There is no such thing as SVG in Internet Explorer 8.
Once I actually looked at the page source using the debugger, I found out that Google Charts (and any other Javascript charting library, for that matter) uses VML instead of SVG for charts. This means I can't use canvg() or anything else as things stand.
My options are as follows:
Use node.js to create SVG charts server-side. David Padbury goes over how to do this with Highcharts. There's a lot of expansion that'd be needed, but the basic idea remains the same. This is the most likely to work, but I know nothing about node.js. Also, I'd need to design the interface between my server and client intelligently so that I don't end up with two scripts to maintain.
Try pursuing a VML conversion utility. This is not looking very promising. But, this is what my JavaScript has to work with, so if I wanted to keep it client-side, this is the most direct approach.