356 HOW: Beyond Text/Pictures: Rich Media

Romancing the logo

For the purposes of this little exercise, we’ll assume that the client’s logo involves letterforms rather than nonverbal swooshes or swirls. We’ll further assume that you’re developing the logo in Adobe Illustrator and that you have not yet converted your text to outlines. After it becomes outlines, it ceases to be text, thus losing the SVG benefit we’re about to explore.

First, the traditional methods:

If you export your client’s logo from Illustrator to Photoshop and embed it on a web page as a GIF image, search engines will not index it because it is not text. You can work around that limitation by adding <ALT> text to your image tag, but not all search engines index all <ALT> text.

If you create that same logo in Flash, it can spin and whirl and glow, but search engines will not index it because it is not text. Flash 5 has added some accessibility features, allowing you, for instance, to include <ALT> text for a Flash file, but this is global text, not image-specific text, and we already talked about the limitations of <ALT> tags as a guarantor of search engine placement.

Now, the SVG method:

Take that same Illustrator logo and export it as SVG, using Illustrator’s built-in support for that web standard. The resulting logo looks great, smells fresh, and it remains text. That means search engines can index it.

Your client’s logo no longer blushes like a maiden when the search engine comes courting. From every page of the site, the text-based logo calls out to the search engine, and the search engine rewards it with the Web’s greatest mark of love: a high ranking.

To the eye, the logo is a logo; to the search engine, it is a word. If the word

“Widgets” appears at the top of every page of the site, that site will rank high when users search for widgets. When the client cries, “Make the logo bigger,” you can answer: “We’ve made it number one.” By contrast, under the old methods, when a GIF image of the word “Widgets” appears at the top of every page of the site, it is unlikely to seduce the search engines.

Taking Your Talent to the Web

357

Because the SVG-formatted Widgets logo is a word that looks like a logo, users can also copy and paste it into a text document. It will lose its SVG formatting when users do this, but your client’s name will remain intact. Your client will like that. And who knows? A year from now, it might not lose its formatting when pasted into a popular word processor, print layout program, or email message.

In fact that is one of the promises of SVG for graphic designers: that we will be able to use the same SVG image file in our print work and our web work—from Illustrator to Quark to the website, as easy as drag and drop. (Yes, you can also create SVG illustrations by hand-coding them—after all, SVG is really XML—but we doubt many designers will want to do that. We sure don’t.)

Will SVG replace Flash? Not likely and certainly not any time soon. Will SVG evolve into a useful tool for creating scriptable vector graphics? We think it will.

Sounds dandy, but will it work?

SVG support is coming online slowly. A plug-in from Adobe (http:// www.adobe.com/svg/main.html) supports SVG in all web browsers, though not equally well. The first version of the Adobe plug-in relied on Netscapeproprietary plug-in detection that was not supported in Internet Explorer for Macintosh. Users of IE5/Mac could not see SVG graphics at all with that plug-in version.

As of this writing, a newer Adobe SVG plug-in has greatly improved its support for non-Netscape browsers, though Internet Explorer support for Macs is limited to nonscripted SVG only. In other words, IE/Mac users can see SVG graphics on the Web but cannot see dynamic (animated) SVG graphics.

Still, things are looking up for SVG. You might find it odd that it takes a proprietary plug-in to support an open standard, but such is the state of the Web. After the SVG standard is finalized, we suspect that browser makers will begin investigating ways to support it.