Using svg into sharepoint webpart

Question

I am developing a webpart with for SharePoint. I use the SharePoint Framework, TypeScript and ReactJS. I need to use svg image. But when I paste my svg image code into my webpart, I have error and I can't build. For the test, I use the base webpart generate by SharePoint when we create a new project.

When I build, I have this kind of error : Error - typescript - src\\webparts\\graph\\components\\Graph.tsx(28,8): error TS1003: Identifier expected.

I created my svg with inkscape and I edited it to work with ReactJS.

Could you help me ?

The svg :

  <svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="100%"
   height="100%"
   id="svg2">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <path
       d="m 560,315.21933 a 265.71429,234.28572 0 1 1 -531.428589,0 265.71429,234.28572 0 1 1 531.428589,0 z"
       id="path2985"
       style={{fill:#ffff00;fill-opacity:1;stroke:none}} />
  </g>
</svg>

Answer 1

I finally find a solution. I use svg to react cli ( https://www.npmjs.com/package/svg-to-react-cli ) to transform my svg into react component. Then I remove the tag defs and metadata. To finish, I paste my svg code in my react component. And it works fine.