TCPDF将带有html的内联SVG转换为PDF

Question

I am using TCPDF to convert html into PDF.

    $pdf = new TCPDF();
    $pdf->SetPrintHeader(false);
    $pdf->SetPrintFooter(false);
    $pdf->AddPage();       

    $html  = '<div>Some random html </div>';        
    $pdf->writeHTML($html, true, false, true, false, '');
    $pdf->Output('/pdf/output.pdf','F');

It works like a charm.

But I have a case when (Dynamic) html has SVG inline code also. So I need to convert this html which has SVG into PDF. But it does not work. Below is my code.

    $pdf = new TCPDF();
    $pdf->SetPrintHeader(false);
    $pdf->SetPrintFooter(false);
    $pdf->AddPage();       

    $html  = '<div>Some random html <div style="width: 100px;"><svg viewBox="10 0 80 80">
    <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
    <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
    <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
    Sorry, your browser does not support inline SVG. 
    </svg></div> </div>';        
    $pdf->writeHTML($html, true, false, true, false, '');
    $pdf->Output('/pdf/output.pdf','F');

So in this case the generated PDF has all the html printed in pdf but in place of SVG it says "Sorry, your browser does not support inline SVG".

Is there any possible way to generate PDF from html containing SVG?

Update I found http://www.pdfy.net/ this website can convert html based svg into PDF. Any idea how they are doing it?

EDIT 1:

Okay Now I found that mPDF have supports for inline SVG. And it has really great support for it. But mPDF have it's own problem of very less support for basic css. For Eg. Position absolute, float are not supported very well.

So again I am back with the same problem with additional requirement. A library which supports conversion of html with inline svg to PDF and it also supports all basic CSS.

Answer 1

Solution #1- Save svg to file

You can save your svg part of your HTML into a file. Then you can add the svg image into your PDF with $pdf->ImageSVG() function as it says here.

$pdf->ImageSVG($file='path/to/testsvg.svg', $x=15, $y=30, $w='', $h='', $link='http://www.tcpdf.org', $align='', $palign='', $border=1, $fitonpage=false);

$pdf->Write(0, $txt='', '', 0, 'L', true, 0, false, false, 0);

Solution #2- Add inline svg

You can store your inline svg into a variable (for example $svgString):

$svgString = '<svg viewBox="10 0 80 80">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
Sorry, your browser does not support inline SVG. 
</svg>';

Then you can add your $svgString variable to PDF like this:

$pdf->ImageSVG('@' . $svgString, $x=15, $y=30, $w='', $h='', $link='http://www.tcpdf.org', $align='', $palign='', $border=1, $fitonpage=false);

$pdf->Write(0, $txt='', '', 0, 'L', true, 0, false, false, 0);