Menu
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!
921
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!
178
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:
8
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
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
