Flexible rotating centered SVG - html

Question

I need flexible rotating centered SVG.
Problem is if use
<svg width="100%">
with rotation, browser window start resizing itself on svg rotation.
If i delete "width="100%"", than SVG will svg will not shrink on horizontal window resize.
Any ideas how to fix it?
Codesandbox example.

Answer 1

Putting the animation inside the svg is a solution.
<svg
viewBox="0 0 29.892 29.892"
width="100%"
height="100vh"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g>
<path
d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
opacity=".2"
/>
<path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z"/>
<animateTransform repeatCount="indefinite" begin="0s" dur="5s" attributeName="transform" type="rotate" from="0 14.946 14.946" to="360 14.946 14.946" />
</g>
</svg>
If you want css to control the animation, you'd still have to group the paths within the svg. You can then target the group in css like below.
#circle {
animation: rotate 2s linear infinite;
transform-origin: 50% 50%
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<svg
viewBox="0 0 29.892 29.892"
width="100%"
height="100vh"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g id="circle">
<path
d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
opacity=".2"
/>
<path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z" />
</g>
</svg>