How to Handle SVG Images in html-to-pdfmake

TLDR: html-to-pdfmake converts inline <svg> elements directly to PDFMake vector graphics nodes by extracting element.outerHTML, stripping whitespace characters, and returning an object with the svg property set to the cleaned markup.

The aymkdn/html-to-pdfmake library transforms HTML strings into PDFMake-compatible document definitions. When you need to handle SVG images in html-to-pdfmake, the parser treats them as first-class vector elements rather than raster images, preserving infinite scalability in the generated PDF output.

How html-to-pdfmake Processes SVG Elements

When the parser encounters an <svg> tag, it enters the dedicated SVG case in index.js (lines 428-335). The converter extracts the element's raw markup from element.outerHTML, applies a regular expression to remove all line breaks and indentation, and constructs a PDFMake node with the cleaned string.

The resulting node structure contains:

• svg: The processed SVG markup as a string
• nodeName: 'SVG'
• style: ['html-svg'] (unless the removeTagClasses option is enabled)

The Core Conversion Logic

The SVG handling logic strips unnecessary whitespace to ensure the markup is PDF-ready:

case "SVG": {
  ret = {
    svg: element.outerHTML.replace(/\n(\s+)?/g, ""),
    nodeName: 'SVG'
  };
  if (!this.removeTagClasses) ret.style = ['html-svg'];
  break;
}

This implementation ensures that PDFMake receives a clean SVG string it can render as native vector graphics.

Converting Inline SVG to PDFMake Nodes

To convert HTML containing inline SVG, pass your HTML string to htmlToPdfmake along with the window object (required for DOM parsing):

const html = `
  <div>
    <h2>Chart</h2>
    <svg width="120" height="120" viewBox="0 0 120 120">
      <circle cx="60" cy="60" r="50" stroke="green"
              stroke-width="4" fill="yellow" />
    </svg>
  </div>
`;

const result = htmlToPdfmake(html, { window });
console.log(result);
/* → [
      { text: 'Chart', style: ['html-h2'] },
      { svg: '<svg width="120" height="120"…>', nodeName: 'SVG',
        style: ['html-svg'] }
    ] */

The function returns an array of PDFMake nodes where the SVG element is represented as an object with the svg property containing the raw markup.

Rendering SVG in PDF Documents

Once converted, pass the resulting array directly to PDFMake's content property. PDFMake renders the svg string as vector graphics without rasterization:

const pdfMake = require('pdfmake/build/pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts');
pdfMake.vfs = pdfFonts;

const docDefinition = {
  content: htmlToPdfmake(html, { window })
};

pdfMake.createPdf(docDefinition).download('chart.pdf');

This approach works in both browser and Node.js environments, provided your PDFMake version supports the svg property (available in recent releases).

Styling and Configuration Options

Default CSS Classes

By default, html-to-pdfmake adds the CSS class html-svg to every converted SVG node. This allows you to target SVG elements with PDFMake style definitions:

const styles = {
  'html-svg': {
    alignment: 'center',
    margin: [0, 10, 0, 10]
  }
};

Removing Tag Classes

To disable the automatic html-svg class and prevent it from appearing in the output, set removeTagClasses: true in the options:

const doc = htmlToPdfmake(html, { window, removeTagClasses: true });
/* The resulting SVG node will not contain the `style:['html-svg']` entry */

Summary

• SVG Handling: The converter processes <svg> tags in index.js by extracting outerHTML and stripping whitespace with /\n(\s+)?/g
• Output Format: SVG nodes contain {svg: '<markup>', nodeName: 'SVG', style: ['html-svg']}
• Vector Rendering: PDFMake renders the SVG string as native vector graphics, not raster images
• Styling Hook: The html-svg class is applied by default unless removeTagClasses: true is specified

Frequently Asked Questions

Does html-to-pdfmake support external SVG files referenced via <img> tags?

No, the library only processes inline SVG elements embedded directly in the HTML. External SVG files referenced through <img src="..."> tags are not automatically fetched and converted to vector graphics; they may be treated as standard images depending on your PDFMake configuration.

Are SVG images rasterized in the generated PDF?

No, PDFMake receives the raw SVG markup string and renders it as native vector graphics. This preserves infinite resolution and small file sizes, unlike rasterized PNG or JPEG images.

Can I apply custom CSS classes to SVG elements?

Yes, you can add custom classes to your SVG elements using the class attribute in your HTML. These classes will be included in the style array alongside the default html-svg class, allowing you to define specific styling rules in your PDFMake document definition.

What PDFMake version is required for SVG support?

Most recent PDFMake releases include support for the svg property in document definition nodes. Ensure you are using an up-to-date version of PDFMake to guarantee that vector graphics render correctly in your generated PDFs.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}