My Banner ad process... SVG Preview is the star!

[elliotgeno]

This isn't meant to be a feature request or an issue but just some insight into how I have been using SVG preview. Lately I have been creating a lot of "HTML5" banners without any real HTML5. All in SVG. Mostly because SVG actually solves a lot of problems HTML5 causes with all the restrictions surrounding banner ads. Best of all it produces a single stand-alone animation file I can easily hand off to third parties. All the code necessary is encapsulated or linked to a CDN! I am actually writing an article soon to sing SVG Preview's praises!

I start in Adobe Illustrator and layout all the assets I need. I optimize my paths, reducing points and creating compound paths to reduce file size. Then I export the SVG with embedded images. (The file size bump ~+=20% is mostly recouped with GZIP.) This also has the benefit of reducing net requests.

Then it is straight into SVG Preview. I add two script tags. One would normally link to Greensock's TweenMax. (Actually inlined temporarily since SVG preview can't load external files :( Then in my second script tag, surrounded by CDATA I start coding the banner. What is great about SVG Preview is that it auto updates whenever I make a change. So as I code it immediately refreshes above. I use Greensock's TimelineMax to seek() to a specific time. So as I am coding another part of the animation... All I need to do is seek to the appropriate time. As I type SVG Preview updates with the new JS and repeats the animation at the seek point and I can see the live update right there!

It's a perfect marriage of code and visualization! If you want to try it out yourself, here is an SVG to pop into Brackets! https://dl.dropboxusercontent.com/u/1256960/FeatureRequests/RazorBanner.svg