Designing SVG Web Graphics

Overview

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

See more details below
Available through our Marketplace sellers.
Other sellers (Paperback)
  • All (17) from $1.99   
  • New (4) from $6.87   
  • Used (13) from $1.99   
Close
Sort by
Page 1 of 1
Showing All
Note: Marketplace items are not eligible for any BN.com coupons and promotions
$6.87
Seller since 2008

Feedback rating:

(201)

Condition:

New — never opened or used in original packaging.

Like New — packaging may have been opened. A "Like New" item is suitable to give as a gift.

Very Good — may have minor signs of wear on packaging but item works perfectly and has no damage.

Good — item is in good condition but packaging may have signs of shelf wear/aging or torn packaging. All specific defects should be noted in the Comments section associated with each item.

Acceptable — item is in working order but may show signs of wear such as scratches or torn packaging. All specific defects should be noted in the Comments section associated with each item.

Used — An item that has been opened and may show signs of wear. All specific defects should be noted in the Comments section associated with each item.

Refurbished — A used item that has been renewed or updated and verified to be in proper working condition. Not necessarily completed by the original manufacturer.

New
2001-09-15 Paperback New SHIPS FAST FROM NEW YORK.

Ships from: Niagara Falls, NY

Usually ships in 1-2 business days

  • Canadian
  • Standard, 48 States
  • Standard (AK, HI)
  • Express, 48 States
  • Express (AK, HI)
$36.22
Seller since 2014

Feedback rating:

(280)

Condition: New
Brand New Item.

Ships from: Chatham, NJ

Usually ships in 1-2 business days

  • Canadian
  • International
  • Standard, 48 States
  • Standard (AK, HI)
  • Express, 48 States
  • Express (AK, HI)
$50.00
Seller since 2014

Feedback rating:

(178)

Condition: New
Brand new.

Ships from: acton, MA

Usually ships in 1-2 business days

  • Standard, 48 States
  • Standard (AK, HI)
$51.40
Seller since 2011

Feedback rating:

(4)

Condition: New
Indianapolis, IN 2001 Trade paperback New. Trade paperback (US). Glued binding. 592 p. Contains: Illustrations. *****PLEASE NOTE: This item is shipping from an authorized ... seller in Europe. In the event that a return is necessary, you will be able to return your item within the US. To learn more about our European sellers and policies see the BookQuest FAQ section***** Read more Show Less

Ships from: LIVERPOOL, United Kingdom

Usually ships in 1-2 business days

  • Canadian
  • International
  • Standard, 48 States
  • Standard (AK, HI)
Page 1 of 1
Showing All
Close
Sort by
Sending request ...

Overview

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.

Read More Show Less

Editorial Reviews

From Barnes & Noble
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.

Read More Show Less

Product Details

  • ISBN-13: 9780735711662
  • Publisher: Pearson Education
  • Publication date: 9/15/2001
  • Series: Voices That Matter Series
  • Pages: 544
  • Product dimensions: 7.36 (w) x 9.06 (h) x 1.24 (d)

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.
Read More Show Less

Read an Excerpt

14
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.

Read More Show Less

Table of Contents

Introduction SVG in Perspective
Pt. I Getting Started with SVG 2
1 The Basic SVG Tool Set 4
2 SVG Document Overview 20
Pt. II Putting SVG to Work 56
3 Creating Static Graphics Elements 58
4 Using Text in SVG 90
5 Creating Navigation Bars 120
6 Creating SVG Gradients 150
7 Using SVG Filters 182
8 Animation: SVG and SMIL Animation 208
9 Creating Logos and Banner Ads 268
10 Embedding SVG in HTML or XHTML Pages 320
11 Creating Interactive SVG Graphics 338
12 Creating a Simple SVG Web Site 386
13 Designing SVG for Use with CSS 416
14 When Things Go Wrong 442
Pt. III Looking Ahead 464
15 Planning and Building SVG Components 466
16 Building Your SVG Skills 480
17 The Future of SVG 498
Pt. IV Appendices 510
A Online SVG and XML Resources 512
B SVG Glossary 520
C: What's on the Web Site 526
Index 529
Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)