Designing SVG Web Graphics [Paperback]

Andrew H. Watt (Author)

Book Description

Publication Date: September 15, 2001

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

From the Publisher

Ahh, now here’s something: An SVG book (if you haven’t heard about SVG yet, you probably will, and soon) for the non-programmer. For pure web designers, and for designers who do development (Right-brained coders? Left-brained designers? Can engineers be poets? Can artists build monuments?). Enigmatic, maybe; bound-to-be-welcomed by those tired of gray coding references? Might well be the case.

Every web designer and developer at least needs to be aware of SVG and the benefits of using this new W3C standard for creating and implementing graphics with XML. Scalable Vector Graphics is a tool that you deserve to know how to use as needed, just like developing with Flash’s proprietary SWF format is a tool you likely need in your design/development toolbox.

The biggest thing to remember is this: As a developer or designer, you probably DON’T want to embrace one format to the exclusion of the other. Neither one is going away, and each has its distinct advantages, depending on what you need to do and how you want to accomplish your development goal.

Andrew Watt’s Designing SVG Web Graphics is 600 pages of all you need for understanding, designing with, and painlessly mastering SVG in your web design and development work. It looks terrific, it’s easy to follow, it’s NOT for idiots, and it’s written by one of the few people in the world who’ve been developing with SVG since it first appeared and who can teach it to designers and coders just becoming familiar with it.

From the Back Cover

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.

See all Editorial Reviews

Product Details

• Paperback: 592 pages
• Publisher: New Riders Press; 1st edition (September 15, 2001)
• Language: English
• ISBN-10: 0735711666
• ISBN-13: 978-0735711662
• Product Dimensions: 9.1 x 7.4 x 1.2 inches
• Shipping Weight: 2.1 pounds
• Average Customer Review: 3.8 out of 5 stars  See all reviews (6 customer reviews)
• Amazon Best Sellers Rank: #2,177,276 in Books (See Top 100 in Books)

More About the Author

Discover books, learn about writers, read author blogs, and more.

Customer Reviews

Most Helpful Customer Reviews

7 of 8 people found the following review helpful:

5.0 out of 5 stars A must have for your graphics library ..., September 24, 2001

By A Customer

This review is from: Designing SVG Web Graphics (Paperback)

I just got this book two days ago and I have not been able to put it down since. Mr. Watt does a fine job of decribing what SVG is and how it works. I have worked with Vector Markup Language (VML) over the last year and have been eager to dive into SVG ... this book has converted me for good. If you have experience with creating vector images with VML, you will have no problem breezing through the book. If you have not had a lot of experience, the book gives tons of examples that don't take much time to write the code and render on screen so you can see what the code does. If you are a graphic designer that uses Flash (or not), I highly suggest picking up this book. You will find that while you may want to continue creating large-scale projects in Flash, medium and small projects can be done with far less overhead file-wise with SVG. I hope that Mr. Watt has an Advanced SVG book in progress ... I should be done with this one by the end of the week!

19 of 25 people found the following review helpful:

1.0 out of 5 stars Great technology, terrible book: lacks scripting, reference, November 12, 2001

By 

Rob Knight (Boulder, CO) - See all my reviews

This review is from: Designing SVG Web Graphics (Paperback)

I was excited to find a book about SVG finally in print: the technology will clearly revolutionize the web. Unfortunately, this book is totally inadequate for all but the simplest introduction to SVG, perhaps as a guide to editing the output of graphics packages.

The code examples will make any programmer cringe, as the same extensive property settings are declared over and over again for related objects. This produces dozens of lines of unmaintainable code where 5 lines of JavaScript would suffice. In fact, there is practically no discussion of generating SVG programmatically using Perl or Javascript. Although there is a chapter on "interactive graphics", it basically covers menus and rollover effects. If you were hoping for something on data-driven graphics, look elsewhere, because this topic is strangely absent from the book.

Worse, external CSS style sheets are only introduced in a desultory way near the end of the book, after hundreds of pages of code examples with the same inline styles declared over and over again and applied to every object individually. The code examples would be many pages shorter, and far more readable and maintainable, had CSS been introduced early and used appropriately.

Finally, there is no reference section. If you are hoping to find (for example) a list of methods and properties for each object, DO NOT BUY THIS BOOK! There are too many shocking omissions to list. One example is that animatable transformations such as scaling are simply not discussed. The author gives an example of a series of animated rectangles, where the sizes are altered by changing the individual width and height attributes. Worse, if you look up "scale" in the index, you'll find an example of a graphical scale (think ruler) where each of the lines is an individual object defined by hand, presumably by cutting and pasting the line of text and changing the x offset!

Unfortunately, at present there is NO adequate book on SVG for programmers. This book, however, is unsuitable even for designers (its primary audience) because it encourages excruciating coding habits and ignores the tremendous possibilities for automating repetitive design tasks.

4 of 5 people found the following review helpful:

5.0 out of 5 stars SVG, unlike anything you have ever seen, October 27, 2001

By 

Brett Merkey (Palm Harbor, FL United States) - See all my reviews
(REAL NAME)   

This review is from: Designing SVG Web Graphics (Paperback)

Remember the first time you used "View Source" in your browser to learn from someone who knew something you did not? Because you learned well and fast, you made a living from HTML. The Web grew so explosively partly because we were all learning that way.

Now imagine the same thing happening in Web graphics. A text-based graphics format, with source open for all to learn. SVG, as an application of XML, brings the potential of data-driven graphics to the Web. The graphic is the data and the data is the graphic, cutting out all middle layers.

This is not a book about pretty pictures, although it is well illustrated. It is code-centric and by necessity focuses on SVG tags and attributes.

The author expertly leads us in easy steps. The book is surprisingly easy to read. The author often changes tempo, removing us for a moment from the code and infusing a relaxed perspective, despite his obvious enthusiasm for this technology.

The author assumes a basic understanding of XML syntax and some knowledge of applied cascading style sheets (CSS). XLink and XPointer are covered only to the extent necessary for linking in SVG, for instance. CSS, designed for XML applications as much as for HTML, is used from the very beginning, displaying once again the ability of CSS to multiply the power and flexibility of any tagging system it is joined to.

The typography of the book, and the modest but effective use of color, contributes to the clarity of the exposition. The beginner should be aware that to follow along in the book, it is necessary to download freely available graphics tools and browser plug-ins almost 7 megabytes in total.

SVG is a graphics format unlike anything you have ever seen. It has not yet taken center stage in Web development -- but it will. Will you be ready or will you be playing catch up?