# How to Handle SVG Images in html-to-pdfmake
> Learn how to handle SVG images in html-to-pdfmake. Convert inline SVGs directly to PDFMake vector graphics nodes for seamless PDF generation with this quick guide.
- Repository: [Aymeric/html-to-pdfmake](https://github.com/aymkdn/html-to-pdfmake)
- Tags: how-to-guide
- Published: 2026-02-26
---
**TLDR:** `html-to-pdfmake` converts inline `` 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 `` tag, it enters the dedicated **SVG case** in [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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:
```javascript
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):
```javascript
const html = `
Chart
`;
const result = htmlToPdfmake(html, { window });
console.log(result);
/* → [
{ text: 'Chart', style: ['html-h2'] },
{ svg: '', 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:
```javascript
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:
```javascript
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:
```javascript
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 `` tags in [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js) by extracting `outerHTML` and stripping whitespace with `/\n(\s+)?/g`
- **Output Format**: SVG nodes contain `{svg: '', 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 `