Home > Store

Designing SVG Web Graphics

Register your product to gain access to bonus material or receive a coupon.

Designing SVG Web Graphics


  • Your Price: $36.00
  • List Price: $45.00
  • We're temporarily out of stock, but order now and we'll send it to you later.


  • Copyright 2002
  • Edition: 1st
  • Book
  • ISBN-10: 0-7357-1166-6
  • ISBN-13: 978-0-7357-1166-2

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.



Click below for Downloads related to this title:
0735711666.zip (116k)

Sample Content

Downloadable Sample Chapter

Click below for Sample Chapter related to this title:

Table of Contents

Introduction SVG in Perspective.


1. The Basic SVG Tool Set.

Creating and Editing SVG. Text Editors. Vector Drawing Packages. SVG Viewers.

2. SVG Document Overview.

Syntax. Structure of an SVG Image (Document). The Preliminaries of an SVG Document. The <svg> Element. Nested SVG Elements. The <g>Element. Some Basic SVG Elements. Painter's Model. SVG Coordinate Systems. Fonts.


3. Creating Static Graphics _Elements.

Essential Building Blocks. The <rect> Element. A Simple Square. The <line> Element. The <circle> Element. The <ellipse> Element. Combining Ellipses. The <polyline> Element. The <polygon> Element. The <path> Element.

4. Using Text in SVG.

Text Basics. Text in SVG. The <text> Element. The <tspan> Element. The <tref> Element. Displaying Text on a Path.

5. Creating Navigation Bars.

Navigation Bars. Linking Web Pages Using SVG. Adding Mouseover Effects. Simple Navigation Bars. Text Navigation Bars. Tabbed Navigation Bars. Using <svg> Elements to Aid _Positioning.

6. Creating SVG Gradients.

What Are Gradients? The <linearGradient> Element. The <radialGradient> Element. SVG Gradients. Multiple <stop> Elements. SVG Gradients at Work. SVG Patterns.

7. Using SVG Filters.

Why Use Filters. Using SVG Filters. The Range of SVG Filters. Examples Using SVG Filters.

8. Animation: SVG and SMIL _Animation.

Basic Animations. SVG As an Animation Grammar. Basic Attributes of an Animation. Applying SVG Animation to SVG _Static Elements. More Complex Animations. SVG, SMIL Animation, and SMIL 2.0. The <animate> Element. The <set> Element. The <animateMotion> Element. The <animateColor> Element. The <animateTransform> Element. Rotation Using <animateTransform>. Simple Sample Animations.

9. Creating Logos and Banner Ads.

Creating Logos. Creating Banner and Other Types _of Ads in SVG.

10. Embedding SVG in HTML or _XHTML Pages.

SVG and HTML. Using the <embed> Element. Adding Scroll Bars to SVG Web _Pages. Using the <object> Element. Displaying Alternative Text or Images.

11. Creating Interactive SVG _Graphics.

Defining Interactive. SVG Events. Sample SVG Images and _Components Using Interactivity. Zooming, Panning and Scrolling _SVG Images.

12. Creating a Simple SVG _Web Site.

Creating an Entire Web Page _with SVG. Creating Web Pages with a “Graphics” Language. Who Might Use SVG As a Web _Authoring Tool? Creating SVG Web Pages. Some Sample Page Layouts.

13. Designing SVG for Use with CSS.

Cascading Style Sheets. Planning Your Text and Graphics. Sample Design: SVG and CSS.

14. When Things Go Wrong.

Minimizing Errors. Avoiding Problems by Using Good _Coding Practice. Handling Common Error Symptoms. Diagnosing and Solving Problems.


15. Planning and Building SVG Components.

Visual Components Defined. Envisioning XML and Visual _Components. Understanding the <svg> Element _and Visual Components. Using Components that Save Time _and Work. Creating a Plug-In Component and _Making It Mobile. Building a Portfolio of Visual _Components.

16. Building Your SVG Skills.

Combining Your Skills. Interactive SVG. SVG and ECMAScript. An SVG Mindset. Clipping Paths.

17. The Future of SVG.

Where Does SVG Fit in a Web _Graphics Strategy? SVG and Macromedia Flash. The Future of SVG. SVG As a Web Authoring Tool. Creating SVG Dynamically.


A. Online SVG and XML Resources.
B. SVG Glossary.
C. What's on the Web Site.


Submit Errata

More Information

Unlimited one-month access with your purchase
Free Safari Membership