SVG Path Morphing | Tavmjong Bah's Blog

As usual, if you are reading this in a blog aggregator and the images don’t display correctly, try viewing on my blog website. Aggregators don’t play well with SVG.

I have a project where I want to morph some paths. To experiment a bit, I looked for something simple to start with. I came across a poster of Batman logos over time. What a perfect thing to morph, I thought. I then looked a little bit further and saw that the designer actually got their idea from someone who had already produced a video of morphing Batman logos. Well, I still though it would be interesting to do in SVG so I continued. I wanted to use SMIL animation as this is simpler than JavaScript and will work where JavaScript is disabled due to security concerns. SMIL works in all the major browsers except IE. Here is the result:

A variety of Batman logos, animated with SMIL.

I used Inkscape to trace the paths and then extracted the path data using the XML Editor. I pasted the data into a hand-written SVG file. Inkscape’s SVG is rather verbose and adding animation inside Inkscape is not so simple. Here is a very simple animation of a short path. Note how the <animate> element is inserted in between opening and closing <path> element tags. The d attribute is animated with the values attribute containing the required path data.


  <path d="M 100,50 100,250 300,250">
    <animate dur="5s" repeatCount="indefinite"
             attributeName="d"
	     values="M 100,50 300, 50 300,250;
		     M 100,50 100,250 300,250;
		     M 100,50 300, 50 300,250;"/>
  </path>

Here are a few notes about the process:

The paths must have the exact same structure. I took a look at the various logos and decided on a set that shared the same topological features so they would use the same number of Bezier curves. I choose to use all Cubic Bezier curves since they can simulate straight lines too.
In the Inkscape Preferences dialog under the SVG output tab, I disabled the use of relative paths. Inkscape can choose to use relative path data if it results in a shorter path string. This can result in inconsistent path structure. At the same time I reduced the numeric precision to three decimal places, I wasn’t so interested in getting the logos perfectly exact.
For each new logo, I copied the path from the previous logo to insure the same structure. I then deleted the right half of the path, adjusting only the left half to match the new logo. To get the right half, I duplicated the path and flipped the copy horizontally and moved it into place. I then combined the two halves into one path, merging the end nodes. I tried to use the same procedure each time to keep the path syntax the same. Occasionally, I ended up with a path that required flipping horizontally to get the starting point at the right place.
The animation part is rather straight forward. A few things to know: One has to repeat the first path at the end. I repeated each path twice so there would be a bit of a pause between morphs. I put each path on its own line so I could spot errors quicker. The most common error I made was forgetting the semicolon at the end of each path. Chrome has a bug where space after the last quote mark kills the animation. I am sure a person with more SMIL fu could come up with a better way of handling the morphing and the text fades but this SVG file does what I set out to do.

6 thoughts on “SVG Path Morphing”

I’m fond of SVG animations with SMIL ( the animation is part of the SVG itself and ) even if it’s old, and i’m happy to read your tuto cause i want to do something like it ;
if you’re interested i’ve done few simple things you could find there: http://www.fabkzo.com
I like the idea to use svg animations for adverts.
For info I’ve inserted an internet explorer case at those anims : 1ms image if the browser don’t read SMIL.
The best would be that we could make the anims inside inkscape…
Best regards

Fabkzo

Thank you for sharing this.

Great post! Is there a good Animated SVG into an Animated GIF converter for places that don’t support animated SVGs?

Tavmjong Bah says:

January 5, 2013 at 11:30 am

Not that I know of. I would be very interested in this too (especially for testing purposes).

I do know that the Web browser vendors have internal builds for testing animation that dump rasterized images at specified time points for comparing with reference images. There was a Firefox plug-in that converted animated SVGs to APNGs (svg2apng) but it appears to be compatible with Firefox 3 only. I tried using canvg.js following the instructions I found at here. I was able to generate a series of time-lapsed images but it appears canvg.js does not support animation of the ‘d’ attribute (it does handle ‘opacity’, ‘fill’ [via animateColor only and with ‘from’,’to’ and not ‘values’], and attributes like ‘width’).
1. Cyril Concolato says:
  
  January 7, 2013 at 4:03 pm
  
  The command line player from the GPAC project can generate PNG images (or uncompressed AVI if you prefer). The command line would be:
  MP4Client -png 0-1-2-3-4-5-6 file.svg to generate 7 png image, one per second.

Cyril, looks interesting. I spent the morning trying to get it to work on my Fedora 17 box but to no avail. There are prepackaged RPM’s for gpac in rpmfusion-free-updates but I get an immediate memory corruption error when I try to execute MP4Client. I tried compiling gpac from source but I get a compiling error in scenegraph/dom_smjs.c (incompatible types).

Somewhere while googling around I think I saw that filters are not supported. Is that true?

Comments are closed.