javascript - Embedding SVG into ReactJS - Stack Overflow

admin管理员组

文章数量:1131554

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

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

Results in the error:

Namespace attributes are not supported. ReactJSX is not XML.

What is the lightest way of doing this. Using something like React ART is way overkill for what I'm trying to do.

Is it possible to embed 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>
  );
}

Results in the error:

Namespace attributes are not supported. ReactJSX is not XML.

What is the lightest way of doing this. Using something like React ART is way overkill for what I'm trying to do.

• javascript
• svg
• reactjs

Share Improve this question Follow edited Dec 15, 2022 at 13:37 Seyit Bilal 18533 silver badges1717 bronze badges asked May 1, 2014 at 5:29 nicholasnicholas 14.6k2222 gold badges8484 silver badges149149 bronze badges 2

• 2 Can you create a jsbin? It might be as simple as changing your opening SVG tag to just <svg id="Layer_1"> (or even better, without the id). Edit: here's an example: jsbin.com/nifemuwi/2/edit?js,output – Brigand Commented May 1, 2014 at 6:38
• @FakeRainBrigand Thanks! It was that simple in this case. Look at Ben's answer though. Good to know you can get around the jsx parsing when you need to. – nicholas Commented May 1, 2014 at 20:10

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 217

Update 2016-05-27

As of React v15, support for SVG in React is (close to?) 100% parity with current browser support for SVG (source). You just need to apply some syntax transformations to make it JSX compatible, like you already have to do for HTML (class → className, style="color: purple" → style={{color: 'purple'}}). For any namespaced (colon-separated) attribute, e.g. xlink:href, remove the : and capitalize the second part of the attribute, e.g. xlinkHref. Here’s an example of an 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 codepen demo

For more details on specific support, check the docs’ list of supported SVG attributes. And here’s the (now closed) GitHub issue that tracked support for namespaced SVG attributes.

---

Previous answer

You can do a simple SVG embed without having to use dangerouslySetInnerHTML by just stripping 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 which point you can think about adding props like fill, or whatever else might be useful to configure.

If you just have a static svg string you want to include, you can use dangerouslySetInnerHTML:

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

and React will include the markup directly without processing it at all.

According to a react developer, you dont need the namespace xmlns. If you need the attribute xlink:href you can use xlinkHref from react 0.14

Example

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

If you want to load it from a file, you may try to use React-inlinesvg - that's pretty simple and straight-forward.

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's 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>

You can import svg and it use it like a image

import chatSVG from '../assets/images/undraw_typing_jie3.svg'

And ise it in img tag

<img src={chatSVG} className='iconChat' alt="Icon chat"/>

The best way I found was this site

https://react-svgr.com/playground/

You copy an svg and it give you a react functional component with the svg transformed to react code.

There is a package that converts it for you and returns the svg as a string to implement into your reactJS file.

https://www.npmjs.com/package/convert-svg-react

本文标签： javascriptEmbedding SVG into ReactJSStack Overflow