So I have figured out how to create a SVG charts with d3, and I have them neatly displayed on a webpage for all to view. The problem is I need to export these SVG graphs to powerpoint. I have started using PHPPowerpoint and can pull an image from a web directory to a powerpoint slide,
but what I can't figure out is how to now take the SVG charts from the html page they are generated on to powerpoint?
I thought I could save them to the web directory then use PHPPowerPoint....but I can't figure out the first step of saving the generated SVG chart to a PNG or JPG to a web directory?
If I could convert to PNG or JPG then submit those images with POST I can save them to the server maybe?
Sorry, probably an easy question for most. Here is some code I have tried, but the circle is still an SVG when I complete....not an img...
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<canvas id="test" width="600" height="400"></canvas>
<svg width="600" height="400"><style type="text/css"><![CDATA[text{font-family:sans-serif;font-size:11px;} path{fill: none;stroke: #000;shape-rendering: crispEdges;} line{fill: none;stroke: #000;shape-rendering: crispEdges;}]]></style>.....</svg>
<script type="text/javascript">
var ctx = document.getElementById('test').getContext('2d');
ctx.drawSvg('<svg width="600" height="400"><style type="text/css"><![CDATA[text{font-family:sans-serif;font-size:11px;} path{fill: none;stroke: #000;shape-rendering: crispEdges;} line{fill: none;stroke: #000;shape-rendering: crispEdges;}]]></style>......</svg>',
0 , 0 , 600, 400);
</script>
</body>
</html>
So I have found since I can't install something on the host server I am using canvg. I am having trouble getting the charts to look 100% the same...I think it might be the shape-rendering: crispEdges doesn't go into canvg.
Here is the code(PHP) to convert SVG file to JPG/PNG.
$svgFile = "sample.svg";
$im = new Imagick();
$im->readImageBlob($svgFile);
$im->setImageFormat("jpg");
$im->writeImage('jpg1.jpg');
$im->clear();
$im->destroy();
For this you need to install ImageMagic on your server (http://www.imagemagick.org).
You can convert SVG to JPG/PNG using command as well.
convert sample.svg jpg1.jpg