« More on Local Facebook Development
For the Longest Time »

Making the Most of EDGE: SVG

Note: 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.

Note: You’ll need the latest version of Safari to view most of these examples. It is available for both Windows and Mac.

PNG (64KB) SVG (16KB)
Application Screenshot Application Screenshot

Here is the source for the SVG file. You’ll see that it references JPG representation of our screenshot.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" onload="window.startup(evt);">
    <g widht="200" height="355">
        <image id="P"  x="0" y="0" width="200" height="224" xlink:href="screenshot.jpg" />
        <image mask="url(#reflection_mask)" id="P"  x="0" y="224" width="200" height="224" xlink:href="screenshot.jpg" transform="matrix(1 0 0 -1 0 671)" />
    </g>

    <defs>
        <mask id="reflection_mask" height="100%" width="100%" x="0" y="0">
            <rect x="0" y="0" width="100%" height="224" fill="url(#reflection_grad)"/>
        </mask>
        <linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="reflection_grad" gradientSpace="userSpaceOnUse">
            <stop offset="5%" stop-color="white" stop-opacity="1" />
            <stop offset="95%" stop-color="white" stop-opacity="0" />
        </linearGradient>
    </defs>
</svg>

And here is the code put into the HTML to draw the SVG:

    <object data="screenshot.svg" type="image/svg+xml" height="355" width="200">
        <img src="screenshot.jpg" height="355" width="200" alt="Application Screenshot" />
    </object>

All it takes is a simple object tag. If you like, you can include another image inside as a fallback if the user’s browser does not support SVG. On top of all this, you can include JavaScript in your SVG files, for adding in capabilities such as dynamic image loading and animation.

Lastly, don’t forget that you can create SVG graphics with Adobe Illustrator or other similar programs. These images are vector based, so the file sizes are especially small and they scale well for any environment.

This entry was posted on Saturday, March 8th, 2008 at 3:20 am and is filed under Geek, iPhone. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “Making the Most of EDGE: SVG”

  1. stelt Says:
    March 8th, 2008 at 5:36 am

    i just started loving the iPhone.
    I’ll even add this article to the SVG link resource http://svg.startpagina.nl

  2. clay Says:
    March 9th, 2008 at 12:21 pm

    im not a developer but thats awesome!

  3. jake Says:
    May 21st, 2008 at 6:01 am

    “It’s been announced recently that the next version of the iPhone firmware will support SVG.”

    Could you link to this announcement? I’d be very interested to see it.
    Much thanks,

    Jake

  4. Dave Grijalva Says:
    May 21st, 2008 at 2:38 pm

    Apple hasn’t said so publicly, but there are enough sites out there that have leaked it that it can be considered public knowledge.

    Here are a few links:
    http://www.touchpodium.com/2008/03/10/iphone-os-20-full-screen-safari-new-css-effects-bonjour-svg-support-and-more/
    http://www.unlockiphone20.com/iphone_20_contd.html
    http://www.talkiphone.com/iphone-20-feature-list-304/
    http://www.iphoneatlas.com/2008/03/07/iphone-os-20-will-include-bonjour-full-screen-safari-mode-more/

    If you sign up for a free Apple Developers Connection account (http://developer.apple.com), you can view details about the next version of Safari Mobile. This information is all provided under NDA, so I can’t go into anything more specific, but there’s a lot of great information in there. Apple’s developer center is really the best place to look for official information.

  5. philotas Says:
    September 2nd, 2008 at 7:04 am

    Hi,

    you said:

    If you sign up for a free Apple Developers Connection account (http://developer.apple.com), you can view details about the next version of Safari Mobile. This information is all provided under NDA, so I can’t go into anything more specific, but there’s a lot of great information in there. Apple’s developer center is really the best place to look for official information.

    but I can’t find the info for SVG there.

    thanks
    philotas

  6. Dave Grijalva Says:
    September 5th, 2008 at 4:37 am

    You can look at webkit.org for more info. Both the desktop and mobile versions of Safari, as well as the new Google browser, Chrome, are based on that codebase. There are several ways the new safari allows for SVG inclusion. This example uses the, probably more widely supported, object tag, but in webkit, SVG can be included inline or with just standard img tags pointing to”.svg” files.

Leave a Reply