Implement SVG in ReactJS

Question

Is it possible to insert SVG markup into a ReactJS component?

render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } 

Error Result:

Namespace attributes are not supported. ReactJSX is not XML.

What is the easiest way to do this. Using something like React ART is too much for what I'm trying to do.

Answer 1

Update 2016-05-27

As with React v15, SVG support in React (close to?) Is 100% parity with current browser support for SVG ( source ), you just need to apply some syntax conversions to make it compatible with JSX, as you should already do for HTML ( class → className , style="color: purple" → style={{color: 'purple'}} ). For any attribute separated by names (colon), for example. xlink:href , remove : and head the second part of the attribute, for example. xlinkHref . Here's an example svg with <defs> , <use> and inline styles:

 function SvgWithXlink (props) { return ( <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" > <style> { `.classA { fill:${props.fill} }` } </style> <defs> <g id="Port"> <circle style={{fill:'inherit'}} r="10"/> </g> </defs> <text y="15">black</text> <use x="70" y="10" xlinkHref="#Port" /> <text y="35">{ props.fill }</text> <use x="70" y="30" xlinkHref="#Port" className="classA"/> <text y="55">blue</text> <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/> </svg> ); } 

Working demo codepen

See the list of supported SVG attributes for more information on specific support . And heres (now closed) a GitHub issue that tracked support for naming SVG attributes.

---

Previous answer

You can make SVG embedding easy without using dangerouslySetInnerHTML by simply separating the namespace attributes. For example, this works:

  render: function() { return ( <svg viewBox="0 0 120 120"> <circle cx="60" cy="60" r="50"/> </svg> ); } 

At this point, you might consider adding props, such as fill , or what else might be useful for customization.

Answer 2

If you only have the static svg string that you want to include, you can use dangerouslySetInnerHTML :

 render: function() { return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />; } 

and React will include markup directly without processing it.

Answer 3

According to the developer developer , you do not need the xmlns namespace. If you need the xlink:href attribute, you can use xlinkHref from reaction 0.14

Example

 Icon = (props) => { return <svg className="icon"> <use xlinkHref={ '#' + props.name }></use> </svg>; } 

Answer 4

If you want to download it from a file, you can try using React-inlinesvg - it's pretty simple and straightforward.

 import SVG from 'react-inlinesvg'; <SVG src="/path/to/myfile.svg" preloader={<Loader />} onLoad={(src) => { myOnLoadHandler(src); }} > Here some optional content for browsers that don't support XHR or inline SVGs. You can use other React components here too. Here, I'll show you. <img src="/path/to/myfile.png" /> </SVG> 

Answer 5

try this amazing web page https://svg2jsx.herokuapp.com/, which will change svg code to jsx in a few milliseconds