react: Missing SVG tags and attributes

Note from maintainers: Starting with React 15, we should have a complete support of the subset of SVG specifications that is actually implemented by browsers.

If you find a missing attribute, or if a tag does not work correctly, please write a comment below. Note that React.DOM.* factory functions might not provide all tags, but you should be able to use React.createFactory or React.createElement() directly for the missing ones. Or you can just use JSX which translates to React.createElement() and supports all tags inherently.

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 107 (24 by maintainers)

Commits related to this issue

Add vector-effect to SVG whitelist Requested in https://github.com/facebook/react/issues/1657#issuecomment-148420568 — committed to facebook/react by gaearon 8 years ago

Most upvoted comments

I noticed that there seems to be quite a lot of confusion about the xlink:href attribute. It is currently supported but you would need to write it in a different way:

<use xlinkHref="#shape" x="50" y="50" />

React will correctly turn that into xlink:href, even in 0.14.x. See this fiddle for an example.

gaearon on Mar 15, 2016

+1 for adding support for xmlns… In the mean time if anyone is interested in a workaround (which I needed to be able to support IE9-11) this is what I came up with:

// explicitly build the SVG to be rendered here so we don't lose the NS
const stringifiedSvg = `<svg xmlns="http://www.w3.org/2000/svg" class="svgClass">
                               <use xlink:href="#linkToSymbolId"></use>
                        <svg/>`

return <div dangerouslySetInnerHTML={{__html: stringifiedSvg}}/>

617dev on May 3, 2016

Yea, xmlns and xmlns:Xlink are missing. https://github.com/facebook/react/pull/6471 has some in progress work to add it.

zpao on Apr 12, 2016