Vector Canvas Drawing and SVG Node Support in pdfmake

pdfmake offers two distinct approaches to vector graphics. The canvas node lets you draw primitive shapes — lines, rectangles, ellipses, and polylines — using a declarative JSON API. The svg node embeds a full SVG string, which is rendered using the optional svg-to-pdfkit adapter and is ideal for embedding charts or icon libraries.

SVG node

Pass a raw SVG string to the svg property. pdfmake delegates rendering to svg-to-pdfkit, which must be installed separately to keep the main bundle small.

const docDefinition = {
  content: [
    'SVG nodes behave similar to images by supporting width/height or fit',
    'Note that before you can use SVG nodes you must install svg-to-pdfkit',
    {
      svg: '<svg width="200" height="200"><circle cx="100" cy="100" r="80" fill="steelblue"/></svg>',
      width: 200,
      height: 200
    }
  ]
};

SVG sizing

The same sizing model used for images applies to SVG nodes:

// Exact dimensions (may distort if aspect ratio differs)
{ svg: mySvgString, width: 600, height: 400 }

It is not yet possible to reference external SVG files or define a library of named SVGs in the document definition. The svg property must be an inline SVG string.

Canvas node

The canvas node draws one or more vector shapes from a JSON array. Each shape object has a type property followed by shape-specific geometry and style properties.

const docDefinition = {
  content: [
    {
      canvas: [
        // shapes go here...
      ]
    }
  ]
};

Line

{
  type: 'line',
  x1: 40, y1: 60,
  x2: 260, y2: 60,
  lineWidth: 3
}

With a round cap:

{
  type: 'line',
  x1: 40, y1: 80,
  x2: 260, y2: 80,
  lineWidth: 10,
  lineCap: 'round'
}

With a square cap:

{
  type: 'line',
  x1: 40, y1: 100,
  x2: 260, y2: 100,
  lineWidth: 10,
  lineCap: 'square'
}

Property	Description
`x1`, `y1`	Start point
`x2`, `y2`	End point
`lineWidth`	Stroke width in points
`lineColor`	Stroke color string
`lineCap`	`'butt'` (default), `'round'`, or `'square'`
`dash`	`{ length: N }` or `{ length: N, space: M }` for dashed lines

Rectangle

{
  type: 'rect',
  x: 0,
  y: 0,
  w: 310,
  h: 290,
  r: 5,              // corner radius
  dash: { length: 5 },
  lineColor: 'blue'
}

Filled rectangle:

{
  type: 'rect',
  x: 1,
  y: 1,
  w: 308,
  h: 288,
  r: 4,
  lineColor: 'red',
  color: '#ffffe0'
}

Linear gradient fill

Pass an array of color stops to linearGradient:

{ type: 'rect', x: 10, y: 200, w: 100, h: 10, linearGradient: ['red', 'blue'] }
{ type: 'rect', x: 10, y: 215, w: 100, h: 10, linearGradient: ['red', 'green', 'blue'] }
{ type: 'rect', x: 10, y: 230, w: 100, h: 10, linearGradient: ['red', 'yellow', 'green', 'blue'] }

Pattern fill

{
  type: 'rect',
  x: 10, y: 250, w: 50, h: 30,
  color: ['stripe45d', 'blue']
}

Property	Description
`x`, `y`	Top-left corner
`w`, `h`	Width and height
`r`	Corner radius
`color`	Fill color (string or pattern array)
`lineColor`	Stroke color
`lineWidth`	Stroke width
`fillOpacity`	Fill opacity `0`–`1`
`linearGradient`	Array of color stops
`dash`	Dash descriptor

Ellipse

{
  type: 'ellipse',
  x: 150, y: 140,
  color: 'red',
  fillOpacity: 0.5,
  r1: 80, r2: 60
}

Ellipse with a linear gradient:

{
  type: 'ellipse',
  x: 260, y: 140,
  r1: 30, r2: 20,
  linearGradient: ['red', 'green', 'blue', 'red']
}

Property	Description
`x`, `y`	Center point
`r1`	Horizontal radius
`r2`	Vertical radius (omit for circle)
`color`	Fill color
`lineColor`	Stroke color
`lineWidth`	Stroke width
`fillOpacity`	Fill opacity
`linearGradient`	Array of color stops

Polyline

A polyline connects an ordered array of { x, y } points. Set closePath: true to connect the last point back to the first.

// Open polyline (unfilled)
{
  type: 'polyline',
  lineWidth: 3,
  closePath: true,
  points: [
    { x: 10, y: 10 },
    { x: 35, y: 40 },
    { x: 100, y: 40 },
    { x: 125, y: 10 }
  ]
}

Filled polyline with separate stroke color:

