Why is the data url image not scaled in the block?

Question

css

There is a 32px by 32px block. In its properties I write:

background: url(data:image/svg+xml;base64,......) no-repeat;
background-size: cover;

The SVG itself has the same dimensions as the block, and everything seems to be fine, but when scaling, the image does not move, it seems to be fixed and remains the same size. I don't understand what to do? Of course, you can insert it directly into the SVG code, and everything is ok, but you need it through CSS.
Thank you in advance!

Answer 1

https://codepen.io/nazares/pen/BQKOeL