html5 How to morph or animate one SVG to another?

Question

I did some searching but I have to admit, I have 0 experience with SVG, I've seen a bunch of modern libraries, such as Raphael, PaperJS, KineticJS, EaselJS but I have no idea of what would fit the goal here, maybe even CSS keyframes would do the trick.

Pointers to this problem would be greatly appreciated.

Goal
On the browser, I want to animate svg1 into svg2, using transition type ease-out

Constraints

• Any javascript library, if required at all
• Should be able to every element to the other element of same ID
• morph shapes, paths, fill*, stroke*, cx, cy, rc, ry
• Should work on current Firefox and Chrome, IE 10 would be nice to have
• Should work in new mobiles such as iphone 5, nexus 4 and 7
• Decent performance, even on mobiles
• Indifferent if it renders as <svg> or <canvas>

svg1:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient id="svg_7" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_1">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse ry="145" rx="116" id="svg_2" cy="201" cx="317" fill-opacity="0.36" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="url(#svg_7)"/>
  <ellipse ry="21" rx="10" id="svg_5" cy="137" cx="274" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <ellipse ry="31" rx="17" id="svg_9" cy="114" cx="346" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <path id="svg_14" d="m235,239c55.66666,-1.33333 133.33334,-71.66667 167,-4l-167,4z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
 </g>
</svg>

svg2:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_7">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient id="svg_1" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse id="svg_2" fill="url(#svg_7)" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.36" cx="317" cy="201" rx="116" ry="145"/>
  <ellipse id="svg_5" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="277.5" cy="132.5" rx="13.5" ry="25.5"/>
  <ellipse id="svg_9" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="349.5" cy="110" rx="20.5" ry="35"/>
  <path id="svg_14" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m235,240c21.66666,81.66669 114.33334,96.33331 167,-4l-167,4z" />
 </g>
</svg>

ps you can visualize here, by simply pasting the codes in the area.

I have no code to show, I didn't want to start off wrong. My intuition tells me there is a 50% chance that the best solution don't involve navigating those nodes one by one diffing then!

Answer 1

Have to mention that 2015 have brought us several pretty nice libraries for svg morph:

• https://alexk111.github.io/SVG-Morpheus/
• http://greensock.com/morphSVG (probably the best of the best, but you have to buy their license)
• https://github.com/gorangajic/react-svg-morph (for react)

Answer 2

As far as I can see you only want to morph paths

This is a nice tutorial: SVG Essentials/Animating and Scripting SVG

W3C spec for SVG Paths: w3.org/TR/SVG/paths

W3C spec for animation: w3.org/TR/SVG/animate

Here's an example: carto.net/svg/samples/path_morphing