Illustrator SVG animation .. make one SVG image or split it ?

[gautamz07]

How are you doing my old friends ? I had a CSS - SVG question , i beleive quite a few of you guys on this forum use illustrator , Now i actually have the task to animate the below graphic, have a look:



Now i first have to recreate this PNG in illustrator i believe , to get the SVG code , the animation should be such that each element pops in with an animation , after a given delay , so the mobile phone will pop in first and than the round circle, and the arrows will start drawing themselves, ... you can see a small DEMO i created HERE (yes i created it in illustrator first and animated the elements using CSS and JS). lets not get into the dynamics of the animation, my queston is i need this component to be responsive on the web, so do i draw the entire png in one image or or do i make indivisual svgs( one of the phone , circle and arrows ) .. the secound option i beleive would be much more messier , This is the first time i am delving into SVG and illustrator , so please guide me.

Thank you.
Gautam.

 

[dv8_fx]

I'm lost on this one gautamz07.... but hang on. Some of our web designers will be popping in soon.

 

[gautamz07]

dv8_fx , if a PNG like this



needs to be recreated in AI , can you just load the png in illustrator and draw over it ? like you could in PSD ?

 

[dv8_fx]

if a PNG like this needs to be recreated in AI , can you just load the png in illustrator and draw over it ? like you could in PSD ?

Yes you can. If you're not versed with re-constructing shapes then try using the LIVE TRACE function. Your image can be easily handled as it's only in a single colour and LT will do almost everything for you with maybe a bit of tweaking if desired.

You'll find it in WINDOW > IMAGE TRACE . The Image Trace panel offers more options and the chance to test your selections and settings in advance before committing the trace. There are presets that you can experiment with.

Here's a couple of tutorials to help you....

https://www.youtube.com/watch?v=argiGgAD0Ck

http://www.adobepress.com/articles/article.asp?p=1928526


I don't do web stuff so I'm sorry I can't help you out with this. But unless I'm wrong, you may have to do each individual SVG image components of the animation. This means you have to break the image down into parts and save them separately. If you've animated individual images for web before then you'll know what needs to be done with them.

https://helpx.adobe.com/illustrator/using/cutting-dividing-objects.html

https://www.youtube.com/watch?v=_KAHswjde0U

 

[gautamz07]

Heres an SVG animation i made http://codeandcode.co/logo-svg/ . refresh the page incase you missed it .
MrToM Hope you can have a look at my simple animation whenever your free