Building Web Applications with SVG - Cdn.oreilly.com

More documents

Recommendations

Info

Contents Introduction ....................................................xiii Chapter 1 SVG Basics 1 The What, Why, and Where of SVG ..................................1 The What ...................................................2 The Why ....................................................3 The Where ..................................................4 Getting Started: A Simple Overview .................................5 Viewing SVG ................................................5 Writing SVG .................................................5 Thirteen Examples That Show the Capabilities of SVG .................6 Example 1: Dynamic Random Landscape Drawn with JavaScript and SVG ...........................................6 Example 2: Equidistant Positioning Points along a Bézier Curve ...8 Example 3: Simple Animation (Just 38 Lines of Markup and No Script) ..............................................9 Example 4: Use of Gradients and Patterns ......................10 Example 5: Intersecting Clip Paths ............................11 Example 6: Animated Text Crawling Along a Bézier Curve ........13 Example 7: Animated Reflected Gradients with Transparency .....13 Example 8: Clock with Impressionist Tinge .....................14 Example 9: Using a Filter to Create Pond Ripples over an Image ..16 Example 10: Using to Simulate Digital Elevation Maps .............................................17 Example 11: Non-Affine Cobblestones ........................17 Example 12: Triangular Tiling ................................18 Example 13: A Web Application for Drawing Graphs (Networks) ..19 What do you think of this book? We want to hear from you! Microsoft is interested in hearing your feedback so we can continually improve our books and learning resources for you. to participate in a brief online survey, please visit: microsoft.com/learning/booksurvey vii
viii Contents Diving In: A Step-by-Step Approach to Building a Simple SVG Document ................................................21 Intermission and Analysis ....................................22 Screen Coordinates .........................................23 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 Chapter 2 Creating and Editing SVG Graphics 31 Creating Basic Vector Shapes ......................................32 Lines ......................................................32 Brief Review of SVG Presentation Attributes ....................33 Rectangles .................................................34 Circles .....................................................34 Ellipses ....................................................35 Polylines and Polygons .....................................35 Creativity with Basic Shapes ..................................36 Paths in SVG .....................................................38 Subcommands: M and L ..............................39 Fill Properties: nonzero and evenodd .........................40 An Example of Building Complex Shapes ............................40 Quadratic Bézier Curves: The Q Subcommand ..................42 Bézier Curve Example .......................................43 Creating Smooth Curves: The S and T Subcommands ...........46 Elliptical Arc Example .......................................47 Relative vs. Absolute Path Coordinates ........................49 Accessing and Reusing Graphics ...................................50 Referencing Vector and Bitmap Images ........................50 The Group Element .........................................50 The Element .........................................51 Creating Patterns ................................................52 Case Study: Designing a Reusable Pattern ...........................52 Adding Basic Shapes ........................................52 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58
Page 2 and 3: Want to read more? Microsoft Press
Page 6 and 7: Chapter 3 Adding Text, Style, and T
Page 8 and 9: Summary. . . . . . . . . . . . . .
Page 10 and 11: CHAPTER 1 SVG Basics I decided that
Page 12 and 13: the Why Some of the advantages of S
Page 14 and 15: Getting Started: A Simple Overview
Page 16 and 17: Here’s how it’s done: ■■ Th
Page 18 and 19: example 3: Simple Animation (Just 3
Page 20 and 21: Here’s how it’s done: ■■ Cr
Page 22 and 23: example 6: Animated text Crawling A
Page 26 and 27: example 10: Using to Simulate Digi
Page 30 and 31: Diving In: A Step-by-Step Approach
Page 32 and 33: The xmlns attribute (which appears
Page 34 and 35: 4. Change the code so that just the
Page 36 and 37: tip Until we introduce the full ran
Page 38 and 39: The preceding code introduces a new

Building Web Applications with SVG - Cdn.oreilly.com

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?