SVG for Designers: Using Scalable Vector Graphics in Next-Generation Web Sites

by Bill Trippe, Kate Binder

Overview

An exploration of scalable vector graphics (SVG) from both a design and a programming perspective. It provides users with explanations on creating graphics and using SVG with other applications.

Product Details

ISBN-13:	9780072225297
Publisher:	McGraw-Hill/Osborne Media
Publication date:	08/21/2002
Series:	Consumer Series
Pages:	336
Product dimensions:	7.32(w) x 9.16(h) x 0.90(d)

Table of Contents

	Acknowledgments	XIII
	Introduction	XV
I	Understanding SVG
1	The SVG Standard	3
	Bringing Vector Graphics to the Web	7
	A Hypothetical SVG Application	8
	SVG's Potential Impact	13
	Advantages of SVG	15
	Advantages of Quality and Performance	15
	SVG and Data-Driven Graphics	17
	SVG and Interactive Graphics	19
	SVG and Personalized Graphics	19
	Potential Applications	21
	Conclusion	23
2	Understanding XML	25
	Just Enough XML	27
	XML versus HTML	27
	XML's Advantages over HTML	30
	Understanding XML and Style Sheets	33
	Understanding Namespaces	40
	Looking Under the Hood at SVG Files	42
	The Primary Tags, Including [left angle bracket]svg[right angle bracket], [left angle bracket]g[right angle bracket], [left angle bracket]text[right angle bracket], and [left angle bracket]style[right angle bracket]	42
	Some Simple Examples of SVG	44
	Creating and Displaying an SVG File	47
II	Creating SVG Graphics
3	Creating SVG Images with Jasc WebDraw	53
	About Illustration Software	55
	WebDraw Basics	55
	The WebDraw Workspace	56
	Working with WebDraw's Tools	65
	Working with SVG Images in WebDraw	68
	Opening SVG Images	68
	Creating SVG Images	69
	Filling Objects with Colors, Gradients, and Patterns	70
	Adding Text and Raster Images to Drawings	76
	Applying Filter Effects and Transformations	79
	Adding Animation	84
	Saving SVG Images	86
4	Creating SVG Images with Adobe Illustrator	87
	Illustrator Basics	89
	The Illustrator Workspace	89
	Drawing Objects	95
	Using Filters and Effects	103
	Working with Type	104
	Arranging Objects	109
	Saving Time with Swatches, Styles, and Symbols	110
	Working with SVG Images in Illustrator	114
	Opening SVG Images	114
	Adding SVG Features	114
	Saving SVG Images	121
	Illustrator's SVG Do's and Don'ts	123
5	Creating SVG Images with CorelDRAW	125
	CorelDRAW Basics	126
	The CorelDRAW Workspace	127
	Drawing Objects	134
	Working with Type	138
	Using Filters and Effects	142
	Arranging Objects	144
	Getting SVG Images Into and Out of CorelDRAW	146
	Opening SVG Images	146
	Exporting SVG Images	147
6	Creating SVG Images with Other Drawing Apps	151
	Designing with Mayura Draw	152
	Designing with Virtual Mechanics' IMS Web Engine	156
	Designing with XML Spy	160
	Other Tools to Keep an Eye On	160
	SVG Studio	161
	GraPL	162
	Oak Draw	163
	IsoDraw	163
	SVGmaker	164
	Batik SVG Toolkit	164
	Plazmic Workshop Start	164
III	SVG in Context--Flash, Web Design, and Dynamic SVG
7	SVG for Flash Designers	167
	What's the Difference?	169
	Ownership	169
	Accessibility	171
	Interoperability	173
	Scalability	174
	Workflow	175
	Which Should You Use?	175
	When to Choose SVG	176
	When to Choose SWF	177
	Moving from SVG to Flash and Back	178
8	Incorporating SVG in Web Sites	179
	SVG and Browser Basics	180
	Simple Case: Embedding SVG In an HTML Page	183
	Using the Object Element	185
	Some Practical Considerations	190
	W3C Amaya	190
	Browsing SVG Images with Amaya	191
	Using the Amaya Editor	196
	Adobe GoLive	200
	Adode GoLive and "Smart Objects"	200
	Web Browser Support for SVG	203
9	Generating SVG on the Fly	205
	Adobe AlterCast	207
	Product Requirements	208
	AlterCast in Action	209
	Summing Up AlterCast	218
	GraPL.net	220
	Product Requirements	220
	GraPL.net in Action	220
	Summing Up GraPL.net	229
	Savage Software DataSlinger	230
	Product Requirements	230
	DataSlinger in Action	231
	Summing Up DataSlinger	236
	Conclusion	239
10	SVG Futures	241
	SVG and Related W3C Efforts	246
	SVG Tools and Trends	248
	SVG for Application Development	250
	Other Future Trends	250
	Conclusion	255
IV	Appendixes
A	Understanding SVG Syntax in Depth	261
	File Basics	262
	XML Declaration	262
	Document Type Declaration	263
	Everything Else	264
	The SVG Element	264
	Attributes for the SVG Element	265
	Presentation-Oriented Attributes: %PresentationAttributes-All	269
	Description of Major Elements	272
B	Example Files	287
Chapter 3	splash.svg	288
Chapter 4	navbar.svg	291
Chapter 5	brindle.svg	296
	Index	303