How to add SVG image to pdf
Question
I want to generate a pdf when someone clicks on the generate pdf button. This pdf contains the image of the pile of squares highlighted corresponding to what the user highlighted in the image on the web page. Whenever I try to include the svg I get a blank pdf. Any help?
trial.html:
<?php
use Dompdf\Dompdf;
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
if(isset($_POST['send']))
{
$output = ' <!DOCTYPE html>
<svg width="564" height="409" >
<image
href="https://media.geeksforgeeks.org/wp-content/uploads/unique-rectangles-formed-using-
n-unit-squares.png"
width="564"
height="409"
/>
<polygon title="1" points="21,385 24,309 100,309 101,385" />
<polygon title="2" points="102,305 23,304 23,228 101,227" />
<polygon title="3" points="103,225 26,228 25,149 99,151" />
<polygon title="4" points="103,147 102,65 25,70 23,147" />
</svg>';
// $output .= '<img src="data:image/svg+xml;base64,'.base64_encode($svg).'" width="100" height="100" />';
require 'C:\Users\Main\vendor/autoload.php';
$cart_body='<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Squares</title></head><body><p>Test Printing...</p></body></html>';
$dompdf = new Dompdf();
$dompdf->load_html($output);//body -> html content which needs to be converted as pdf..
$dompdf->render();
$dompdf->stream("sample.pdf");
}?>
script.js:
function handleSVGClick(event) {
if (event.target.tagName === "polygon") {
event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
}
}
style.css:
polygon {
stroke-width: 2px;
stroke: #333;
fill: transparent;
}
1 answers
solution1
0 2021-01-03 09:05:37
Try like this:
trial.html:
<?php
require 'C:/Users/Main/vendor/autoload.php';
use Dompdf\Dompdf;
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
if(isset($_POST['send']))
{
//any embedded images need to be base64 encoded as DataURIs
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="564" height="409" >
<image
href="data:image/jpg;base64,' . base64_encode(file_get_contents('https://media.geeksforgeeks.org/wp-content/uploads/unique-rectangles-formed-using-n-unit-squares.png')) . '"
width="564"
height="409"
/>
<polygon title="1" points="21,385 24,309 100,309 101,385" />
<polygon title="2" points="102,305 23,304 23,228 101,227" />
<polygon title="3" points="103,225 26,228 25,149 99,151" />
<polygon title="4" points="103,147 102,65 25,70 23,147" />
</svg>';
//convert SVG image to an <img /> element with the SVG image as a DataURI
$output = '<img src="data:image/svg+xml;base64,'.base64_encode($svg).'" width="564" height="409" />';
$cart_body='<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Squares</title></head><body><p>Test Printing...</p></body></html>';
$dompdf = new Dompdf();
$dompdf->load_html($output); //body -> html content which needs to be converted as pdf..
$dompdf->render();
$dompdf->stream("sample.pdf");
}?>
script.js:
function handleSVGClick(event) {
if (event.target.tagName === "polygon") {
event.target.style.fill = `hsl(${Math.random() * 360}, 90%, 60%)`;
}
}
style.css:
polygon {
stroke-width: 2px;
stroke: #333;
fill: transparent;
}
- The
requirestatement needs to be before referencing the namespace (use Dompdf\Dompdf;) - Ensure GD extension is installed so that images are supported
- In the Dompdf README.md , one of the stated limitations is that inline SVG elements are not yet supported:
Embedding "raw" SVG's (<path...>) isn't working yet, you need to either link to an external SVG file, or use a DataURI like this:
$html = '<img src="data:image/svg+xml;base64,'. base64_encode($svg). '"...>';
The above code uses $svg as a standalone SVG image (instead of a SVG image for embedding in HTML). It then encodes that as the DataURI of an <img /> element which should render as a PDF. As the SVG image itself contains an embedded image, that also needs to be encoded as a DataURI .
The image in the PDF should look like this:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.