Path

The <Path /> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.

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

const Curve = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Path
      d="M 8 46 C 32 46, 36 14, 60 14 S 88 46, 112 14"
      fill="none"
      stroke="#e82200"
      strokeWidth={3}
      strokeLinecap="round"
    />
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
d	This attribute defines the shape of the path. See more	String	undefined

Valid props

On this page