title: How to Include CSS style when converting svg to png
body: <p>i've created a simple SVG elment that get dowbloaded to png when clicking on a button, my solution is similiar to <a href="https://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg">here</a> </p>
  
  <p><br>
  The basic idea is:<br>
  1.svg to canvas<br>
  2.canvas to dataUrl<br>
  3.trigger download from dataUrl</p>
  
  <p><strong>the problem is that when downloading the png file it doesnt include the css style applied on the svg</strong>
  <a href="https://i.stack.imgur.com/wyOAX.png" rel="nofollow noreferrer">my solution result</a></p>
  
  <p><strong>NOTICE - I know there is a workingaround solution by moving the styles "inline" on the elements</strong> like <a href="https://stackoverflow.com/questions/33189495/adding-css-style-when-converting-svg-to-png">here</a> or the recursive solution by digging the DOM tree and using <strong>getComputedStyle(element,null);</strong>
  <br></p>
  
  <p><em>Questions:</em>
  <br>
  <strong>1.what's the real reason and the solution for this issue.</strong><br>(is the GPU acceleration related in anyway?)<br>
  <strong>2.how i still overcome this issue when using a custom font with Fontface</strong></p>
  
  <pre><code> &lt;button id="btn"&gt;svg to png&lt;/button&gt;
  
    &lt;svg id="svg" width="200" height="200"&gt;
      &lt;circle cx="50" cy="50" r="30" /&gt;
      &lt;text class="svgTxt" x="0" y="100"&gt;Hen's SVG Image&lt;/text&gt;
    &lt;/svg&gt;
    &lt;canvas id="canvas"  width="200" height="200"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>my CSS:</p>
  
  <pre><code>  /*adding exo2 font*/
      @font-face {
      font-family: 'exo_2black';
      src: url('./exo2font/Exo2-Black-webfont.eot');
      src: url('./exo2font/Exo2-Black-webfont.eot?#iefix') format('embedded-opentype'),
           url('./exo2font/Exo2-Black-webfont.woff') format('woff'),
           url('./exo2font/Exo2-Black-webfont.ttf') format('truetype'),
           url('./exo2font/Exo2-Black-webfont.svg#exo_2black') format('svg');
      font-weight: normal;
      font-style: normal;
  
  }
  /*change circle color depends on window size*/
  @media screen and (min-width: 480px) {
      svg circle {
          fill: lightgreen;
      }
  }
  /*style on the svg text*/
      .svgTxt{
        font-family: 'exo_2black';
        font-size: 30px;
        fill: red;
      }
  </code></pre>
  
  <p>my code:</p>
  
  <pre><code>  //reference to elements
      var btn = document.querySelector('#btn');
      var svg = document.getElementById('svg');
      var svgTexts = svg.getElementsByTagName('text');
      var canvas = document.getElementById('canvas');
      //Style definitions for svg elements defined in stylesheets are not applied to the generated canvas. This can be patched by adding style definitions to the svg elements before calling canvg.
    //3.trigger download from dataUrl
      function triggerDownload(imgURI) {
        var evt = new MouseEvent('click', {
          view: window,
          bubbles: false,
          cancelable: true
        });
  
        var a = document.createElement('a');
        a.setAttribute('download', 'hen_saved_image.png');
        a.setAttribute('href', imgURI);
        a.setAttribute('target', '_blank');
        a.dispatchEvent(evt);
      }
      //btn click event
      btn.addEventListener('click', function () {
        // 1.svg to canvas
        var ctx = canvas.getContext('2d');
        var data = (new XMLSerializer()).serializeToString(svg);//serialize the svg element to string
        var DOMURL = window.URL || window.webkitURL || window;
        var img = new Image();
        var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });//A blob object represents a chuck of bytes that holds data of a file.
        var url = DOMURL.createObjectURL(svgBlob);//creates a DOMString containing an URL representing the object given in paramete
        $('svg').append(deletedSVGText);
        img.onload = function () {
          ctx.drawImage(img, 0, 0);
          DOMURL.revokeObjectURL(url);
          // 2.canvas to dataUrl
          var imgURI = canvas
            .toDataURL('image/png')
            .replace('image/png', 'image/octet-stream');// returns a data URI containing a representation of the image in the format specified by the type parameter
  
          triggerDownload(imgURI);
        };
        img.src = url;
      });
  </code></pre>