How to capture SVG Images in PDF.

Deepika Jain · ‎07-12-2023

I have a UI Page Which contains the SVG image (Bar tag) and when I download that PDF, it is not capturing the SVG Image.

Requirement: How to capture the SVG unique image in PDF.

Below is the code for your reference

<?xml version="1.0" encoding="utf-8"?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<html>
<head>
<title>My ServiceNow Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js"></script>
<style>
        /* Style the divs */
        div {
          border: 1px solid black;
          margin: 10px;
          padding: 10px;
          background-color: #f2f2f2;
          border-radius: 5px;
        }
        /* Style the button */
        button {
          margin: 10px;
          padding: 10px;
          background-color: black;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
        }
        /* Style the button when hovered */
        button:hover {
          background-color: #333;
        }
          svg{
          height: 10%;
          width: 10%;
          }
</style>
</head>
<body>
<div id="div1">
<h2>Div 1</h2>
<p>This is the first div element.</p>
<svg id="SVGelement" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 448V64h18v384H0zm26.857-.273V64H36v383.727h-9.143zm27.143 0V64h8.857v383.727H54zm44.857 0V64h8.857v383.727h-8.857zm36 0V64h17.714v383.727h-17.714zm44.857 0V64h8.857v383.727h-8.857zm18 0V64h8.857v383.727h-8.857zm18 0V64h8.857v383.727h-8.857zm35.715 0V64h18v383.727h-18zm44.857 0V64h18v383.727h-18zm35.999 0V64h18.001v383.727h-18.001zm36.001 0V64h18.001v383.727h-18.001zm26.857 0V64h18v383.727h-18zm45.143 0V64h26.857v383.727h-26.857zm35.714 0V64h9.143v383.727H476zm18 .273V64h18v384h-18z"/></svg>
</div>
<div id="div2">
<h2>Div 2</h2>
<p>This is the second div element.</p>
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 448V64h18v384H0zm26.857-.273V64H36v383.727h-9.143zm27.143 0V64h8.857v383.727H54zm44.857 0V64h8.857v383.727h-8.857zm36 0V64h17.714v383.727h-17.714zm44.857 0V64h8.857v383.727h-8.857zm18 0V64h8.857v383.727h-8.857zm18 0V64h8.857v383.727h-8.857zm35.715 0V64h18v383.727h-18zm44.857 0V64h18v383.727h-18zm35.999 0V64h18.001v383.727h-18.001zm36.001 0V64h18.001v383.727h-18.001zm26.857 0V64h18v383.727h-18zm45.143 0V64h26.857v383.727h-26.857zm35.714 0V64h9.143v383.727H476zm18 .273V64h18v384h-18z"/></svg>
</div>
<div id="div3">
<h2>Div 3</h2>
<p>This is the third div element.</p>
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 448V64h18v384H0zm26.857-.273V64H36v383.727h-9.143zm27.143 0V64h8.857v383.727H54zm44.857 0V64h8.857v383.727h-8.857zm36 0V64h17.714v383.727h-17.714zm44.857 0V64h8.857v383.727h-8.857zm18 0V64h8.857v383.727h-8.857zm18 0V64h8.857v383.727h-8.857zm35.715 0V64h18v383.727h-18zm44.857 0V64h18v383.727h-18zm35.999 0V64h18.001v383.727h-18.001zm36.001 0V64h18.001v383.727h-18.001zm26.857 0V64h18v383.727h-18zm45.143 0V64h26.857v383.727h-26.857zm35.714 0V64h9.143v383.727H476zm18 .273V64h18v384h-18z"/></svg>
</div>
<script>
        function DemoUIPage() {
          // Load the jspdf library
          var script = document.createElement('script');
          script.src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js';
          script.addEventListener('load', function() {
            // The jspdf library has finished loading, so we can now use it in our code
            var doc = new jsPDF();
            // Add CSS styles to the PDF document
            var css = window.getComputedStyle(document.querySelector('div')).cssText;
            doc.setFontSize(10);
            doc.text(css, 10, 10);
            // Add text to the PDF document
            doc.fromHTML(document.getElementById("div1").outerHTML, 10, 20);
            // Save the PDF document
            doc.addPage();
            doc.fromHTML(document.getElementById("div2").outerHTML, 10, 20);
            // Save the PDF document
            doc.addPage();
            doc.fromHTML(document.getElementById("div3").outerHTML, 10, 20);
            doc.save("Demo_UI_page.pdf");
          });
          document.head.appendChild(script);
          var svgimg = document.getElementById('SVGelement');
          var canvas = document.createElement('canvas');
          canvg(canvas, svgElement.outerHTML);

 

          var image = canvas.toDataURL('image/png'); // Convert canvas to base64-encoded PNG image
          doc.save('output.pdf');
        }

</script>
<button onclick="DemoUIPage()">Generate PDF</button>
</body>
</html>
</j:jelly>

Thanks in Advance

Samaksh Wani · ‎07-12-2023

@Deepika Jain

To put images into a PDF you need to convert them to a DataURI, which is a digital representation of the image itself. SVG's are processed dynamically by a web browser when it displays the image. So there is no way to statically convert them to a DataURI.

One potential workaround would be to use Power Automate desktop to display the HTML file that is generated with the SVG and take a screenshot of the SVG. If you save that as a PNG you can then convert it and embed it into the PDF.

Plz Mark my Solution as Accept and Give me thumbs up, if you find it Helpful.

Regards,

Samaksh