Designing SVG Web Graphics
Designing SVG Web Graphics presents real-world examples of design tasks (such as creating a logo, navigation bar, or even a full web page) embedded within the strict XML aspects of SVG.
Designing SVG Web Graphics
Introduction
- SVG in Perspective
- The Key Web Design Principles Apply
- Why Was SVG Needed and Created?
- Limitations of Bitmap Graphics
- The Birth of SVG
- How Is SVG Different?
- More SVG Capabilities
- Restyle Your Graphics or Web Site Using CSS
- SVG As Visual Components
- Synergy with Other XML Technologies
- SVG Limitations
- Creating and Editing SVG
- Text Editors
- Vector Drawing Packages
- SVG Viewers Chapter 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 Part II: Putting SVG to Work Chapter 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 Chapter 4. Using Text in SVG
- Text Basics
- Text in SVG
- The <text> Element
- The <tspan> Element
- The <tref> Element
- Displaying Text on a Path Chapter 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 Chapter 6. Creating SVG Gradients
- What Are Gradients?
- The <linearGradient> Element
- The <radialGradient> Element
- SVG Gradients
- Multiple <stop> Elements
- SVG Gradients at Work
- SVG Patterns Chapter 7. Using SVG Filters
- Why Use Filters
- Using SVG Filters
- The Range of SVG Filters
- Examples Using SVG Filters Chapter 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 Chapter 9. Creating Logos and Banner Ads
- Creating Logos
- Creating Banner and Other Types of Ads in SVG Chapter 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 Chapter 11. Creating Interactive SVG Graphics
- Defining Interactive
- SVG Events
- Sample SVG Images and Components Using Interactivity
- Zooming, Panning and Scrolling SVG Images Chapter 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 Chapter 13. Designing SVG for Use with CSS
- Cascading Style Sheets
- Planning Your Text and Graphics
- Sample Design: SVG and CSS Chapter 14. When Things Go Wrong
- Minimizing Errors
- Avoiding Problems by Using Good Coding Practice
- Handling Common Error Symptoms
- Diagnosing and Solving Problems Part III: Looking Ahead Chapter 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 Chapter 16. Building Your SVG Skills
- Combining Your Skills
- Interactive SVG
- SVG and ECMAScript
- An SVG Mindset
- Clipping Paths Chapter 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 Part IV: Appendices Appendix A. Online SVG and XML Resources
- SVG at the W3C
- SVG Viewers
- SVG Tools
- SVG Tutorials and Demos
- SVG References
- Server-Side SVG
- XML Resources Appendix B. SVG Glossary Appendix C. What's on the Web Site
- SVGSpider
- Source Files
Designing SVG Web Graphics explains to you the principles of SVG and shows you how to create SVG graphics for the Web. You might find it hard to believe, but, with the arrival of SVG, the world of Web graphics will never be the same. SVG will replace many uses of bitmap graphics on the Web—as Web page "furniture," such as navigation bars and graphics, animations, and banner ads—and provide serious competition to graphics produced in a proprietary vector graphics format, such as Flash.