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;
  }

sbgib · Answer 1 · 2021-01-03T09:21:20.307

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 require statement 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:

Then there may be another problem. Are you able to get an image that isn't a SVG to show in a PDF? — sbgib, Jan 03 '21 at 09:12
[Here in the Requirements](https://github.com/dompdf/dompdf/wiki/Requirements#optional-dependencies) it says that GD extension needs to be installed for images to be supported. It sounds like that might be missing. [Here's how to install that](https://stackoverflow.com/questions/2283199/enabling-installing-gd-extension-without-gd). — sbgib, Jan 03 '21 at 09:22
when I checked using the function phpinfo(); I found that GD is enabled — Heba, Jan 03 '21 at 09:36
Not sure why that's not working then. It might be worth [raising an issue with dompdf](https://github.com/dompdf/dompdf/issues?page=2&q=is%3Aissue+is%3Aopen+image), posting the code and seeing if they know what might be wrong, either in that code or on their side. Alternatively, it might be easier to solve the problem using CSS [`@media print`](https://www.tutorialspoint.com/css/css_printing.htm) to style a print version of the page, then have the Generate PDF button simply open the print dialogue with `window.print();`. This would also allow printing the SVG exactly as the user sees it :) — sbgib, Jan 03 '21 at 10:11
can you explain more about the CSS solution or recommend a video to watch? — Heba, Jan 03 '21 at 10:25
Also, I want the pdf to be sent to user by email. Will the CSS solution produce a file that could be sent? — Heba, Jan 03 '21 at 10:26
No, the CSS solution would be the same as the user printing to PDF themselves. Here's a really useful [article](https://www.sitepoint.com/css-printer-friendly-pages/) and a [video](https://www.youtube.com/watch?v=CAgLAeykOyU) that each explain how you can style elements of a page to look a certain way for printing. The user will see a Print button, so they can print to PDF directly if they want to. You can even use classes to e.g. style a specific way when a specific button is clicked, so that only the SVG is shown in that case. — sbgib, Jan 04 '21 at 07:43

How to add SVG image to pdf

1 Answers1