Why does svg lose its quality when resized?

Question

css

I export images in svg format from Figma. On the mobile version, you need to reduce the size of the picture, but it becomes noticeably clear that the picture is losing quality. What could be the problem? I opened the picture in the editor and it seems that this is not vector graphics, but just a picture that was embedded in the svg format.
Here is the svg part

<svg width="287" height="51" viewBox="0 0 287 51" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="287" height="51" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.00036227) scale(0.000577367 0.00324911)"/>
</pattern>
<image id="image0" width="1732" height="308" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABsQAAAE0CAIAAAAUlMHSAAAKN2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAeJydlndUU9kWh8  ...

What to do in such a situation? Is it possible that the image is not imported correctly?

Answer 1

this is not a feeling, you still have a png inside -

<image id="image0" width="1732" height="308" xlink:href="data:image/png;base64