TCPDF convert inline SVG with html into 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.

Solution 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);

Solution 2

@Soroush

You have missed out only one statement which I am adding in your code, hope that will help, I tested and its working 100%.

    $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>';

    $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);
    $pdf->Output('networth-and-cashflow-document.pdf', 'D'); // This will download PDF

Comments

[Kevin Brown]

Http://www.cloudformatter.com/css2pdf has a drop in jquery plugin for PDF on remote site. It is using an XSL FO backend at the server. You would need to add SVG namespace to your sample.

[Primoz Rome]

Did you solve this problem, I have the same issue...?

[vinay saini]

For PHP still I have not found any solution. But I found a solution in JAVA and .NET svg_to_pdf I have not tried though.

[hugronaphor]

This is not going to work, SVG can be added only by using $pdf->ImageSVG() method

[Daidon]

Your second solution worked for me. Can you explain though why you add '@' in front of the svgstring?

[Raphael Ochsenbein]

Of course it's going to work - I have this exact code working. TCPDF parses the img src attribute and if it's an svg will correctly add it to the pdf. I added a code example of how it works.

[Bendemann]

@Daidon that will treat ur input as a string content (normally you'd input the name of the SVG file)