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 Sample Chapter related to this title:
Introduction SVG in Perspective.
I. GETTING STARTED WITH SVG.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.
II. PUTTING SVG TO WORK.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.
III. LOOKING AHEAD.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.
IV. APPENDICES.A. Online SVG and XML Resources.