Book description
Create rich interactivity with Scalable Vector Graphics (SVG)
Dive into SVG—and build striking, interactive visuals for your web applications. Led by three SVG experts, you’ll learn step-by-step how to use SVG techniques for animation, overlays, and dynamic charts and graphs. Then you’ll put it all together by building two graphic-rich applications. Get started creating dynamic visual content using web technologies you’re familiar with—such as JavaScript, CSS, DOM, and AJAX.
Discover how to:
Build client-side graphics with little impact on your web server
Create simple user interfaces for mobile and desktop web browsers
Work with complex shapes and design reusable patterns
Position, scale, and rotate text elements using SVG transforms
Create animations using the Synchronized Multimedia Integration Language (SMIL)
Build more powerful animations by manipulating SVG with JavaScript
Apply filters to sharpen, blur, warp, reconfigure colors, and more
Make use of programming libraries such as Pergola, D3, and Polymaps
Table of contents
- Dedication
- Introduction
-
1. SVG Basics
- The What, Why, and Where of SVG
- Getting Started: A Simple Overview
-
Thirteen Examples That Show the Capabilities of SVG
- Example 1: Dynamic Random Landscape Drawn with JavaScript and SVG
- Example 2: Equidistant Positioning Points along a Bézier Curve
- Example 3: Simple Animation (Just 38 Lines of Markup and No Script)
- Example 4: Use of Gradients and Patterns
- Example 5: Intersecting Clip Paths
- Example 6: Animated Text Crawling Along a Bézier Curve
- Example 7: Animated Reflected Gradients with Transparency
- Example 8: Clock with Impressionist Tinge
- Example 9: Using a Filter to Create Pond Ripples over an Image
- Example 10: Using <replicate> to Simulate Digital Elevation Maps
- Example 11: Non-Affine Cobblestones
- Example 12: Triangular Tiling
- Example 13: A Web Application for Drawing Graphs (Networks)
- Diving In: A Step-by-Step Approach to Building a Simple SVG Document
- Summary
- 2. Creating and Editing SVG Graphics
-
3. Adding Text, Style, and Transforms
- Adding and Positioning Text
- Working with Colors in SVG
- Creating Gradients in SVG
- Clipping and Masking with SVG
- Details of Transforms
- Vector Graphics, Symbol, and Button Libraries
- Accessibility
- Case Study: A Simple SVG Web Interface
- Summary
-
4. Motion and Interactivity
- Declarative Animation with SVG
- Scripting SVG
- Summary
- 5. SVG Filters
- 6. SVG Tools and Resources
- 7. Building a Web Application: Case Studies
- Index
- About the Authors
- Copyright
Product information
- Title: Building Web Applications with SVG
- Author(s):
- Release date: July 2012
- Publisher(s): Microsoft Press
- ISBN: 9780735675742
You might also like
book
Beginning SVG: A Practical Introduction to SVG using Real-World Examples
Develop SVG functionality for use within websites quickly and natively, using basic tools such as HTML …
book
Practical SVG
Level up your image workflow: from software basics to creating icon systems and implementing fallbacks, Chris …
book
Using SVG with CSS3 and HTML5
Using Scalable Vector Graphics (SVG) for illustrations only scratches the surface of this format’s potential on …
book
Modern SVG
The Scalable Vector Graphics (SVG) format has come a long way. What may have seemed like …