Embedding images in SVG in React

Question

I am using SVG inside React, but the amount of SVG tags that ReactJS allows is limited and I don't see a way to embed an <image/> SVG tag inside my JSX.

I've also tried using a fill style on a rect set to a url of an image, but it doesn't work either. Is there a workaround for this?

SVG does not support pointing a fill to an image. You have to do it indirectly via a pattern. — Robert Longson, Feb 18 '15 at 13:15
http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image — Robert Longson, Feb 18 '15 at 13:22

score 2 · Answer 1 · answered Oct 23 '15 at 06:10

2

SVG Image is now supported in 0.14.

For prior versions, you can use dangerouslySetInnerHTML. For more about that, take a look at this issue:

https://github.com/facebook/react/issues/2069

answered Oct 23 '15 at 06:10

freddyrangel

1,353
1
11
20

Embedding images in SVG in React

1 Answers1