Sevenseek Tutorials Blog

Scalability without loss of resolution, is definitely an advantage in SVG format images — but did you know that SVG images are also programmable? We’ll take a look at what SVG format means for Web Developers in this article.

WebMasters have been living with JPEG, GIF, and then PNG graphic format choices for some time. You might even say these formats are looking alittle “old” in terms of their usefulness. GIF, certainly is. I think most web developers have been aware of EPS (Encapsulated PostScript), and Adobe Corp. proprietary format, for a number of years, but probably don’t use it much online. It has a rep. as a format that is ideal for print. But that could all change — and is changing with the advancing tide of SVG format use. About seven years ago, a new format, similar to EPS (we’ll see how below), called SVG (Scaleable Vector Graphics) was created by a group of companies within the W3C — http://www.w3c.org — (World Wide Web Consortium at W3C.org — if you’ve never learned about that group, now would be a good time).

“Synchronized Multimedia Integration Language, another W3C driven technology, may be used to markup timing, layout, animations, visual transitions, and media embedding, and more in SVG artwork.”

SVG’s are similar in format to Adobe’s EPS (both describe shapes as “Vectors”), with some key differences that are destined to become very important for today’s web developers. While most web gurus recognize that “Scaleable” means that this type of graphic maintains perfect resolution, no matter how they are scaled (again something print designers really enjoy), many have missed some very important capabilities of this format for the web. You see, SVG’s are programmable, they may be animated, and even may be used as a simple page description language (similar to the Adobe PDF format). The program also includes mobile profiles for those who develop for the mobile phone industry. And of course, this format is “Open Source”, which means that there are no programs to buy, or licensing fees to be paid when developing with it.

Here, we’ll take a look at what all that means for web developers, at how SVG’s may be programmed, and look at a free program you can use to edit SVG’s — InkScape. We’ll also discuss what the future might be for web developers and this new graphic format, which really could be renamed PSVG — Programmable Scaleable Vector Graphics. SVG’s feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects, extensibility and programming of the art created.

But before we proceed, you might be wondering, if SVG is really this great, what’s taking so long for it to explode in web development use? The usual inertia: browser implementation has been slow, and this generation of developers are still primarily comfortable with JPG or GIF/PNG (some have only recently embraced PNG). Many websites that offer SVG format files, also offer the same images in JPG or PNG format, further enabling the inertia. As you come to understand its capabilities, you could also wonder if it will someday eclipse even FLASH.

Comparing SVG to JPG and GIF/PNG

One of the chief strengths of SVG fomat is that it scales with no “pixelization” like you see in the other “raster” based formats. That’s because the image is not described by a map of little square pixels, but instead is described by geometrical coordinates — like CAD formats used in engineering. Below is way to visualize the difference, courtesy of Wikipedia (http://en.wikipedia.org/wiki/Image:Bitmap_VS_SVG.svg):

So you can see why “scalability” is emphasized in the name. But what about programming your SVG file. That’s where SVG leaves EPS in the dust, and threatens even to replace FLASH.

How can you program SVG’s? A couple of ways:

• XML: SVG is an actually an application of XML — it’s a text file, which can be viewed and edited as with any other markup.
• SMIL: Synchronized Multimedia Integration Language, another W3C driven technology, may be used to markup timing, layout, animations, visual transitions, and media embedding, and more in SVG artwork. You can create slide-show presentations with it, and the SMIL technology may be used to display multiple file types like text, video, and audio.

Here is some a sample of XML code for an SVG image:

Above you can see how an XML description for an SVG graphic translates into an image (at right). This is courtesy of Wikipedia, which has an excellent article on SVGs you should read at: http://en.wikipedia.org/wiki/Svg.

Try InkScape (free open source program) to create & edit SVG’s:
So you’re ready to at least test out the features of SVG’s? Good news — there’s a free, open source program that will help you get a feel for the new format — InkScape (http://inkscape.org).

Download, and install the program, then try creating some simple shapes, as shown below. Then, have a peak at the built in XML editor in the program (also shown below) — it’s available under the Edit Menu.

Above is a screenshot from the InkScape program showing some simple shapes and the XML editor open where you can see how the image is described, program in links (bye-bye image maps)… and much more as you become more experienced with the program.

You’ll find extensive documentation, tutorials, and support at the InkScape website, and watch for a series of continuing tutorials here.

I also recommend you hop on over to CrocZilla (http://www.croczilla.com/svg/samples/), and review a list of SVG sample files there… they provide both the visual art file, plus a link so you can view the text code that creates the graphic. Nicely done, by Alex Fritze.

Take a look also at these resources:

• Mozilla’s SVG Project Page (http://www.mozilla.org/projects/svg/) – An excellent overview — take note of the statement that SVG is similar in scope to Macromedia Flash Technology
• The W3C’s official SVG area at http://www.w3.org/Graphics/SVG/
• Two mailing lists: www-svg@w3.org, and a yahoo SVG Developers group at: http://tech.groups.yahoo.com/group/svg-developers/
• SVG.org (http://svg.org/) – “the premier community website aiming at bringing all the SVG (Scalable Vector Graphics) users, developers and enthusiasts together.”

Future use of SVG’s…

Ok… what’s going on with this exciting “new” format? If you Google around the web looking at SVG topics, you’ll see there was a lot of excitement about the format approximately two years ago — the CrocZilla example page cited above was posted by Mr. Fritze in 2005. This was around the time that Mozilla implemented it in FireFox Browser 1.5. Since then… the inertia affect seems to holding it back. The SVG project is also mostly a volunteer effort, and so suffers at times from a lack of manpower to upgrade, publicize, and educate users. However, if you use Adobe Illustrator, you will notice that you can save in SVG format, and a number of services for affordable clip art are offering SVG artwork (take a look at Fotolia.com).

What’s the verdict? Well, it all comes down to you, doesn’t it? If you find SVG to be an excellent way to create a graphic rich environment in your web development efforts, then along with other users, your energy will help break the inertia that has dogged its use in recent years. And, rest assured… you’ll be in good company with W3C.org and the Mozilla foundation, among others, all on board and driving forward with you.

About the Author: Scott Frangos is a web developer, college instructor, illustrator, and graphic designer. He is Managing Editor for WebHelperMagazine, and is also writing two forthcoming books for Web Masters. He lives in Portland, Oregon with wife and partner, Pepper, and their three dogs: Wisdom, Spirit, & Steggman.