Skip to main content

SVG

The SVG building block lets you embed SVG graphics in your template. You can paste static SVG markup or load it dynamically from your data.

Adding an SVG​

Drag the SVG icon from the toolbar and drop it onto the canvas.

Properties​

When you select an SVG element, the properties panel opens on the side with the following options:

  • Margins — Set the left (L), top (T), right (R), and bottom (B) margins around the SVG element.
  • Alignment — Align the SVG to the left, center, or right.
  • SVG source — Choose how to provide the SVG content (see below).
  • Size type — Controls how the SVG is sized:
    • Normal — The SVG is displayed at a fixed width and height that you specify. The aspect ratio is always preserved — changing one dimension automatically updates the other.
    • Fit — The SVG is constrained by a maximum width and maximum height. It renders at its intrinsic size but will not exceed either limit.
  • Visible when — An expression that controls whether this element appears in the generated PDF. See Conditional visibility.
  • Delete — Removes the element from the template.

SVG source​

The SVG source section has two tabs:

Static​

Paste SVG markup directly into the text area. When you paste valid SVG content, the width and height are automatically set from the SVG's intrinsic dimensions (via its viewBox or width/height attributes).

The maximum SVG markup length is 500,000 characters.

Performance

Large or complex SVGs with many paths can slow down PDF generation. Simplify your SVGs when possible — for example, by merging paths or removing unnecessary metadata.

From data​

Load the SVG markup from your dynamic data. Set the Data field to the name of the field in your dynamic data that contains the SVG string.

For example, if your dynamic data looks like this:

{
  "chartSvg": "<svg viewBox='0 0 200 100'>...</svg>"
}

You would set the data field to chartSvg.

Dynamic data​

Unlike other building blocks where you type placeholders inline, SVGs use the From data tab in the properties panel to reference dynamic data. See the section above for details.

To learn more about dynamic data, see the Dynamic data page.