title: How to render an svg logo in React-pdf document in the dom?
body: <p>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.</p>
  <pre><code>import {
    Page,
    Text,
    View,
    Document,
    StyleSheet,
    Image,
    Svg,
    PDFViewer,
  } from &quot;@react-pdf/renderer&quot;;
  
  ...
    return (
      &lt;div&gt;
        &lt;PDFViewer style={{ width: &quot;98vw&quot;, height: &quot;98vh&quot; }}&gt;
          &lt;Document title=&quot;TITLE&quot; author=&quot;AUTHOR&quot;&gt;
            &lt;Page size=&quot;A4&quot; style={styles.page}&gt;
              &lt;View style={styles.section}&gt;
                &lt;Svg&gt;
                  &lt;Image src={logoUrl} style={styles.logo} /&gt;
                &lt;/Svg&gt;
                &lt;Text&gt;My PDF&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/Page&gt;
          &lt;/Document&gt;
        &lt;/PDFViewer&gt;
      &lt;/div&gt;
    );
  ...
  </code></pre>