phppdfsvgdompdf

Dompdf not generating pdf properly from SVG

I am having trouble generating pdf keeping design with SVG content. SVG is linked inside html, and using html to generate pdf. But not working properly.

This is the code:

$dompdf = new DOMPDF();

//HTML Content
$html = <<<EOD
<html>
    <head>
        <style type="text/css">
            html {
                margin: 1%;
                padding: 0;
            }
            .header,
            .footer {
                width: 100%;
                text-align: center;
                position: fixed;
                font-size: 26px;
            }
            .header {
                top: 0px;
            }
            .footer {
                bottom: 18px;
            }
            .center {
                margin: 0 auto;
            }
            .divTable{
                display: table;
                width: 100px;
                text-align: center;
                margin: 0 auto;
            }
            .divTableRow {
                display: table-row;
            }
            .divTableHeading {
                margin: 0 auto;
            }
            .divTableCell, .divTableHead {
                display: table-cell;
                padding: 0 33px;
            }
            .bottom .divTableCell {
                padding-top: 30px;
            }
            .divTableHeading {
                display: table-header-group;
                font-weight: bold;
            }
            .divTableFoot {
                display: table-footer-group;
                font-weight: bold;
            }
            .divTableBody {
                display: table-row-group;
            }
            div.img-border img {
                border: 2px solid #eb0089;
            }
        </style>
    </head>
    <body>
        <div class="center">
            <div class="divTable top">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell" style="padding-left:0px;"><div class="img-border"><img src="$small_image"></div></div>
                        <div class="divTableCell"><div class="img-border"><img src="$small_image"></div></div>
                        <div class="divTableCell" style="padding-right:0px;"><div class="img-border"><img src="$small_image"></div></div>
                    </div>
                </div>
            </div>
            <div class="divTable bottom">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell" style="padding-left:0px;"><div class="img-border"><img src="$large_image"></div></div>
                        <div class="divTableCell" style="padding-right:0px;"><div class="img-border"><img src="$large_image"></div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            $customer_title - $customer_order_number
        </div>
    </body>
</html>
EOD;

//PDF Options
$dompdf->set_option( 'dpi' , '300' );
$dompdf->load_html($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->set_option( 'isRemoteEnabled', true );
$dompdf->render();

$output = $dompdf->output();
file_put_contents('path-to-pdf/new.pdf);

Here is the html view (including svg): view here

This is how the generated pdf looks like: enter image description here

However, when I use PNG image, it works fine. This is how the generated pdf looks like (using png): enter image description here

Not sure what I am doing wrong!

Solution

  • This is not a matter of your css or html. Basically this comes down to dompdf rendering your your svg differently then the browser. dompdf is rendering each group/item within the svg xml individually into the displayed image, whereas the browser is defining each group/item as part as the whole image before rendering.

    Your best options here are:

    1. using PNG's instead of SVG's
      • this would definitely be the quickest solution if you're dealing with a small number of images, but if you're dealing with many images or auto-generated images this could become time consuming.
    2. altering your SVG XML to fit fit the way dompdf is rendering.
      • this could solve your issue with dompdf rendering, but could lead to issues with browser rendering, and could also be time consuming based on number of images and source.
    3. Opening an issue with dompdf
      • Probably the best long term solution, but the turn around time is unknown.
    4. Alter the dompdf source code to solve your issue