Add SVG markup to React component

Question

I'm trying to make a react Component which is based on this CodePen markup.

My component looks like this:

import React from 'react';

class Arches extends React.Component {
    render(){
        return(/*markup from codepen*/);
    }
}

export default Arches;

But on render it breaks:

unexpected token (764:3)
  762 |     d="m 46.842051,219.06796 

What is the proper way to integrate SVG in a React component?

Answer 1

React does support SVG, but the main problem here is that JSX is not identical to HTML. You can't just copy-paste any old blob of HTML or SVG markup and expect it to work in JSX without some effort to clean it up. The main problems with this particular SVG snippet are:

1. JSX doesn't allow HTML-style comments, like this one from your example:

   <!-- Child Dentition -->
   

   You'll either need to remove these completely, or replace them with JSX Javascript-style comments:

   {/* Child Dentition */}
   

2. JSX doesn't support XML namespaces. So namespaced elements like here won't work:

   <metadata id="metadata8">
     <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>Human Dental Arches</dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
   

   In fact, if you look at the list of supported SVG tags, metadata is not even included, so this section can be removed outright since it doesn't affect the visual output anyway. And also note that namespaced attributes like xml:space won't work either:

   <text xml:space="preserve" x="87.802124" y="124.42228" style="font-size:10.13467216px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans">
   

3. JSX uses the className attribute instead of class. This is necessary because class is a reserved keyword in Javascript, so anything like this:

   <path class="tooth-11 tooth-11-parent" />
   

   Should become this:

   <path className="tooth-11 tooth-11-parent" />
   

4. The style attribute in JSX takes a Javascript object, not a string literal. So values like this:

   <path style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
   

   Will need to be turned into:

   <path style={{fill: 'none', stroke: '#000000', strokeWidth: 1, strokeLinecap: 'round', strokeLinejoin: 'miter', strokeMiterlimit: 4, strokeOpacity: 1, strokeDasharray: 'none'}} />
   

Okay, that's a lot of changes! But as a reward for reading this far, I can let you know there's an easy way to make most of these transformations: this page on the React documentation site will let you paste in arbitrary HTML snippets and output the corresponding JSX. It seems this doesn't take care of the namespace issues I mentioned above, but with a few manual fixes you can end up with some valid JSX that will display nicely.