How to convert a div inside an iframe into svg code?

Question

I have a simple html page with a datatables table. This page itself is being used as an iframe for another page. Now in that page I am able to get the table html code properly, but I cannot figure out a way to convert it into svg code. I found multiple options all of which I tried, but failed, because I just want the SVG code of my div. I need like a screenshot of the div . Options I have tried html2canvas, jspdf already, but they either dont work, or are giving me the pdf or base64 image which I don't want. Is this possible? How should I approach this??

I am running a python server just so I have complete access of the objects inside the iframe, and won't get any permissions issues.

Here is my simple file:

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts-3d.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/js/modules/exporting.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>



  <script>
    var ifrmChart=undefined;
    function getChart(){
      ifrmChart = $('#example');
    }

    $(document).ready(function() {
      $('#example').DataTable();
      getChart();
    } );
  </script>
</head>

<body>


  <div class="row" id="tableContainer">



    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>

        <tr>
          <td>Donna Snider</td>
          <td>Customer Support</td>
          <td>New York</td>
          <td>27</td>
          <td>2011/01/25</td>
          <td>$112,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>



  </div>
</body>

</html>

The page which has the iframe is even simpler, it just has an iframe with the src of my previous file.

<span>
    <h4>Table two title</h4>
    <iframe id="ifrm3" src="table.html" width="500" height="300"></iframe>
</span>

I am also using other iframes, which have svg code in them as they are highcharts objects. I use that svg and then use the library svg2pdf to print it on a pdf. Now, I also need a few html divs and objects. I thought if i could convert the html to svg and merge them, and then print it on a pdf, it would work.

My ultimate goal is to get the svg from the graphs inside the iframes, and merge with the svg code from the converted html, merge them together and print them on a pdf.

How should I go about this ?

Is impossible to convert random HTML to SVG as they are two different markup languages. They may have some things in common, but SVG don't have an equal counterpart for all HTML elements. You only can convert HTML to SVG if you know what HTML you have and if there's a *SVG-way* of creating that element. — Jorge Fuentes González, Jan 08 '20 at 18:54
Well, if this is not possible, what would you suggest I should do now. My ultimate goal is to get the svg from the graphs inside the iframes, and merge with the svg code from the converted html, merge them together and print them on a pdf. — Rohit Kumar, Jan 08 '20 at 18:55
Because you are converting images to SVG paths (AKA pixels to approximated vectors). If you zoom, will notice the diferrence. What you use are tools that create a vectorized image that is similar to the pixelated image. HTML is neither a pixelated image, nor a vectorized image, hence the problem you are having. To achieve what you want is really weird. The best you can try is to convert HTML to an image and then an image to a SVG. — Jorge Fuentes González, Jan 08 '20 at 18:58
Okay, I will try that. This is what I wanted actually, to know if this is even possible, or what issues I might have. I will certainly try that. When you say convert html to image, do you mean base64 type image ? — Rohit Kumar, Jan 08 '20 at 19:00
Yep. A base64 image is just a *web-ready* image. But is exactly the same as a png/jpg or whatever image you may have in your disk. — Jorge Fuentes González, Jan 08 '20 at 19:01

score 1 · Answer 1 · answered Jan 08 '20 at 20:18

I would recommend taking a look at the Screen Capture API for a more modern approach than HTML2Canvas. The Screen Capture API is, of course, currently only supported by certain browsers, so HTML2Canvas can still be used as a fallback. As others have indicated, the base64 data is actually what you want. That is either png or jpeg data, and it could be embedded in a pdf using several client side pdf libraries nowadays. I haven't used pdfmake in a few years (I have no affiliations with them at all, but I have personally used it), but it supported inserting base64 data into a pdf years ago, and jsPDF's images example, on their homepage, shows embedding base64 data in a pdf using their library. Likewise, any library that will output an image to the HTML canvas is a viable option, as that can be exported to base64 data.

Since you control both sources (container and iframe) you could either take the screen shot from inside the iframe, and then pass just the image data back to the parent (either via the server, or directly on the client, since they are both on the same domain) OR you can take the screen shot from the container page, if you add allow="display-capture" to the iframe tag, and make the PDF out of a single image.

How does the screen capture api give me the ability to take an image of the current html? All I see is how to share my screen.. — Rohit Kumar, Jan 09 '20 at 04:23

How to convert a div inside an iframe into svg code?

1 Answers1