animate and rotate a scaleable SVG object about the center - css

Question

I'd like to animate my SVG by rotating it about it's center, however due to the different sizes of my SVG, the center point changes depending where it's used in my web page.
Here's my SVG:
<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66">
<title>spinning orange circle</title>
<style>
.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
stroke: #ed770b;
transform-origin: 50% 50%;
animation: dash 1.4s ease-in-out infinite;
}
#keyframes dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
</style>
<animateTransform attributeName="transform"
type="rotate"
from="0"
to="360"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
Copy this onto your desktop and save it as an SVG and run it in your browser to see the issue.
Now this works in stackoverflow, but when it's on my page, or just on a page by itself, the spinner flies out of view. How can I get it to spin about its center? Say I use CSS later to scale it up to 50x50 pixels, or larger and how can I still have it rotate about the center?
Edit: if you change the animate transform to have these values:
<animateTransform attributeName="transform"
type="rotate"
from="0 14 14"
to="360 14 14"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
it will work, but once you scale the image larger than 28px * 28px, it will no longer work.

Answer 1

I'm not sure it will solve the entire problem, but this works when saving and opening the code as svg:
<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66">
<title>spinning orange circle</title>
<style>
g {
transform-origin: 50% 50% 0px;
}
.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
stroke: #ed770b;
transform-origin: 50% 50%;
animation: dash 1.4s ease-in-out infinite;
}
#keyframes dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
</style>
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0"
to="360"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</g>
</svg>
I wrapped the entire content with a new <g> tag and I gave it transform-origin: 50% 50% 0px; in the css.