SVG rotate animation for recycle circle wobbly

Question

This appears to be an issue with the Inkscape SVG output for my SVG image. The transform matrix seems to be causing a slight wobble of the circle. Since I am not nor ever will be mathematically inclined, I am stumped on how to correct this so it does not wobble.

I have tried both CSS3 animation as well as SVG animateTransform. Both act the same. I can alter the wobble by editing the transform matrix but it only gets worse.

I've only used the webkit proprietary css here for brevity.

I've created a fiddle here: http://jsfiddle.net/slwfleming/KGZns/

<div class="box">
  <div class="rotateme">
    <svg class="refresh-status1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" viewBox="0 0 18 18">
      <g transform="translate(0,1.5)">
        <g transform="matrix(3.239515,0,0,3.239515,-78.803548,-173.89306)">
          <path d="m 28.973,54.655 -0.419,0.008 c 0.63,0.787 0.589,1.937 -0.14,2.667 -0.633,0.633 -1.583,0.746 -2.338,0.356 l -0.422,0.13 0.04,0.421 c 1.02,0.571 2.328,0.435 3.195,-0.433 0.968,-0.968 1.028,-2.489 0.2,-3.539 l -0.116,0.39 z"></path>
          <path d="m 25.437,57.162 c -0.63,-0.787 -0.59,-1.937 0.141,-2.667 0.633,-0.633 1.583,-0.746 2.337,-0.355 l 0.422,-0.13 -0.039,-0.421 c -1.02,-0.572 -2.328,-0.435 -3.194,0.432 -0.97,0.97 -1.029,2.49 -0.201,3.54 l 0.115,-0.39 0.419,-0.009 z"></path>
       </g>
     </g>
   </svg>
  </div>
</div>


.box {
  border:1px solid #c00;
  width:2rem;
  height:2rem;
  position:relative;
}

@-webkit-keyframes rotateRefresh {
  0% {
    -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

.rotateme {
  width:35px;
  height:35px;
  -webkit-animation:rotateRefresh 4s linear infinite;
  position:absolute;
  top:0;
  left:0;
}

.refresh-status1 {
  width:35px;
  height:35px;
}

Answer 1

Your SVG is not centred in its viewBox. You can see this if you extract it and add a contrasting background.

Demo here

Inkscape doesn't add viewBox attributes, so I am guessing you did this yourself?

If you tweak the width and height of the viewBox so it is correct (a tight fit around the diagram), it shouldn't wobble. Changing the "18" to "17.3" seems to work.

viewBox="0 0 17.3 17.3"

See corrected version here

It's also not quite centred properly in the viewBox (it's down and to the left very slightly), but that tiny error is not really visible in the final animation.