Designing SVG Web Graphics

Designing SVG Web Graphics

by Andrew H. Watt
Released September 2001
Publisher(s): Que
ISBN: 9780735711662

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Copyright
  2. About the Author
  3. About the Tech Editors
  4. Acknowledgments
  5. Introduction
  6. Getting Started with SVG
    1. The Basic SVG Tool Set
      1. Creating and Editing SVG
      2. Text Editors
      3. Vector Drawing Packages
      4. SVG Viewers
    2. SVG Document Overview
      1. Syntax
      2. Structure of an SVG Image (Document)
      3. The Preliminaries of an SVG Document
      4. The <svg> Element
      5. Nested SVG Elements
      6. The <g> Element
      7. Some Basic SVG Elements
      8. Painter’s Model
      9. SVG Coordinate Systems
      10. Fonts
  7. Putting SVG to Work
    1. Creating Static Graphics Elements
      1. Essential Building Blocks
      2. The <rect> Element
      3. A Simple Square
      4. The <line> Element
      5. The <circle> Element
      6. The <ellipse> Element
      7. Combining Ellipses
      8. The <polyline> Element
      9. The <polygon> Element
      10. The <path> Element
    2. Using Text in SVG
      1. Text Basics
      2. Text in SVG
      3. The <text> Element
      4. The <tspan> Element
      5. The <tref> Element
      6. Displaying Text on a Path
    3. Creating Navigation Bars
      1. Navigation Bars
      2. Linking Web Pages Using SVG
      3. Adding Mouseover Effects
      4. Simple Navigation Bars
      5. Text Navigation Bars
      6. Tabbed Navigation Bars
      7. Using <svg> Elements to Aid Positioning
    4. Creating SVG Gradients
      1. What Are Gradients?
      2. The <linearGradient> Element
      3. The <radialGradient> Element
      4. SVG Gradients
      5. Multiple <stop> Elements
      6. SVG Gradients at Work
      7. SVG Patterns
    5. Using SVG Filters
      1. Why Use Filters
      2. Using SVG Filters
      3. The Range of SVG Filters
      4. Examples Using SVG Filters
    6. Animation: SVG and SMIL Animation
      1. Basic Animations
      2. SVG As an Animation Grammar
      3. Basic Attributes of an Animation
      4. Applying SVG Animation to SVG Static Elements
      5. More Complex Animations
      6. SVG, SMIL Animation, and SMIL 2.0
      7. The <animate> Element
      8. The <set> Element
      9. The <animateMotion> Element
      10. The <animateColor> Element
      11. The <animateTransform> Element
      12. Rotation Using <animateTransform>
      13. Simple Sample Animations
    7. Creating Logos and Banner Ads
      1. Creating Logos
      2. Creating Banner and Other Types of Ads in SVG
    8. Embedding SVG in HTML or XHTML Pages
      1. SVG and HTML
      2. Using the <embed> Element
      3. Adding Scroll Bars to SVG Web Pages
      4. Using the <object> Element
      5. Displaying Alternative Text or Images
    9. Creating Interactive SVG Graphics
      1. Defining Interactive
      2. SVG Events
      3. Sample SVG Images and Components Using Interactivity
      4. Zooming, Panning and Scrolling SVG Images
    10. Creating a Simple SVG Web Site
      1. Creating an Entire Web Page with SVG
      2. Creating Web Pages with a “Graphics” Language
      3. Who Might Use SVG As a Web Authoring Tool?
      4. Creating SVG Web Pages
      5. Some Sample Page Layouts
    11. Designing SVG for Use with CSS
      1. Cascading Style Sheets
      2. Planning Your Text and Graphics
      3. Sample Design: SVG and CSS
    12. When Things Go Wrong
      1. Minimizing Errors
      2. Avoiding Problems by Using Good Coding Practice
      3. Handling Common Error Symptoms
      4. Diagnosing and Solving Problems
  8. Looking Ahead
    1. Planning and Building SVG Components
      1. Visual Components Defined
      2. Envisioning XML and Visual Components
      3. Understanding the <svg> Element and Visual Components
      4. Using Components that Save Time and Work
      5. Creating a Plug-In Component and Making It Mobile
      6. Building a Portfolio of Visual Components
    2. Building Your SVG Skills
      1. Combining Your Skills
      2. Interactive SVG
      3. SVG and ECMAScript
      4. An SVG Mindset
      5. Clipping Paths
    3. The Future of SVG
      1. Where Does SVG Fit in a Web Graphics Strategy?
      2. SVG and Macromedia Flash
      3. The Future of SVG
      4. SVG As a Web Authoring Tool
      5. Creating SVG Dynamically
  9. Appendices
    1. Online SVG and XML Resources
      1. SVG at the W3C
      2. SVG Viewers
      3. SVG Tools
      4. SVG Tutorials and Demos
      5. SVG References
      6. Server-Side SVG
      7. XML Resources
    2. SVG Glossary
    3. What’s on the Web Site
      1. SVGSpider
      2. Source Files
      3. Feedback

Product information

  • Title: Designing SVG Web Graphics
  • Author(s): Andrew H. Watt
  • Release date: September 2001
  • Publisher(s): Que
  • ISBN: 9780735711662