As web technologies like SVG, WebGL, and Canvas continue to get richer, more expressive, and better supported, it makes sense to start turning to them more frequently for common rich media solutions like advertising. That’s why, when the Adobe Web Platform team got the opportunity to sponsor CodePen for February, we decided to make a self-referential ad that uses SVG technology to promote SVG technology. Here’s what we came up with:
While creating the ad, we were happy to find that the designer/developer workflow was really smooth since we were able to maintain a vector workflow throughout. Designing the storyboard and artwork in Illustrator not only allowed us to maintain a clear vision of what the end result would be, but it also allowed us to generate vectors that could be used directly by Snap. The final step was to integrate Snap for animating and manipulating the SVG, resulting in the final creative.
Another big advantage of SVG is that we essentially got responsiveness for free. The ad can be served in any size iframe and it will automatically scale and look perfect. That gives the publisher (in this case, CodePen) maximum freedom when it comes to displaying the ad, and it means that the creative looks (and works) great in both desktop and mobile browsers.