CODEWITHSUNDEEP
reactjssvg
Pratheek R
Pratheek R

Reputation: 73

How to display an <svg> tag getting as a response from an api in React

This is the response I'm getting from the api and I want to display this svg in its full and correct format on my web page. I'm saving this response in a state called avatars

avatars: "<svg viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg"><g 
transform="translate(40, 36)"><path d="M100 0C69.072 0 44 25.072 44 56v6.166c-5.675.952-10 5.888-10 
11.834v14c0 6.052 4.48 11.058 10.305 11.881 2.067 19.806 14.458 36.541 31.695 44.73V163h-4c-39.764 0- 
72 32.236-72 72v9h200v-9c0-39.764-32.236-72-72-72h-4v-18.389c17.237-8.189 29.628-24.924 31.695- 
44.73C161.52 99.058 166 94.052 166 88V74c0-5.946-4.325-10.882-10-11.834V56c0-30.928-25.072-56-56-56z" 
fill="#614335"/><path d="M76 144.611v8A55.79 55.79 0 00100 158a55.789 55.789 0 0024-5.389v-8A55.789 
55.789 0 01100 150a55.79 55.79 0 01-24-5.389z" fill="#000" fill-opacity=".1"/></g><g transform=" ..."

Upvotes: 4

Views: 674

Answers (1)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

You can bind your svg tag (or any HTML) to dom like this:

<div dangerouslySetInnerHTML={{ __html: obj.avatars }}/>

You can find more about this on Official Documentation

Upvotes: 3

Related Questions