Tweening SVG paths not working

Question

I'm trying to tween two shapes with SVG - very new to svg - and I've come across a problem.

So following advice I've found here: http://www.jaredstanley.com/blog/2013/05/15/tweening-a-vector-path-in-svg/, I took the code in his SVG and tried using my own. It's a very simple shape so thought it would be easy.

I can tween a square in to a smaller square but as soon as I move a point, it stops animating and just switches images. A bit hard to explain so here's a pen with the examples: http://codepen.io/jhealey5/pen/raNVdg

And the code:

    <path id="shape_path" />
    <animate xlink:href="#shape_path"
      attributeName="d"
      attributeType="XML"
      from="M136,36H0V0c0,0,110.6,0,136,0C136,11.4,136,36,136,36z"
            to="M106.3,28.2H29.7V7.9c0,0,62.3,0,76.6,0C106.3,14.3,106.3,28.2,106.3,28.2z"
      dur="3s"
      fill="freeze" />

    </svg>
    </div>

    <hr />
    <div>

    <svg viewBox="0 0 100 100" 
      xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="shape_path2" />
    <animate xlink:href="#shape_path2"
      attributeName="d"
      attributeType="XML"
      from="M136,36H0V0c0,0,110.6,0,136,0C136,11.4,136,36,136,36z"
            to="M136,36H0L7.2,7.2C7.2,7.2,110.6,0,136,0C136,11.4,136,36,136,36z"
      dur="3s"
      fill="freeze" />

    </svg>
    </div>

Answer 1

Smooth animation requires that the two paths have the same number of subpaths and the same type of subpath at each point. I.e. if path a) is M x,y V x then path b) must start with an M or m and then have a V or v following.

Your second example fails to smoothly animate as the second path item is a V in one case and an H in the other. You could probably make it work if you used an L or l in both cases with appropriate numbers.