Components

SVG Components

vue-pdf provides full SVG support through a set of native SVG components. These render as vector graphics in the PDF — infinitely scalable and precise.

Available SVG Components

<Svg> — SVG container with width/height and viewBox
<G> — Group element for organizing and transforming children
<Path> — Draw paths using SVG path data
<Rect> — Rectangle with optional rounded corners (rx, ry)
<Line> — Straight line between two points
<Circle> — Circle with center (cx, cy) and radius
<Ellipse> — Ellipse with center (cx, cy) and radii (rx, ry)
<Polygon> — Closed shape from a list of points
<Polyline> — Open shape from a list of points
<Tspan> — Inline text spans inside SVG text
<Defs> — Definitions container for gradients and clips
<ClipPath> — Clipping path definition
<LinearGradient> — Linear gradient definition
<RadialGradient> — Radial gradient definition
<Stop> — Gradient color stop
<Marker> — Arrowhead/end marker for lines

Common SVG Component Props

All shape components (Path, Rect, Circle, etc.) support:

Prop	Type	Default	Description
`style`	`Style`	—	Styles including fill, stroke, strokeWidth, and opacity.
`fill`	`string`	—	Fill color or gradient reference.
`stroke`	`string`	—	Stroke color.
`strokeWidth`	`number`	—	Stroke width in points.
`strokeLinecap`	`'butt' \| 'round' \| 'square'`	—	Line cap style.
`strokeLinejoin`	`'miter' \| 'round' \| 'bevel'`	—	Line join style.
`strokeDasharray`	`string`	—	Dash pattern (e.g. '5,5').
`opacity`	`number`	—	Element opacity (0-1).
`fillOpacity`	`number`	—	Fill opacity (0-1).
`strokeOpacity`	`number`	—	Stroke opacity (0-1).

Basic SVG Example

vue

<template>
  <Document>
    <Page size="A4">
      <Svg :width="200" :height="200" viewBox="0 0 200 200">
        <Rect
          :x="10" :y="10" :width="180" :height="180"
          fill="#f0f0f0" stroke="#333" :strokeWidth="2"
          :rx="8"
        />
        <Circle
          :cx="100" :cy="100" :r="50"
          fill="#2563eb" :fillOpacity="0.8"
        />
        <Line
          :x1="20" :y1="20" :x2="180" :y2="180"
          stroke="#dc2626" :strokeWidth="3"
        />
      </Svg>
    </Page>
  </Document>
</template>

Path Component

vue

<template>
  <Document>
    <Page size="A4">
      <Svg :width="100" :height="100" viewBox="0 0 24 24">
        <Path
          d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
          fill="#eab308" stroke="#ca8a04" :strokeWidth="0.5"
        />
      </Svg>
    </Page>
  </Document>
</template>

Gradients

vue

<template>
  <Document>
    <Page size="A4">
      <Svg :width="200" :height="100" viewBox="0 0 200 100">
        <Defs>
          <LinearGradient id="myGrad" x1="0" y1="0" x2="1" y2="0">
            <Stop offset="0%" stopColor="#dc2626" />
            <Stop offset="50%" stopColor="#f97316" />
            <Stop offset="100%" stopColor="#eab308" />
          </LinearGradient>
        </Defs>
        <Rect x="0" y="0" width="200" height="100" fill="url(#myGrad)" :rx="8" />
      </Svg>
    </Page>
  </Document>
</template>

Polygon

vue

<template>
  <Document>
    <Page size="A4">
      <Svg :width="100" :height="100" viewBox="0 0 100 100">
        <Polygon
          points="50,5 95,30 95,70 50,95 5,70 5,30"
          fill="#2563eb" stroke="#1e3a5f" :strokeWidth="2"
        />
      </Svg>
    </Page>
  </Document>
</template>