Adobe Illustrator SVG exports not displaying in VS Code React component while Figma SVGs work fine

Other Questions Figma
1

SVG Import Issue in React Development

I’m working on a React project using VS Code and ran into a strange problem with SVG graphics. When I copy SVG code from Figma and paste it directly into my React component, everything works perfectly.

Here’s an example of working Figma SVG code:

<svg width="800" height="200" viewBox="0 0 800 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M800 15.2C750.5 11.3 623.8 27.1 498.7 125.9C344.2 249.1 196.4 196.8 94.6 102.4C12.8 27.1 -2.3 4.6 0.27 2.8" stroke="#FF6B35" strokeOpacity="0.2" strokeWidth="8"/>
</svg>

But when I export the same type of graphic from Adobe Illustrator, the SVG doesn’t render at all in my React component:

<svg version="1.1" id="graphic_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320.5px" height="85.7px" viewBox="0 0 320.5 85.7" style="enable-background:new 0 0 320.5 85.7;" xml:space="preserve">
<style type="text/css">
    .curve0{fill:none;stroke:#FF6B35;stroke-width:4;stroke-miterlimit:10;}
</style>
<path class="curve0" d="M4.2,21.5c40.1,26.3,126.4,102.6,188.9,23.0s109.8-15.7,123.1-23.0"/>
</svg>

The weird thing is that the Illustrator SVG opens and displays correctly in web browsers. I’ve tried different export methods in Illustrator 2021 but keep getting similar code structure. Has anyone encountered this issue before or knows what makes Illustrator SVG exports incompatible with React components?

2

yeah, ive had the same issue too. react doesn’t recognize <style> tags, so your .curve0 class won’t show. just add the stroke props directly to the path like: stroke="#FF6B35" strokeWidth="4" fill="none" and remove the style block completely.

3

I’ve faced this exact issue with React as well. The primary culprit is the <style> block that Illustrator adds to the SVG; React doesn’t handle this during compilation, leading to the disappearance of styles like .curve0. I recommend removing the entire <style> section and assigning the relevant CSS properties directly to the path element: stroke="#FF6B35" strokeWidth="4" fill="none". Also, ensure you’re using strokeWidth instead of stroke-width to comply with JSX requirements. Additionally, feel free to eliminate any unnecessary XML namespace attributes. For a smoother experience, try exporting from Illustrator using the “SVG Tiny 1.1” profile, as it tends to produce cleaner code that integrates better with React.

4

This is a React JSX compatibility issue. Your Illustrator SVG uses HTML attributes that React doesn’t recognize. See how it exports class="curve0" instead of className="curve0"? Plus attributes like xml:space and xmlns:xlink cause parsing problems in React components. The inline <style> tag with CSS classes gets stripped out during React’s rendering too. Convert class to className and move your styling inline to the path element using the style prop instead of CSS classes. Also remove those problematic XML namespaces - they’re not needed for basic SVG rendering. Figma exports work better because they generate cleaner, React-friendly SVG code out of the box.