Incrustar SVG en ReactJS

¿Es posible incrustar el marcado SVG en un componente ReactJS?

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

Resultados en el error:

Los atributos del espacio de nombres no son compatibles. ReactJSX no es XML.

¿Cuál es la forma más ligera de hacer esto? Usar algo como React ART es una exageración para lo que estoy tratando de hacer.

Actualizar 2016-05-27

A partir de React v15, el soporte para SVG en React es (cercano a?) 100% de paridad con el soporte actual del navegador para SVG ( fuente ). Solo necesita aplicar algunas transformaciones de sintaxis para que sea compatible con JSX, como ya tiene que hacer para HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}}). Para cualquier atributo de espacio de nombres (separados por dos puntos), por ejemplo xlink:href, elimine :y capitalice la segunda parte del atributo, por ejemplo xlinkHref. He aquí un ejemplo de un SVG con <defs>, <use>y estilos en línea:

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

Demostración de codepen de trabajo

Para obtener más detalles sobre soporte específico, consulte la lista de documentos de atributos SVG admitidos . Y aquí está el problema (ahora cerrado) de GitHub que rastreó el soporte para los atributos SVG de espacios de nombres.

Respuesta anterior

Puede hacer una incrustación SVG simple sin tener que usar dangerouslySetInnerHTMLsimplemente quitando los atributos del espacio de nombres. Por ejemplo, esto funciona:

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

En ese momento, puede pensar en agregar accesorios como fill, o cualquier otra cosa que pueda ser útil para configurar.

Si solo tiene una cadena de svg estática que desea incluir, puede usar dangerouslySetInnerHTML:

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

y React incluirá el marcado directamente sin procesarlo en absoluto.

Según un desarrollador de react , no necesita el espacio de nombres xmlns. Si necesita el atributo xlink:href, puede usar xlinkHref de react 0.14

Ejemplo

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

Si desea cargarlo desde un archivo, puede intentar usar React-inlinesvg , que es bastante simple y directo.

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>