Morphing SVGs

I pushed out what I think is a pretty cool feature to my Cover2 theme.

It’s always bothered me a little bit that the navbar icons weren’t actual icons. Ever since Cover v1.0, they’ve been <div> and <span> tags hacked together to look like icons. For Cover2, I used code generated by Transformicons, but it still bugged me. And now, here I am using nice SVGs for all the rest of the icons; surely I can use SVGs for the navbar icons and morph them. Well, now I am.

I started out by recreating the icons using the same SVG source as Cover2 uses in CodePen. There are a few SVG morphing libraries to choose from: GreenSock’s MorphSVG plugin, Snap.svg, and Morpheus SVG. I created a pen for each.

GreenSock MorphSVG

GreenSock’s plugin, in my opinion, is both the easiest to work with and has the nicest morph transitions. It actually requires two libraries: TweenMax and MorphSVG. And while the first is free to use, use of the second requires a paid subscription.

Snap.svg

From what I’ve read, Snap.svg is supposed to be the best SVG animation library out there. This one required the least amount of markup, so it’s got that going for it. But for some reason, the transition from the “hamburger icon to close icon” transition breaks something in the close icon.

Morpheus SVG

Per the documentation, this one requires a very specific markup. Beyond that, its implementation is pretty straightforward.

The transitions in Snap.svg and Morpheus SVG are pretty similar, the broken close icon notwithstanding. But I’ll be honest, I really prefer GreenSock’s plugin, but I don’t have $99 to drop on a subscription, and I haven’t even read up on if they allow you to use it in an open-source project. I’ll take what I can get, and I’m happy to finally be rid of hacky custom elements in favor of SVG, which I know will be rendered by every modern browser in exactly the same way.

2 responses

  1. Juribiyan Avatar
    Juribiyan

    SMIL may be used to morph SVG just as well. Too bad it is considered deprecated and Web Animations do not fully cover its functionality (including morphing). The funny thing is, Google uses SMIL to morph play/pause button on Youtube even though it’s their own idea to deprecate this technology.
    Of all plugins Greensock is the only acceptable solution right now. Other plugins look pretty horribly tbh. When I needed to morph some SVG I tried some of them and finally stuck with SMIL.

    1. I agree that Greensock is superior to everything else I’ve tried, but as Cover2 is an open-source project, its third-party assets also need to be free to use; thus, I went with Morpheus. It’s not ideal, but it’s functional.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related