Html-to-Image SVG export

user_5300189 0
Viewed 98

I need to be able to export everything inside a Div into an exportable SVG file. I'm using html-to-image library to do this. The issue I'm having is that the generated SVG path isn't correct and does not work as an SVG file. Tried a few things, but am stuck. Below is the entire code that you can run to test it out.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>



    <!-- 1. Constructing a Div -->
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>


    <!-- 2. Using HTML-to-Image to convert that Div to SVG -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
      <script type="text/javascript">
        
      
      function filter (node) {
        return (node.tagName !== 'i');
      }

      htmlToImage.toSvg(document.getElementById('capture'), { filter: filter })
        .then(function (dataUrl) {

      //--3. the following Alert shows the generated SVG file for reference, but the SVG path generated is wrong
          alert(dataUrl);

          
        });
      </script>
  </body>
</html>
svg javascript
1 Answers

Returned dataUrl from html-to-image is url encoded. So, you need to decode and also need to ommit the first mimie-type string which is the part before the comma ,. In this example, I splitted the data string with , and decode the svg string.

 <div id="svg">
 </div>

 htmlToImage.toSvg(document.getElementById('capture'), { filter: filter 
       })
        .then(function (dataUrl) {
          let svg = decodeURIComponent(dataUrl.split(',')[1])
          console.log(svg);
          document.getElementById('svg').innerHTML = svg          
        });
user_122847460
Related