Svg

The <Svg /> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents.

import { Svg, Rect, Circle } from '@react-pdf/renderer';

const Canvas = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Rect x="0" y="0" width="120" height="60" fill="#c9c2b6" />
    <Circle cx="60" cy="30" r="22" fill="#e82200" />
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
width	The displayed width of the rectangular viewport	String, Number	undefined
height	The displayed height of the rectangular viewport	String, Number	undefined
viewBox	The SVG viewport coordinates for the current SVG fragment	String	undefined
preserveAspectRatio	How the svg fragment must be deformed if it is displayed with a different aspect ratio. See more	String	undefined
style	Defines SVG styles. See more	Object, Array	undefined

Valid props

On this page