Using svg into sharepoint webpart - reactjs

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.