{
  type: 'polyline',
  lineWidth: 2,
  color: 'blue',
  lineColor: 'red',
  points: [
    { x: 10, y: 110 },
    { x: 35, y: 140 },
    { x: 100, y: 140 },
    { x: 125, y: 110 },
    { x: 10, y: 110 }
  ]
}

Property	Description
`points`	Array of `{ x, y }` objects
`closePath`	Connect last point to first
`color`	Fill color
`lineColor`	Stroke color
`lineWidth`	Stroke width
`fillOpacity`	Fill opacity

Full canvas example

The following example combines all four shape types to produce a mixed-shape drawing:

const docDefinition = {
  content: [
    {
      canvas: [
        // Outer dashed rectangle
        {
          type: 'rect',
          x: 0, y: 0, w: 310, h: 290, r: 5,
          dash: { length: 5 },
          lineColor: 'blue'
        },
        // Filled inner rectangle
        {
          type: 'rect',
          x: 1, y: 1, w: 308, h: 288, r: 4,
          lineColor: 'red',
          color: '#ffffe0'
        },
        // Closed polyline (triangle-ish shape)
        {
          type: 'polyline',
          lineWidth: 3,
          closePath: true,
          points: [{ x: 10, y: 10 }, { x: 35, y: 40 }, { x: 100, y: 40 }, { x: 125, y: 10 }]
        },
        // Filled polyline
        {
          type: 'polyline',
          lineWidth: 2,
          color: 'blue',
          lineColor: 'red',
          points: [{ x: 10, y: 110 }, { x: 35, y: 140 }, { x: 100, y: 140 }, { x: 125, y: 110 }, { x: 10, y: 110 }]
        },
        // Lines with different caps
        { type: 'line', x1: 40, y1: 60, x2: 260, y2: 60, lineWidth: 3 },
        { type: 'line', x1: 40, y1: 80, x2: 260, y2: 80, lineWidth: 10, lineCap: 'round' },
        { type: 'line', x1: 40, y1: 100, x2: 260, y2: 100, lineWidth: 10, lineCap: 'square' },
        // Semi-transparent ellipse
        { type: 'ellipse', x: 150, y: 140, color: 'red', fillOpacity: 0.5, r1: 80, r2: 60 },
        // Plain rectangle
        { type: 'rect', x: 150, y: 200, w: 150, h: 50 },
        // Gradient rectangles
        { type: 'rect', x: 10, y: 200, w: 100, h: 10, linearGradient: ['red', 'blue'] },
        { type: 'rect', x: 10, y: 215, w: 100, h: 10, linearGradient: ['red', 'green', 'blue'] },
        // Gradient ellipse
        { type: 'ellipse', x: 260, y: 140, r1: 30, r2: 20, linearGradient: ['red', 'green', 'blue', 'red'] },
        // Pattern fill
        { type: 'rect', x: 10, y: 250, w: 50, h: 30, color: ['stripe45d', 'blue'] }
      ]
    },
    'This text is rendered below the canvas'
  ],
  patterns: {
    stripe45d: {
      boundingBox: [1, 1, 4, 4],
      xStep: 3,
      yStep: 3,
      pattern: '1 w 0 1 m 4 5 l s 2 0 m 5 3 l s'
    }
  }
};

Using relativePosition for chart axes

relativePosition is useful when building charts with canvas + text because the text position is known only at runtime. relativePosition offsets the node from where it would naturally appear:

// Axis tick label offset from natural flow position
{
  text: '2016',
  fontSize: 8,
  relativePosition: { x: left + yAxisWidth + tick.x - 9, y: top + height - xAxisHeight + tickSize + 2 }
}

Combine a { stack: [textNodes] } with a { canvas: [shapeNodes] } inside the same column or content array to overlay chart labels on canvas drawings without using absolute positioning.

Getting Started

Document Definition

Content Elements

Advanced Features

API Reference

Vector Canvas Drawing and SVG Node Support in pdfmake

SVG node

SVG sizing

Canvas node

Line

Rectangle

Linear gradient fill

Pattern fill

Ellipse

Polyline

Full canvas example

Using relativePosition for chart axes

Build docs developers (and LLMs) love

Getting Started

Document Definition

Content Elements

Advanced Features

API Reference

Documentation Index

​SVG node

​SVG sizing

​Canvas node

​Line

​Rectangle

​Linear gradient fill

​Pattern fill

​Ellipse

​Polyline

​Full canvas example

​Using relativePosition for chart axes

Build docs developers (and LLMs) love

SVG node

SVG sizing

Canvas node

Line

Rectangle

Linear gradient fill

Pattern fill

Ellipse

Polyline

Full canvas example

Using relativePosition for chart axes