Making the Most of EDGE: SVG
Saturday, March 8th, 2008Note: I wrote this post almost a year ago, just as the iPhone was coming out. They’d told us in development talks that the iPhone would support most of the features of the desktop Safari, sans Flash. I never published because I discovered that the iPhone did have canvas features, but did not have SVG support. It’s been announced recently that the next version of the iPhone firmware will support SVG.
Most visual effects on web pages are today created in a graphic editor such as Photoshop and implemented on the page as rendered graphics. This is all well and good for users on speedy DSL connections, but the bandwidth eaten up by these graphics can really effect the load times of your content on our favorite new mobile device.
Luckily, the iPhone supports both canvas and SVG for handling your drawing in the browser. Using these formats will allow you to create much more visually appealing content at a fraction of the bandwidth. Both canvas and SVG are specified using plain text. Instead of supplying the artwork, you supply instructions for generating the artwork.
In the example that follows, I’ll compare using a transparent PNG to create a reflection effect with the same effect in SVG. The SVG version uses only a few lines of code to produce what is a near identical effect.
