Need support for SVG images through content

[ridsashabbir]

I have content coming from API in the below format, and i want to display the image on screen

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="29.03" viewBox="0 0 40 29.03"> <g id="fish" transform="translate(-1 -7)"> <path id="Path_3692" data-name="Path 3692" d="M36.257,20.547H24V7l1.526.321A13.516,13.516,0,0,1,36.257,20.547Z" transform="translate(-8.162)" fill="#8f9f9f"/> <path id="Path_3693" data-name="Path 3693" d="M53.9,23.283a6.108,6.108,0,0,0-1.743,4.989,6.094,6.094,0,0,0,6.923,6.716,6.122,6.122,0,0,0-1.727-5.181l-.023-.023a2.1,2.1,0,0,1,0-3.025l.023-.023a6.122,6.122,0,0,0,1.727-5.181A6.122,6.122,0,0,0,53.9,23.283Z" transform="translate(-18.141 -5.144)" fill="#6c7f7f"/> <path id="Path_3694" data-name="Path 3694" d="M13,12V37.8c19.157,0,25.8-12.9,25.8-12.9S32.157,12,13,12Z" transform="translate(-4.259 -1.774)" fill="#a6c1c1"/> <path id="Path_3695" data-name="Path 3695" d="M13,12v6.158c19.157,0,25.8,6.744,25.8,6.744S32.157,12,13,12Z" transform="translate(-4.259 -1.774)" fill="#6c7f7f"/> <ellipse id="Ellipse_61" data-name="Ellipse 61" cx="7.741" cy="12.902" rx="7.741" ry="12.902" transform="translate(1 10.226)" fill="#ff8f82"/> <ellipse id="Ellipse_62" data-name="Ellipse 62" cx="6.451" cy="11.612" rx="6.451" ry="11.612" transform="translate(2.29 11.516)" fill="#fa5046"/> <ellipse id="Ellipse_63" data-name="Ellipse 63" cx="1.935" cy="2.58" rx="1.935" ry="2.58" transform="translate(6.806 20.547)" fill="#dceded"/> <path id="Path_3696" data-name="Path 3696" d="M11.58,33.451C10.157,33.451,9,32,9,30.226S10.157,27,11.58,27s2.58,1.447,2.58,3.226S13,33.451,11.58,33.451Zm0-5.161c-.7,0-1.29.886-1.29,1.935s.591,1.935,1.29,1.935,1.29-.886,1.29-1.935S12.28,28.29,11.58,28.29Z" transform="translate(-2.839 -7.098)" fill="#ff8f82"/> </g> </svg>