title: SVG to Powerpoint via php or javascript
body: <p>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, </p>
  
  <p>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?</p>
  
  <p>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?</p>
  
  <p>If I could convert to PNG or JPG then submit those images with POST I can save them to the server maybe?</p>
  
  <p>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...</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"&gt;&lt;/script&gt; 
  
  
  &lt;canvas id="test" width="600" height="400"&gt;&lt;/canvas&gt;
  
  &lt;svg width="600" height="400"&gt;&lt;style type="text/css"&gt;&lt;![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;}]]&gt;&lt;/style&gt;.....&lt;/svg&gt;
  
  &lt;script type="text/javascript"&gt; 
      var ctx = document.getElementById('test').getContext('2d');
      ctx.drawSvg('&lt;svg width="600" height="400"&gt;&lt;style type="text/css"&gt;&lt;![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;}]]&gt;&lt;/style&gt;......&lt;/svg&gt;',
      0 , 0 , 600, 400);
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>