Exporting as SVG from AE question

[lynnc1985]

Hi there,

just looking for a bit of guidance here.

I am looking to animate some illustrations, I usually use quite a bit of texture and blending modes for lighting (usually I would do this in photoshop but going to do it entirely in illustrator since the client wants SVG).

Is it possible to export an animation from after effects with noise/ grain effects to SVG? Or would those elements be raster based? I am aware that I would need to use the Bodymovin or similar plugin to export the SVG, but I just want to make sure you can get decent textures etc to export as SVG?

Or is it a better approach to create the animation in Animate and export SVG from there? I have no experience with Animate but would give it a go if it’s the best solution for achieving the effects I want. 

Thanks in advance 

[Rick Gerard]

In most cases, anything you add to a vector file other than a simple fill will be converted to a gray fill or rasterized if you convert the vector layer to a shape layer. Any effects you add to a vector layer or shape layer will be rasterized when you try and export the file for the web. By far the most efficient way to get good results designed for embedding on a website is to use a tool designed for that purpose like Animate.

After Effects is primarily an app designed to create visual effects, composites, and motion graphics in a single shot or short sequence and deliver that as a video. Any attempt to use AE to export code based code for use on a website is going to be full of limitations and exceptions. If you are designing for the web and not specifically including a video that must be manipulated in AE I would stick with Animate. Using AE for SVG is kind of like driving nails with a golf club. You can get the job done but it's going to take a long time and you might bend a few nails before you're done. 

[lynnc1985]

Thank you for your reply. You’ve given me a lot to think about, very helpful.

[Mylenium]

Where you create it is ultimately almost a moot point. The blunt answer would be that your whole workflow is unsuitable for SVG export to begin with. None of your features will translate well no matter from where you export them and it will all be a big, unwieldy blob of raster data and for maximum control you will need to begin by maerging/ flattening the relevant sections. Blending modes in SVGs have a whole different meaning, yes, things like noise need to be rasterized, anyway, and even irregular contours cannot be expressed in SVG without splitting them up into separate chunks and multiple instances. Even doing this in illustrator could turn out to be a whole waste of time, much less elaborately animating it in AE. so the first thing to do is to actualyl talk some sense into your client and explain them the limitations. Just requesting it to be SVG doesn't make any sense based on how you describe your artwork. With that being the case it would likely be a much better strategy to focus on creating a highly optimized animated GIF in PS, use one of the million slideshow JavaScripts out there to display images with timed delays or create a native HTML canvas animation in Animate CC. Again, from where I sit and based on your description forcing this down an AE and AI pipeline could be disastrous.

Mylenium

[lynnc1985]

Thank you for the reply. I will have a rethink and speak to the client. Very helpful thank you.

[Roland Kahlenberg -]

Lottiefiles has just been released and it's something you should look into.

https://lottiefiles.com/plugins/after-effects

[lynnc1985]

That is great, thank you. 

[Mehdi38094920mus9]

Export SVG Animation From After Effects (100% SVG File)

https://youtu.be/NbvLvOfea-0