-
SVG/Vector objects to After Effects?
I have an animated graph in my Browser from which I can generate SVG images. The SVGs contains circles that change in size and position as well as some static elements. All of these can be in their own layers.
Is it possible to import these SVGs to After Effects (Perhaps via AI) so that I can recreate the animated chart for further post-production?
Or should I instead write a JSX script that implements the whole chart / data handling – which would be quite time-consuming …?
Example:
Suppose I have 5 SVGs that correspond to the years 2011-2015. Each file has 15 circles in separate layers with names such as Company1, Company2 etc.I’d now like AE to place these after each other on the timeline. If AE could also recognize that the Company1 vector object in the 2011 svg/ai file is the same as Company1 in the 2012 file – so that I could adjust a motion tween – that would be awesome!
Is this conceivable?
-
8 Replies
-
Animating this in AE is going to be a little more involved than what you’ve described. If you simply import an SVG or AI file into AE then you do not have access to the path information that needs to be animated.
To bring a path into AE from Illustrator you can copy the path and paste it into the Mask Shape property of a mask in AE (or into the Path property of a Shape Layer). The path can then be animated on a per-vertex level within AE. In order for this to work you’ll also need to make sure you have AICB enabled in Illustrator > Preferences > File Handling & Clipboard.
More information here:
https://help.adobe.com/en_US/aftereffects/cs/using/WSE4F03C08-9074-45eb-842E-2BF05D297249a.html
Darby Edelen
-
Darby, thanks for your reply. I’ll look into the path migration options.
Suppose I’m able to create one vector snapshot (an illustrator file with 10 top-layer paths) of all the shapes for one year and one for another year. Would it be possible to add motion tweens between them? In that case I don’t have to save as many SVG snapshots from my browser. Instead I can rely on AE for interpolating between one set of layer states and another. Possible or not?
Thanks!
-
you’d be able to sequence the layers, or animate them individually, but one layer would not easily ‘morph’ into another. ae will to the tweening between keyframes, but not between layers… at least not easily.
you can create ‘morphs’ between frames using pixel motion, but i don’t think that will work too well for what you are doing. you can see the process in this tutorial:
https://library.creativecow.net/articles/stern_eran/Simple_Morph.php
however, it sounds these shapes sound simple enough to recreate in ae, and that would give you much better control.
Kevin Camp
Senior Designer
KCPQ, KMYQ & KRCW -
If you save your SVGs as AIs (with layers), you can import them into AE as AI sequences. The import dialog will give you the choice of importing a specific layer or merging them. You could import the same sequence multiple times, once for each layer, then recomposite them.
You’ll have limited flexibility in retiming the animations, though. You could use time-remapping to add pauses, but drastic speed changes won’t work well (because, as Kevin mentioned, AE will interpolate with pixel motion).
Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog – What I’m thinking when my workstation’s thinking
Creative Cow Forum Host: Live & Stage Events -
Walter, Kevin – thanks both of you for your answers.
It’s a pity I can’t get AE to animate between illustrator layer states properly (when the layer only holds one path).
I guess that means going the JSX route? Suppose my JavaScript chart component is part of a bigger application and that it’s hard to break it free from all its code dependencies. What would you suggest doing? Is there any other pipeline I should explore before replicating a BIG JavaScript platform for creating animated charts in AE/JSX?Thanks.
-
Does it have to be AE? I believe there are quite a few charting tools for Flash.
Otherwise, I’d wonder if there’s a way you can easily massage your data in such a way that it’s easy to paste as keyframes on properties like position and scale.
Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog – What I’m thinking when my workstation’s thinking
Creative Cow Forum Host: Live & Stage Events -
Otherwise, I’d wonder if there’s a way you can easily massage your data in such a way that it’s easy to paste as keyframes on properties like position and scale.
That got me thinking. Yes, perhaps I should try to rebuild the actual rendering of the animation and not the data handling etc. I might be able to extract the x/y/scale parameters and save these in a suitable data structure. And then, how do I “paste it to keyframes”?
Thanks.
-
[Daniel Lap] “And then, how do I “paste it to keyframes”?”
Select a range of keyframes on the timeline, then copy them to the clipboard. Open Notepad or TextEdit and paste; you’ll see the keyframe data in plaintext. Modify it, then copy and paste back onto the layer in AE.
Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog – What I’m thinking when my workstation’s thinking
Creative Cow Forum Host: Live & Stage Events
Reply to this Discussion! Login or Sign Up