ReactJSへのSVGの埋め込み

SVGマークアップをReactJSコンポーネントに埋め込むことはできますか？

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

エラーの結果：

名前空間属性はサポートされていません。ReactJSXはXMLではありません。

これを行う最も簡単な方法は何ですか。React ARTのようなものを使用することは、私がやろうとしていることに対してはやり過ぎです。

更新2016-05-27

React v15では、ReactでのSVGのサポートは（ほぼ？）、現在のブラウザーによるSVG（ソース）のサポートと100％同等です。すでにHTMLで行う必要があるように（class→ className、style="color: purple"→ style={{color: 'purple'}}）、JSX互換にするためにいくつかの構文変換を適用する必要があるだけです。たとえば、名前空間付き（コロンで区切られた）属性の場合はxlink:href、を削除し:、属性の2番目の部分を大文字にします（例：）xlinkHref。ここで、SVGの例だ<defs>、<use>と、インラインスタイル：

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>
    );
}

動作するコードペンのデモ

特定のサポートの詳細については、サポートされているSVG属性のドキュメントのリストを確認してください。そして、名前空間のSVG属性のサポートを追跡した（現在はクローズされている）GitHubの問題を次に示します。

前の答え

dangerouslySetInnerHTML名前空間属性を削除するだけで、使用する必要なく簡単なSVG埋め込みを実行できます。たとえば、これは動作します：

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

その時点でfill、のような小道具やその他の構成に役立つと思われるものを追加することを考えることができます。

含める静的svg文字列がある場合は、次のように使用できますdangerouslySetInnerHTML。

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

そしてReactはマークアップをまったく処理せずに直接含めます。

反応開発者によると、名前空間xmlnsは必要ありません。この属性が必要な場合はxlink:href、react 0.14のxlinkHrefを使用できます。

例

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

ファイルからロードしたい場合は、React-inlinesvgを使用してみてください。これは非常にシンプルで簡単です。

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>