Thông tin tài liệu
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 mspinput@microsoft.com. 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 ctitious. 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
vii
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 Reected 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-Afne 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
www.it-ebooks.info
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
<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
www.it-ebooks.info
[...]... temporarily SVG took off xiii www.it-ebooks.info like gangbusters, with tens of thousands of developers using SVG for various sorts of interactive graphics applications (flow charts, business graphics, and mapping) But SVG adoption dropped once Adobe abandoned ASV Subsequently, the open source browser teams added SVG support (first Mozilla, then WebKit) With the open source project “SVGWeb” supporting... dynamic web applications with SVG before it became popular (or possible) to do so with other open web technologies That this was possible at the time was, in my view, nearly entirely due to Adobe’s investment in SVG and their development of the Adobe SVG Viewer plug-in It did not matter that browsers’ support for SVG was not up to scratch or did not exist at all—through the use of the Adobe plug-in, SVG. .. notion of SVG being a neat technology unsuitable for publishing on the web due to Microsoft’s intransigence This was helped by the release of SVG Web, a Flash-based SVG renderer developed by a team at Google Once again, authors had a way to target SVG content to Internet Explorer, as most Windows computers already had Flash installed Not only did SVG Web provide a way to render SVG in IE, it did so with. .. support much of the SVG specification, so you no longer need to fuss with proprietary SVG plug-ins All of these capabilities allow for a much greater degree of creativity, with complex interactivity mixing with animation and real-time data, all within the context of SVG- enhanced web applications This is ideal for modern designers and developers, as demonstrated throughout this book The What SVG is based on... languages, and terminology to deal with the complex and technical area of computer graphics, designers, programmers, and web professionals can leverage skills learned elsewhere Web applications SVG is suitable for incorporation with HTML5, web- based applications, and rich Internet applications (RIAs) The last 10 years have seen a great elevation of the status of the phrase web- based application Not so many... simple SVG file into your text editor, and save the file with the name myfirstfile .svg (you can save the file to your local hard drive or a remote server, so long as you know how to get to it from your web browser): < /svg> Chapter 1 SVG Basics 5 www.it-ebooks.info The file is also visible at http://cs.sru.edu/~ddailey /svg/ simplest .svg should... some quite simple SVG elements After you have grown accustomed to SVG, animations of this sort will be remarkably easy to create and experiment with on your own 10 Building Web Applications with SVG www.it-ebooks.info Here’s how it’s done: ■■ ■■ Creating the repeating pattern In this case, the pattern consists of two circles (one filled with an off-center radial gradient and the other with a flat color... www.it-ebooks.info Now that it’s supported in every modern browser, with tons of applications that output SVG, the W3C SVG Working Group is turning its eye toward SVG 2 What’s in the cards? Certainly more seamless integration with HTML5 and the assorted APIs that go into making awesome web apps (though most of them already work with SVG) , and a general tidying up of the language to make common tasks... plug-in (Adobe SVG Viewer) and sound alternatives to rich vector graphics in web applications (Macromedia’s Flash) But what intrigued me about native SVG support was the integration with HTML: a DOM, an event model, scripting in JavaScript, styling with CSS This would allow graphical web applications to take advantage of the AJAX bubble that was happening at the time: rich, dynamic applications that... mileposts 8 Building Web Applications with SVG www.it-ebooks.info Example 3: Simple Animation (Just 38 Lines of Markup and No Script) This example, visible at http://srufaculty.sru.edu/david.dailey /svg/ ovaling .svg, has been cited by others for the richness it achieves even with such simplicity The example uses SMIL animation to simultaneously vary 4 different attributes of 26 different objects At the SVG Open . teams added SVG support (rst Mozilla, then WebKit). With the open source project “SVGWeb” supporting older versions of SVG in IE6–8 and Microsoft’s announce- ment of SVG support in IE9, SVG has. 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. Authors were creating visually rich, graphical, dynamic web applications with SVG before it became popular (or possible) to do so with other open web technologies. That this was possible at the time
Ngày đăng: 29/03/2014, 14:20
Xem thêm: Building Web Applications with SVG ppt, Building Web Applications with SVG ppt