Data Viz

Creating video animation from SVG (Scalable Vector Graphics) images was a dynamic process that involves multiple steps, blending design, motion graphics, and video production techniques. Here’s a breakdown of the workflow, for the above video animation created for social media use.

1. Pre-production: Conceptualization and Asset Preparation

• Storyboarding: In the pre-production phase, I sketched out the key frames or scenes of the animation. This process is akin to the planning stage in film production, where one maps out how each SVG element will move and interact over time.

• Asset Design: I sourced vector-based assets, specifically the map for accuracy, in SVG format. These were customized in Adobe Illustrator. It’s essential that these assets are well-optimized for animation, with clean paths and minimal anchor points. This was especially true for SMS posts, which have a maximum file size.

• Layering for Animation: SVGs were often layered based on their visual components (e.g., background, foreground, or objects). This was key to ensuring that each element could be manipulated individually during the animation process.

2. Import and Setup in Animation Software

• Importing SVG to Animation Software: Once I had the SVGs, I imported them into an animation tool. The one available to me at the time was Adobe After Effects. This program could parse the XML code of the SVG and convert it into editable vector layers that was ready for animation.

• Layer and Hierarchy Setup: After import, I organized the layers in the timeline. Similar to how I would arrange video footage in a non-linear editor (NLE), stacking elements according to how they should be animated or composited.

3. Animation Techniques

• Keyframing: This was the core step of the animation, I defined specific moments in time (keyframes) for each vector asset. For example, I keyframed an SVG object to ease in from the left or scale up gradually over time. The transition between keyframes was handled using tweening. I played with the timing to model the speed at which the travelers in this animation moved across the country. However, stakeholders preferred the visual communication of consistent timing for this project.

• Motion Path Animation: SVGs are typically vector shapes, which meant they could follow precise motion paths, perfect for this project. By manipulating position, rotation, and scaling values, I animated elements along these paths. Bezier curves were used to create fluid and organic motion, making objects appear to follow natural roads.

• Easing: To add more natural movement to the animation, I applied easing functions (such as Ease In, Ease Out, or Ease In-Out) to the keyframes. These functions control how objects accelerated or decelerated during motion, giving this animation a more professional, fluid feel.

4. Texturing and Effects

• SVG Effects: Many animation tools, like After Effects, allow me to apply visual effects to SVG assets, such as drop shadows, glows, or strokes. These effects were intended to enhance the look of animated lines and make the animation appear to have depth.

5. Rendering and Post-production

• Exporting the Animation: Once the animation was completed, it needed to be rendered into a video format (e.g., MP4, MOV, WebM). The rendering process involves compiling the layers, keyframes, effects, and motion paths into a final visual product. In After Effects, this would be done through the Render Queue.  I leaned heavily on Premiere Pro to convert and export the file to the correct type.

6. Final Output

• Exporting for Delivery: Depending on the target platform (YouTube, social media, broadcast), the final animation was exported in the appropriate resolution, frame rate (often 24fps or 30fps), and compression settings. This process is essential for ensuring optimal playback and quality.

7. Post-release

• Feedback and Revisions: After sharing the two versions of this video animation with stakeholders, revisions weren't necessary – as noted above, the animation with consistent timing was chosen. This could have involve tweaking the animation timing, altering specific effects, or adjusting colors and contrast in post-production if I hadn't already anticipated the possible concern.

By blending design principles with animation techniques, video professionals can take SVG assets and transform them into engaging motion graphics that can be used for everything from advertisements to explainer videos.