VS code isn't reading SVG file code from illustrator but it is from Figma?

Question

I'm building a React website in VS code.

I've gotten an SVG from Figma which I copy and paste the code into my component and it works just fine, this is the Figma svg code:

`<svg width="1440" height="363" viewBox="0 0 1440 363" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1440 27.4774C1352.73 19.8184 1122.41 49.0556 899.331 227.276C620.48 450.052 354.282 355.647 170.328 185.318C23.165 49.0556 -4.21721 8.32998 0.487081 5" stroke="#D96ED4" strokeOpacity="0.1" strokeWidth="10"/>
</svg>`

But then I export a similar SVG from Adobe Illustrator and it doesn't work at all, this is the Illustrator code:

`<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="269.3px" height="70.3px" viewBox="0 0 269.3 70.3" style="enable-background:new 0 0 269.3 70.3;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#E900DB;stroke-width:3;stroke-miterlimit:10;}
</style>
<path class="st0" d="M3.5,17.8c33.8,21.8,106.2,84.9,158.8,19.1s92.3-13,103.5-19.1"/>
</svg>`

I've tried export selection as SVG and grabbing the code that pops up after saving it as an SVG in illustrator and I get the same code.

If I open the svg with a browser it works just fine.

I'm using Illustrator 2021, I don't have Figma or I would just use that, clearly there is something wrong with the Adobe code, does anyone know how to export it properly?

Thanks in advance

Answer 1

Figured it out.

When trying to import an SVG into JSX like I am, once the image is ready in Illustrator, click file -> Export -> Export as -> select svg in the 'save as type' dropdown -> export then a new pop-up will appear in styling select presentation attributes instead of internal css -> click show code and hey presto your code will appear for you to copy and paste into your project -> then don't waste 6 hours of your life like I just did.