SaVaGe! Animation With macSVG

You know, there's one thing we’ve found very strange over the last nearly 20 years: various strategies for animations arrive, cause a flurry of activity, then slowly die out, but nobody ever seems to take the obvious to us path of working with Scalable Vector Graphics (SVG) to leverage what’s a long proven and widely supported (for flexible values of “supported”…) cross-platform vector animation format. When we did that October Challenge thing seven years ago we used LevelSVG to do it, and did the editing in Inkscape, which was…well…we don’t like to be impolite (unless it’s funny, of course) so let’s just say it is clearly not a native app.

There are many other options, pretty much every vector drawing program supports SVG in some fashion, but generally, they’re far better at importing than exporting, and quality of export is generally suboptimal and definitely not tuned to the format capabilities. What we need is an editor designed specifically for the format, and free and Open Source would be perfect…

…wait, what’s this?

"macSVG is an MIT-licensed open-source macOS application for designing and editing Scalable Vector Graphics (SVG) content for HTML5 web pages, mobile apps, animation design, and general graphics usage.

SVG is an open-source format for computer graphics documents based on the authoritative Scalable Vector Graphics (SVG) 1.1 (Second Edition) – W3C Recommendation 16 August 2011 from the World Wide Web Consortium (W3C), and is supported on most modern web browsers, and many application frameworks.

macSVG can produce dynamic, high-quality graphics and animation for HTML5 web views that can be displayed on most major desktop and mobile platforms, including iOS, Android, macOS, Microsoft Windows, and Linux…"

Well, isn’t that just awesome with a side helping of awesomesauce?

And the rendering side is active these days too, if you haven’t caught our various off-handed references check out Macaw, and Macaw-Examples, and How friendly can drawing API be on iOS?

…I don’t even want to think about maintaining such a hierarchy using pure CoreGraphics. To use the power of Macaw you only need to inherit your control view class from MacawView or use MacawView as a container and let the magic begin. An added benefit is that any change to the scene’s properties will automatically trigger a content update for the view…

"Macaw is an open source library which makes vector graphics drawing and animation easy and enjoyable. Not long ago we released the 0.8.2 version with interesting updates.

Morphing Animations

From the beginning of this project, we wanted to implement smooth transformation between shapes. Ability to morph paths into other arbitrary paths provides a way to create complex effects. We introduced a new member of the animation’s family — Morphing Animation…

Touch Events

We also made improvements to the existing API. For example, new touch events API additions to make more advanced touch events handling possible…" -Macaw iOS Library: Morphing Animations

So next time you have some vector interactivity and/or animation needs, we’re thinking that macSVG plus Macaw looks like a really promising strategy. Try it out and let us know!

For another approach, check out Snowflake based on the Reindeer XML and HTML parser which could be kinda handy other places as well!