Edit .svg to animate - XML - css

Question

Can somebody help me to properly rotate the disk of this image ?
I have tried somethig ( if you run the code ), but whithout succes. But there is a beating of the disk
It should look like this: https://mensis.ro/wp-content/uploads/2019/12/Logo-Doors.gif
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="10s"
repeatCount="indefinite" />
Full code: https://pastebin.com/d7Ur54ZB
Thank you !

Answer 1

In order to prevent disc beating, it is necessary to correctly indicate the center of rotation.
CSS rule helps you do this: transform-box: fill-box
Add to your application:
#disk{
transform-origin: center center;
transform-box: fill-box;
animation: rotate_disk 10s linear forwards infinite;
}
#keyframes rotate_disk {
100% {
transform: rotateZ(360deg);
}
}
CODEPEN

Answer 2

In order not to mix two different solutions and facilitate the choice of one of them, this option is drawn up as a separate topic.
In the first solution, the bitmaps were converted to base64 format. There is no gain from this solution since SVG in this case behaves like a normal raster image.
But the file size turned out to be very large - 132k therefore it is inconvenient to read and edit it.
Consider a solution for animating bitmap images.
Raster images can be added inside SVG using the <image> tag
And use the usual CSS rules for animation
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="499.968" height="281.232" viewBox="0 0 1920 1080">
<defs>
<style>
.cls-1 {
opacity: 0.96;
}
#disk{
transform-origin: center center;
transform-box: fill-box;
animation: rotate_disk 10s linear forwards infinite;
}
#keyframes rotate_disk {
100% {
transform: rotateZ(360deg);
}
}
</style>
</defs>
<image x="293" y="75" width="1255" height="959" xlink:href="https://i.stack.imgur.com/34irD.png"/>
<image id="disk" class="cls-1" x="515" y="165" width="815" height="815" xlink:href=" https://i.stack.imgur.com/Qas6q.png"/>
<image id="scris" class="cls-1" x="363" y="740" width="1105" height="233" xlink:href=" https://i.stack.imgur.com/TCbha.png"/>
</svg>
In this embodiment, the file size is 824 bytes