Scalable Vector Graphics (SVG) is a powerful tool in the web developer’s arsenal.
But web creators have been rather limited by how they can create and manipulate this content.
Vector tools like Adobe Illustrator have been able to export SVG for a long time but animating SVG content has been limeted to javascript libraries used by developers.
Great designers, animators and motion graphics artists have long relied on timeline based animation tools to create dynamic rich animations.
Flash Professional CC (now Adobe Animate CC) allows Custom Platforom Plugins, meaning developers can write plug-ins for the application that generates content in any format.
Since it’s such a powerful timeline based vector animation tool it seemed like a perfect opportunity to innovate the SVG animation workflow.
So I created Snap.SVG Animator a Custom Platform Plugin that exports from Animate to SVG utilizing the Snap.SVG javascript library.
Snap.SVG Animator allows you to create special documents at launch and then simply build out your animation as you would normally.
Upon publishing the application launches an HTML page utilizing Snap.SVG as well as our special runtime which parses the timeline data from flash and draws and animates your SVG content.
You can get the plugin through the Adobe Add-ons Portal which will install it directly into your application through the Creative Cloud.
The project is also open source on github where anyone can submit comments, bugs or contribute to make it better.
It’s actively being worked on and there are some exciting updates on the horizon including scripting support.
There are some great javascript libraries out there for animation but without a visual animation tool for SVG there are constraints in who creates and what is made with SVG.
I believe this kind of animation workflow is inevitable and is a glimpse at the future of how great animated SVG content will be created for the web.
Check out the video above for a basic walkthrough.