Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there any more efficent way other than using dangerouslySetInnerHTML to set svg string?

See original GitHub issue

When I’m parsing markdown text, I will have a string whose content is a svg file, such as

<svg height="100" width="100">
<circle 
    cx="50" cy="50" r="40" 
    stroke="black" stroke-width="3" fill="red" />
</svg>

As far as now, it seems that the only way to render this svg string is to use dangerouslySetInnerHTML, I wanna to ask:

Will this way inefficent?
Is there any more efficent way in React?

Thanks for reading this issue. Looking forward your awesome answers.

Issue Analytics

State:
Created 5 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

5reactions

gaearoncommented, Aug 28, 2018

Shipping HTML parser to the client just to parse a pre-generated SVG seems excessive and would create a performance issue — unless you do it at compile time.

5reactions

gaearoncommented, Aug 28, 2018

There are no performance problems with doing this. But be careful to make sure the HTML string is coming from a trusted source since otherwise it will create a security issue.

Top Results From Across the Web

How do I use an SVG in React without using ... - Stack Overflow

Unfortunately it doesn't work unless I use dangerouslySetInnerHTML , so the icon shows up - however it appears broken. You can use the...

DOM Elements - React

React implements a browser-independent DOM system for performance and ... to use units other than “px”, specify the value as a string with...

Using dangerouslySetInnerHTML - Getting Started with DOM

Yes, dangerouslySetInnerHTML is a property and requires only a HTML element to render. 2. Is it OK to use dangerouslySetInnerHTML? Yes, it will ......

SVG tag -- creating SVG content on the fly - ReScript Forum

If you have a string that you want to render as HTML, then dangerouslySetInnerHTML is the only way to do that in React....

Let's talk about SVG - Medium

Loading an external SVG as a React Element · 1. Avoid using dangerouslySetInnerHTML · 2. Convert the SVG text to individual react elements...