Icon inside a SVG circle progress bar

[HUSTLE HARD]

Hi i am trying to add a small icon inside my svg radial progress bar..however simply adding in a img tag breaks the design.

<svg height="50" width="50" class="progress blue noselect" data-progress="'.$brperc.'" viewbox="0 0 80 80">
       <path class="track" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
        <path class="fill" d="M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0" />
        <text class="value" style="font-size:16px;" x="50%" y="55%">0%</text>

      </svg>

var forEach = function (array, callback, scope) {
	for (var i = 0; i < array.length; i++) {
		callback.call(scope, i, array[i]);
	}
};
window.onload = function(){
	var max = -219.99078369140625;
	forEach(document.querySelectorAll('.progress'), function (index, value) {
	percent = value.getAttribute('data-progress');
		value.querySelector('.fill').setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent) / 100) * max);
		value.querySelector('.value').innerHTML = percent + '%';
	});
}

I want the end result like below..

 

 

[URBANZ]

main thing with svg is img tag wont work you need to use the correct formatting so it would be 

<image xlink:href="URL HERE" width="WIDTH" height="HEIGHT"/>

you can also use 

clip-path="url(ELEMENT)"

if you want it to clip to an element.

if used correctly then you get result like below

Edited December 2, 2020 by urbanmafia

[Karma]

I actually like this, its classy good job. 🙂

[peterisgb]

I did this on my last game.

[Magictallguy]

5 hours ago, peterisgb said:

I did this on my last game.

Awesome. How about helping the OP achieve the same effect? 😉