SVG Essentials: Producing Scalable Vector Graphics with XML

by J. Eisenberg, Amelia Bellamy-Royds

Overview

Learn the essentials of Scalable Vector Graphics, the mark-up language used by most vector drawing programs and interactive web graphics tools. SVG Essentials takes you through SVG’s capabilities, beginning with simple line drawings and moving through complicated features such as filters, transformations, gradients, and patterns.

This thoroughly updated edition includes expanded coverage of animation, interactive graphics, and scripting SVG. Interactive examples online make it easy for you to experiment with SVG features in your web browser. Geared toward experienced designers, this book also includes appendices that explain basic concepts such as XML markup and CSS styling, so even if you have no web design experience, you can start learning SVG.

• Create and style graphics to match your web design in a way that looks great when printed or displayed on high-resolution screens
• Make your charts and decorative headings accessible to search engines and assistive technologies
• Add artistic effects to your graphics, text, and photographs using SVG masks, filters, and transformations
• Animate graphics with SVG markup, or add interactivity with CSS and JavaScript
• Create SVG from existing vector data or XML data, using programming languages and XSLT

Product Details

ISBN-13:	9781449374358
Publisher:	O'Reilly Media, Incorporated
Publication date:	10/30/2014
Pages:	364
Product dimensions:	7.00(w) x 9.10(h) x 0.90(d)

About the Author

J. David Eisenberg is a programmer and instructor living in San Jose, California. David has a talent for teaching and explaining. He has developed courses for CSS, JavaScript, CGI, and beginning XML. He also teaches C and Perl at De Anza Community College in Cupertino. David has written articles for xml.com and alisapart.com on topics such as Javascript and the Document Object Model, XML validation, XSL Transformations and Formatting Objects, and (surprise) SVG. His on-line courses provide introductory tutorials for Korean, Modern Greek, and Russian. David has also been developing education software since 1975, when he worked with the Modern Foreign Language project at the Universityof Illinois to develop computer-assisted instruction on the PLATO system. He co-authored several of the in-box tutorials shipped with the venerable Apple II computer. David did the programming for the multimedia CD-ROM version of a series of children's stories, and the programming for beginning Algebra and Spanish discs. When not programming, David enjoys digital photography, reading science fiction, and riding his bicycle.

Amelia Bellamy-Royds is a freelance writer specializing in scientific and technical communication. She helps promote web standards and design through participation in online communities such as Web Platform Docs, Stack Exchange and Codepen. Her interest in SVG stems from work in data visualization, and builds upon the programming fundamentals she learned while earning a B.Sc. in bioinformatics. A policy research job for the Canadian Library of Parliament convinced her that she was more interested in discussing the big-picture applications of scientific research than doing the laboratory work herself, leading to graduate studies in journalism. She currently lives in Edmonton, Alberta. If she isn't at a computer, she's probably digging in her vegetable garden or out enjoying live music.

Table of Contents

	Preface	xi
1.	Getting Started	1
	Graphics Systems	1
	Scalability	4
	SVG's Role	6
	Creating an SVG Graphic	7
2.	Coordinates	15
	The Viewport	15
	Using Default User Coordinates	16
	Specifying User Coordinates for a Viewport	17
	Preserving Aspect Ratio	20
	Nested Systems of Coordinates	24
3.	Basic Shapes	27
	Lines	27
	Stroke Characteristics	28
	Rectangles	32
	Circles and Ellipses	35
	The polygon Element	36
	The polyline Element	38
	Line Caps and Joins	39
	Basic Shapes Reference Summary	41
4.	Document Structure	44
	Structure and Presentation	44
	Using Styles with SVG	45
	Document Structure--Grouping and Referencing Objects	49
5.	Transforming the Coordinate System	57
	The translate Transformation	57
	The scale Transformation	59
	Sequences of Transformations	63
	Technique: Converting from Cartesian Coordinates	65
	The rotate Transformation	68
	Technique: Scaling Around a Center Point	70
	The skewX and skewY Transformations	71
	Transformation Reference Summary	72
6.	Paths	74
	Moveto, lineto, and closepath	74
	Relative moveto and lineto	76
	Path Shortcuts	77
	Elliptical Arc	79
	Technique: Converting from Other Arc Formats	81
	Bezier Curves	87
	Path Reference Summary	93
	Paths and Filling	94
	The marker element	95
	Marker Miscellanea	99
7.	Patterns and Gradients	101
	Patterns	101
	Gradients	107
	Transforming Gradients and Patterns	116
8.	Text	118
	Text Terminology	118
	Simple Attributes and Properties of the text Element	119
	Text Alignment	122
	The tspan element	122
	Setting textLength	126
	Vertical Text	126
	Internationalization and Text	128
	Text on a Path	131
	Whitespace and Text	134
	Case Study--Adding Text to a Graphic	135
9.	Clipping and Masking	137
	Clipping to a Path	137
	Masking	141
	Case Study--Masking a Graphic	145
10.	Filters	147
	How Filters Work	148
	Creating a Drop Shadow	148
	Creating a Glowing Shadow	151
	The feImage Filter	155
	The feComponentTransfer Filter	156
	The feComposite Filter	161
	The feBlend Filter	164
	The feFlood and feTile Filters	165
	Lighting Effects	167
	Accessing the Background	172
	The feMorphology Element	173
	The feConvolveMatrix Element	174
	The feDisplacementMap Element	176
	The feTurbulence Element	178
	Filter Reference Summary	180
11.	Animating and Scripting SVG	183
	Animation Basics	183
	How Time Is Measured	186
	Repeated Action	188
	The set Element	189
	The animateColor Element	190
	The animateTransform Element	190
	The animateMotion Element	192
	Using Links in SVG	194
	Scripting SVG	195
12.	Generating SVG	217
	Using Perl to Convert Custom Data to SVG	218
	Using Java to Convert XML to SVG	223
	Using XSLT to Convert XML Data to SVG	241
13.	Serving SVG Files	258
	Serving Web Files--The Task at Hand	258
	Partitioning the Task	259
	Setting up the Server	275
A.	The XML You Need for SVG	277
B.	Introduction to Stylesheets	291
C.	Programming Concepts	299
D.	Matrix Algebra	309
E.	Creating Fonts	317
F.	Using SVG with Other XML Applications	320
	Index	327