Add SVG markup to React component
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:
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 */}
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 likexml: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">
JSX uses the
className
attribute instead ofclass
. This is necessary becauseclass
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" />
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.