Uh-oh, it looks like your Internet Explorer is out of date.

For a better shopping experience, please upgrade now.

Designing SVG Web Graphics

Designing SVG Web Graphics

by Andrew H. Watt, Watt, Andrew

Using a heavily illustrated, step-by-step style, Watt aims to ease designers into a more analytical, programming approach to graphics without losing the appeal of form and design. The change in mindset required of graphic designers in exploiting "visual components" is explained clearly and practically. While presenting real-world examples of design tasks (such as


Using a heavily illustrated, step-by-step style, Watt aims to ease designers into a more analytical, programming approach to graphics without losing the appeal of form and design. The change in mindset required of graphic designers in exploiting "visual components" is explained clearly and practically. While presenting real-world examples of design tasks (such as creating a logo, navigation bar, or a full web page), Watt embeds sidebars, notes, and tips to convey the strict programming portion of the process. This makes it easier for the reader to balance the formality of the SVG code with the functionality of the design.The book assumes no prior knowledge of SVG and provides the foundational information for the reader to grasp the key concepts.In addition, and importantly, it contains source code for all of the SVG images and animations created in the book. This educates the readers in how SVG works and lays a foundation for their own experiments.

Editorial Reviews

The Barnes & Noble Review
Using SVG, web designers and developers can gain unprecedented structural and visual control over their graphics. What's more, since SVG is based on XML, you can integrate and personalize graphics on the fly, drawing from back-end databases and other information sources. In short, SVG lets you build web apps that would've been totally impossible before.

That's the hype. But if you want to actually use SVG graphics, where do you start? Here: Designing SVG Web Graphics by Andrew H. Watt. Using a wide range of examples -- including logos, navbars, banner ads, pages, and entire sites -- Watt shows you how SVG works. You'll learn exactly how the XML-based code translates into the graphic. This may be somewhat more analytical than some graphic designers are accustomed to, but the benefits are huge: Since you understand the code, you can manipulate it directly.

Along the way, Watt teaches you all you need to know about SVG viewers, the structure of SVG documents, creating static graphics, incorporating text, using gradients and filters, and -- ultimately -- creating slick animations and interactive graphics. You'll also learn how SVG fits with your existing tools (and especially its relationship to Flash) -- and where it ought to fit in your overall web graphics strategy. (Bill Camarda)

Bill Camarda is a consultant, writer, and web/multimedia content developer with nearly 20 years' experience in helping technology companies deploy and market advanced software, computing, and networking products and services. His 15 books include Special Edition Using Word 2000 and Upgrading & Fixing Networks For Dummies®, Second Edition.

Product Details

Pearson Education
Publication date:
Voices That Matter Series
Product dimensions:
7.36(w) x 9.06(h) x 1.24(d)

Read an Excerpt

When Things Go Wrong

Minimizing Errors

Inevitably, at some time during your use of SVG, things go wrong. Particularly during your first efforts to hand-code or to tweak by hand some code that was generated by a vector drawing package, you might find things going visibly awry. In this chapter, I describe an approach to keep serious errors to a minimum, discuss symptoms of commonly occurring errors, and show you an approach to diagnosing and solving problems that you might inadvertently create.

I hope that you don't get the wrong idea from this chapter and come away with the impression that SVG is impossibly complex. It isn't. However, things can go wrong in a number of ways, particularly in the learning phase. Being aware of them and of the solutions might save you time and increase the fun you have creating SVG images.

Avoiding Problems by Using Good Coding Practice

I suggest that you change, particularly during your early attempts at hand coding, only one thing at a time, whether that is adding an element, altering an attribute, or adding or refining some animation.

Let me repeat that: Change only one thing at a time when you are learning SVG coding. It helps your sanity!

If you change more than one thing at a time and you move from having an SVG image that is displayed correctly to one that isn't displayed as you want or, worse, isn't displayed at all, diagnosing and fixing can be quite a tussle. In the interest of sparing yourself avoidable frustration, change one thing at a time and view the result in an SVG viewer after each step.

This is good advice when you are working with the code for complex images too. You can make lots of potential tweaks that can cause problems. You might, in a flight of creative fancy, change five or ten things, one after the other, without checking the effect, and then find that the nice image is now broken and that you can remember only nine of the ten things you tweaked.

You get the idea. Work logically and systematically-it saves time and frustration in the long run.

Use an XML-aware editor

One aid to avoiding problems when coding SVG is to use an XML-aware editor. You can craft, on Windows systems, SVG images in the simplest text editor, like Notepad. However, I suggest that you think seriously about obtaining an XML-aware text editor.

An XML-aware text editor provides two simple but important aids. You can typically check to see whether the SVG document is well formed. In other words, the XML-aware text editor identifies whether your code conforms to the XML rules, and, if it doesn't, the editor identifies the line on which your first syntax error exists.

Often in parallel with the ability to check for well-formedness, an XMLaware text editor also has a color-coding facility for your code. If you omit quotation marks on an attribute or forget the closing angled bracket on an element, you have some assistance by means of an unusual color pattern in identifying exactly where the problem is.

One XML-aware text editor I like is XML Writer. It is by no means the most sophisticated XML editor around, although it does the simple, basic things well and without fuss. My strongest recommendation is that, for a basic everyday tool, it doesn't get in the way. Further information on XML Writer is available from http://www.xmlwriter.com/. A 30-day free evaluation version is usually available.

Many other XML editors are available that also have evaluation downloads. For further options, take a look at http://www.xmlsoftware.com or a similar site, for a list of XML tools. Some HTML editors, such as Allaire Homesite, can provide color coding, but without the ability to check XML well-formedness, they are of limited help.

Of course, an XML-aware editor doesn't solve all your problems. For example, covering over your nice image with a plain rectangle is perfectly legal, although not sensible. The editor doesn't point out that if you intended for the rectangle to be the background, but forgot about the SVG painter's model and placed the rectangle late in the document, it covers up something else. Nor does the editor prevent you from trying to place white text on a white background.

Construct visual components

Just as making one change and testing the effect is sensible, constructing complex SVG images and documents as visual components is helpful. If you have created and tested an SVG visual component, you know that the component was working and, assuming that you pasted it into the correct part of the document, is unlikely to have caused the problem. Because yon might have imported a text component with black text to display on your nice, new black background, however, it is always possible that the component is indeed the problem.

Meet the Author

Andrew H. Watt is an independent web consultant, and principal of XMML.com, specializing in XML technologies as well as more traditional web technologies such as HTML/XHTML, Java, and Lotus Domino. Andrew wrote his first programs in 6502 Assembler and BBC Basic in the mid-eighties. In 1994 he was exposed to the power of the World Wide Web. In 1996 he was excited by the power of the Lotus Domino and more recently has focussed on XML-based technologies. SVG is a key interest in that area. His work with SVG has included the development of SVGSpider.com-the world's "first" all-SVG Web site.

Customer Reviews

Average Review:

Post to your social network


Most Helpful Customer Reviews

See all customer reviews