Display svg as icon or picture card etc

Configuration
1

hi,
i get a changeing svg icon from a json request from a rest sensor. I want to display it in my ui but im not really shure how i can do it.
i googled that generic camera integration could handle svg and display it as still_image_url and with template get the state from the rest sensor.
however the json reslult is not an url and a .svg file its just following xml (and doesent work):
<?xml version='1.0'?><svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' version='1.1' viewBox='0 0 100 100' shape-rendering='auto'><circle fill='rgb(255, 255, 255)' fill-opacity='0.75' stroke='rgb(82, 162, 82)' stroke-width='8' stroke-opacity='1' paint-order='fill' cx='50' cy='50' r='30'/><path fill='rgb(82, 162, 82)' stroke='rgb(82, 162, 82)' stroke-width='8' stroke-opacity='1' d='M50,20 A30,30,0,0,1,80,50 L80,20 Z' transform='rotate(-102,50,50)'/><text fill='rgb(82, 162, 82)' font-family='Segoe UI, Verdana, Helvetica, Sans-Serif' font-weight='bold' text-anchor='middle' dominant-baseline='central' font-size='40' x='50' y='48'>6</text></svg>

Any good suggestions how to handle it to ui?

2

A bit left field of an answer, but you might have a look at some of the work the author of this interesting project did, along with the ‘tool’ they developed to bring material design icons in (which I think are svg). Good hunting!