title: Styling errors when converting inline SVG to png
body: <p>My high level goal is to convert a <code>&lt;div&gt;</code> element containing a few inline svg images to a png file. All operations must be performed within the client browser using JavaScript. I have tried: </p>
  
  <ol>
  <li><p>using canvg library and following the steps from this post: <a href="https://github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223" rel="nofollow noreferrer">https://github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223</a></p>
  
  <p>original svg:</p>
  
  <p><img src="https://i.stack.imgur.com/aqoFF.png" alt="original svg"></p>
  
  <p>result: </p>
  
  <p><img src="https://i.stack.imgur.com/hLFZe.png" alt="canvg result"></p></li>
  <li><p>flattening the css styles into the <code>&lt;svg&gt;</code> tag and then calling canvg, following the steps from this post: <a href="https://stackoverflow.com/questions/5433806/convert-embedded-svg-to-png-in-place/21318963#21318963">Convert embedded SVG to PNG in-place</a></p>
  
  <p>result: a blank image.</p></li>
  <li><p>flattening the css styles into the <code>&lt;svg&gt;</code> tag and manually drawing the svg onto a canvas, following the steps from this post:
  <a href="https://stackoverflow.com/questions/15181452/how-to-save-export-inline-svg-styled-with-css-from-browser-to-image-file/18006981#18006981">how to save/ export inline SVG styled with css from browser to image file</a></p>
  
  <p>result: a blank image.</p></li>
  <li><p>flattening the css styles into an inline style sheet using this code: <a href="http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/" rel="nofollow noreferrer">http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/</a></p>
  
  <p>result: a blank image.</p></li>
  <li><p>using <a href="http://nytimes.github.io/svg-crowbar/" rel="nofollow noreferrer">svg crowbar</a> to manually download the <code>&lt;div&gt;</code> element as an .svg file.</p>
  
  <p>result: </p>
  
  <p><img src="https://i.stack.imgur.com/QkUwM.png" alt="enter image description here"></p>
  
  <p>then when I compared the computed css of the original svg against the downloaded svg, I found that the downloaded svg had the correct svg xml but an incorrect inline stylesheet (<code>&lt;style type="text/css"&gt;</code>) For example the numbers 200, 300 on the far right of the graph, they were drawn with <code>&lt;text x="214" dy=".32em" y="0" style="text-anchor: start;"&gt;200&lt;/text&gt;</code> and in my external css, I have:</p>
  
  <p>.scatterChart .axisGraphicsContext text {
      font-size: 8px;
      fill: #777;
  }</p>
  
  <p>However, the font-size and fill properties were absent from the inline stylesheet of the downloaded svg.</p></li>
  </ol>