How to render an svg logo in React-pdf document in the dom?

Question

I have a project, where I am using React-pdf to generate a document. I want to add an SVG logo to this document. According to the React-pdf documentation, they have an element called Svg that is a container that defines a new coordinate system and viewport, and it is used as the outermost element of SVG documents. From what I understand I should somehow convert a normal svg to the type of element that React-pdf uses, in order to make it work? (If so, how could I accomplish this? Can I use some sort of external library?). My code is below(Now it gives me an error because I can`t use the Image from React-pdf to render svg. If I use the Image element with src of an image that is in the format .jpeg or .png it works.

import {
  Page,
  Text,
  View,
  Document,
  StyleSheet,
  Image,
  Svg,
  PDFViewer,
} from "@react-pdf/renderer";

...
  return (
    <div>
      <PDFViewer style={{ width: "98vw", height: "98vh" }}>
        <Document title="TITLE" author="AUTHOR">
          <Page size="A4" style={styles.page}>
            <View style={styles.section}>
              <Svg>
                <Image src={logoUrl} style={styles.logo} />
              </Svg>
              <Text>My PDF</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>
    </div>
  );
...

ImageMagick can convert an svg to a png. This answer might help: https://stackoverflow.com/questions/9853325/how-to-convert-a-svg-to-a-png-with-imagemagick — Mike Stratton, Aug 19 '22 at 04:57

IIWolF · Answer 1 · 2022-08-19T01:45:45.643

An easy way to do this is to put your SVG file in a folder in your React Project. And then import it into your app.js or wherever you need it using an img tag

import myIcon from 'icons/myIcon.svg';

import {
  Page,
  Text,
  View,
  Document,
  StyleSheet,
  Image,
  Svg,
  PDFViewer,
} from "@react-pdf/renderer";
import myIcon from 'icons/myIcon.svg'
...
  return (
    <div>
      <PDFViewer style={{ width: "98vw", height: "98vh" }}>
        <Document title="TITLE" author="AUTHOR">
          <Page size="A4" style={styles.page}>
            <View style={styles.section}>
              //CALL YOUR SVG USING IMG TAG
              <img src={myIcon} />

              <Text>My PDF</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>
    </div>
  );
...

I replaced your SVG TAG with <img src={myIcon} />

Jeremy Threlfall · Answer 2 · 2022-11-03T14:09:35.830

You will need to use actual svg code and any svg related tags. It is all documented pretty well here: https://react-pdf.org/svg

Example in React:

import React from 'react';
import {
  Svg,
  Polygon,
  Rect,
  Page,
  Document,
} from '@react-pdf/renderer';

const ExampleSvg = () => (
  <Svg width="200" height="200" viewBox="-100 -100 200 250">
    <Polygon points="0,0 80,120 -80,120" fill="#234236" />
    <Polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
    <Polygon points="0,-80 40,0 -40,0" fill="#38755B" />
    <Rect x="-20" y="120" width="40" height="30" fill="#A32B2D" />
  </Svg>
);

const PdfToShow = () => (
  <Document>
    <Page size="A4">
      <ExampleSvg />
    </Page>
  </Document>
);

export default PdfToShow;

OP asked how to use an existing SVG or how to convert it to this format. — blimpse, Jul 25 '23 at 16:20

score 0 · Answer 3 · answered Aug 18 '22 at 13:42

0

This is very old but, as far as I can see the Element from react pdf expects actual svg code, you are giving it and img tag which is invalid.

answered Aug 18 '22 at 13:42

niklasbec

834
5
12

score -1 · Answer 4 · answered Aug 19 '22 at 04:58

-1

Image Magick can convert your svg to a png. This answer might help: How to convert a SVG to a PNG with ImageMagick?

answered Aug 19 '22 at 04:58

Mike Stratton

463
1
7
20

How to render an svg logo in React-pdf document in the dom?

4 Answers4