SVG issues

[TroyAlford]

From @jasonpacheco -

We would like users to add their own SVG markup inline with the JSX templates but the parser can't parse inline SVG unless it is passed as a unique component into component.

[TroyAlford]

I am not seeing any problems, using it on my end. Can you post an example of what's not working, please? The following is rendering fine for me:

<JsxParser
  jsx={`
    <svg version="1.1"
      baseProfile="full"
      width="300" height="200"
      xmlns="http://www.w3.org/2000/svg">
      <rect width="100%" height="100%" fill="red" />
      <circle cx="150" cy="100" r="80" fill="green" />
      <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
    </svg>
  `}
/>

Just as a guess - if you're using namespaces in your property names, that may be the issue. I.E., as described in facebook/react#2250 and facebook/react#4908 - switching things like xlink:href to xlinkHref is the solution, if this is what's going on.

[jasonpacheco]

Hmm... I used the SVG workaround I mentioned earlier for production code; however, when I first opened the issue, I was playing around with a CodeSandbox and I couldn't get inline SVG to show up. For some reason, I can't get the initial issue to reproduce either. It's possible that some markup error on my end was preventing inline SVGs from displaying. I think this is a non-issue now and you can close this. Thank you for your help!

[TroyAlford]

Okay, np. Thanks for reporting - and if you see other issues, please feel free to raise them!