How to render a SVG file

[soma83]

Any way to render any SVG file? The documentation talks about generating the svg directly on the document or using the <Image> tag, but this <Image> tag does not handle SVG files. How can I render a SVG file?

[coskuncakir]

Hello @soma83,

You can use the Svg components that react-pdf provided here; https://react-pdf.org/svg

in my case, I needed to render some icons and here is how i did

• import the necessary components

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

• convert the svg file that you want to use to jsx using react-pdf's components;

so something like below

<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"/></svg>

can be like below

 <Svg viewBox="0 0 24 24">
    <Path
      fill="#704845"
      d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
    />
  </Svg>

and that's it,
let me know if this works for you,
good luck

[stefan1575]

Can confirm that this works where we use viewBox for sizing and substituting path and svg with Path and Svg.

If anyone also using NextJS sees this and couldn't get to render <Image> components, this is a workaround if you are willing to convert your images to .svg.

import { Page, Document, Svg, Path } from "@react-pdf/renderer"

const Logo = () => {
  return (
    <Svg viewBox="0 0 511 205">
      <Path d="M0 0 C168.63 0 337.26 0 511 0 C511 67.65 511 135.3 511 205 C342.37 205 173.74 205 0 205 C0 137.35 0 69.7 0 0 Z " fill="#FEFEFE" transform="translate(0,0)" />
      // ...
    </Svg>
    )
}

const PDF = () => {
    return (
    <Document>
      <Page>
       <Logo />
      </Page>
    </Document>
  )
}

export default PDF