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:

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

Not sure what I am doing wrong!

回答1:

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:

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.
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.
Opening an issue with dompdf
- Probably the best long term solution, but the turn around time is unknown.
Alter the dompdf source code to solve your issue

回答2:

I searched FOREVER until I finally came up with my own solution. I thought I should share in case it could be useful to anyone else. If you are using PHP the best solution to inline SVG images (for me) is to output it using BASE64_ENCODE() on the actual svg, then wrapping it in an image using the src as follows:

$svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" class="circular-chart">
    <path class="circle-bg"
          stroke-width="1"
          fill="none"
          stroke="#ddd"
          d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
             a 15.9155 15.9155 0 0 1 0 -31.831"
          />
</svg>';

$html = '<img src="data:image/svg+xml;base64,'.base64_encode($svg).'"  width="100" height="100" />';

The only issue you might find is weird dimensions on the actual image. You will have to mess with it on the PDF output to make sure it displays as desired. I needed to remove the width and height of the actual SVG to make sure it was sizing correctly. Again hope this helps!

回答3:

I have generated some demo PDF with Svg's and it worked fine, you just need to add inline width and height to the image tag like this

<img width="400" src="yourpath/au.svg" />

P.S Do not set width in % just write like this width="400" inline img tag

来源：https://stackoverflow.com/questions/48844649/dompdf-not-generating-pdf-properly-from-svg

标签

php

pdf

svg

dompdf