Building Web Applications with SVG: Add Interactivity and Motion to Your Web Applications

293 Pages·2016·25.8 MB·English

by  David Dailey

www.it-ebooks.info
www.it-ebooks.info
Building Web
Applications with SVG
David Dailey
Jon Frost
Domenico Strazzullo
www.it-ebooks.info
Published with the authorization of Microsoft Corporation by:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, California 95472
Copyright © 2012 by Jon Frost, David Dailey, Domenico Strazzullo
All rights reserved. No part of the contents of this book may be reproduced or transmitted in any form or by any
means without the written permission of the publisher.
ISBN: 978-0-7356-6012-0
1 2 3 4 5 6 7 8 9 LSI 7 6 5 4 3 2
Printed and bound in the United States of America.
Microsoft Press books are available through booksellers and distributors worldwide. If you need support related
to this book, email Microsoft Press Book Support at [email protected]. Please tell us what you think of
this book at http://www.microsoft.com/learning/booksurvey.
Microsoft and the trademarks listed at http://www.microsoft.com/about/legal/en/us/IntellectualProperty/
Trademarks/EN-US.aspx are trademarks of the Microsoft group of companies. All other marks are property of
their respective owners.
The example companies, organizations, products, domain names, email addresses, logos, people, places, and
events depicted herein are fictitious. No association with any real company, organization, product, domain name,
email address, logo, person, place, or event is intended or should be inferred.
This book expresses the author’s views and opinions. The information contained in this book is provided without
any express, statutory, or implied warranties. Neither the authors, O’Reilly Media, Inc., Microsoft Corporation,
nor its resellers, or distributors will be held liable for any damages caused or alleged to be caused either directly
or indirectly by this book.
Acquisitions and Developmental Editor: Russell Jones
Production Editor: Holly Bauer
Editorial Production: Zyg Group, LLC
Technical Reviewer: Domenico Strazzullo
Copyeditor: Zyg Group, LLC
Proofreader: Zyg Group, LLC
Indexer: Zyg Group, LLC
Cover Design: Twist Creative • Seattle
Cover Composition: Karen Montgomery
Interior Composition: Zyg Group, LLC
Illustrator: Rebecca Demarest
www.it-ebooks.info
I would like to dedicate this book to my wife, Caron: my friend
and companion on so many adventures.
—DaviD Dailey
I would like to dedicate this book to my mentors in the local
community, who consistently demonstrate their authentic pas-
sion for improving our town by regularly organizing events that
coordinate efforts to revitalize our world, and who manage it all
with an inspiring degree of heartfelt warmth and charm: Eduardo
Crespi of Centro Latino, Mark Haim and Ruth Schaefer of Peace-
Works and Sustainability, and Proffessor Miguel Ugarte.
—Jon Frost
I dedicate this book to the community of SVG adepts and
evangelists who have given so much time and effort.
—Domenico strazzullo
www.it-ebooks.info
www.it-ebooks.info
Contents at a Glance
Introduction xiii
ChApter 1 SVG Basics 1
ChApter 2 Creating and editing SVG Graphics 31
ChApter 3 Adding text, Style, and transforms 59
ChApter 4 Motion and Interactivity 89
ChApter 5 SVG Filters 145
ChApter 6 SVG tools and resources 191
ChApter 7 Building a Web Application: Case Studies 215
Index 255
www.it-ebooks.info
www.it-ebooks.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 <replicate> 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
www.it-ebooks.info
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
<path> 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 <use> Element .........................................51
Creating Patterns ................................................52
Case Study: Designing a Reusable Pattern ...........................52
Adding Basic Shapes ........................................52
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58
viii Contents
www.it-ebooks.info