SVG Essentials

SVG Essential.pdf......Page 0
Table of Content......Page 2
If You\'re Still Reading This.........Page 6
About the Examples......Page 7
Request for Comments......Page 11
Acknowledgments......Page 12
Figure 1-2. Vector graphic rectangle......Page 13
1.1.4 Uses of Vector Graphics......Page 14
Figure 1-5. Expanded raster image......Page 15
Figure 1-7. Expanded vector image......Page 16
1.4 Creating an SVG Graphic......Page 17
Figure 1-8. Stage one -- circle......Page 18
Example 1-4. Basic shapes -- lines......Page 19
Figure 1-11. Stage four -- left whiskers......Page 20
Figure 1-12. Stage five -- ears and mouth......Page 21
1.4.8 Text......Page 22
Example 1-8. Text......Page 23
2.1 The Viewport......Page 24
Figure 2-1. Rectangle using default coordinates......Page 25
Figure 2-3. Viewport with units; rectangle without units......Page 26
Example 2-4. Using a viewBox......Page 27
2.4 Preserving Aspect Ratio......Page 28
Table?2-1. Values for alignment portion of preserveAspectRatio......Page 29
Figure 2-5. meet -- viewBox fits in viewport......Page 30
Figure 2-6. slice -- graphic fills viewport......Page 31
2.5 Nested Systems of Coordinates......Page 32
Figure 2-9. Circle in main viewport......Page 33
Figure 2-10. Circle and boundary box in main viewport......Page 34
3.2 Stroke Characteristics......Page 35
3.2.2 stroke Color......Page 36
3.2.3 stroke-opacity......Page 37
Example 3-5. Demonstration of stroke-dasharray......Page 38
Example 3-6. Demonstration of the rectangle element......Page 39
Figure 3-7. Closeup of transparent border......Page 40
3.4 Circles and Ellipses......Page 41
Example 3-9. Demonstration of the polygon element......Page 42
Figure 3-11. Unfilled polygon with intersecting lines......Page 43
Figure 3-12. Effect of different fill-rules......Page 44
Example 3-13. Values of the stroke-linecap property......Page 45
3.8 Basic Shapes Reference Summary......Page 46
3.8.2 Specifying Colors......Page 47
Table?3-3. Fill characteristics......Page 48
4.2 Using Styles with SVG......Page 49
Figure 4-2. Internal stylesheet with SVG......Page 50
Example 4-4. SVG file that references an external stylesheet......Page 51
4.3 Document Structure – Grouping and Referencing......Page 52
Example 4-5. Simple use of the g element......Page 53
4.3.3 The defs Element......Page 54
Example 4-6. Example of the defs element......Page 55
Figure 4-6. Result of using groups within defs......Page 56
Figure 4-7. Groups versus symbols......Page 57
Example 4-8. Use of the image element......Page 58
Example 5-2. Moving the coordinate system with translation......Page 60
Figure 5-3. How moving with translate really works......Page 61
Figure 5-4. Result of using scale transformation......Page 62
Figure 5-6. Result of using non-uniform scale transformation......Page 63
5.3 Sequences of Transformations......Page 64
Figure 5-9. How translate followed by scale works......Page 65
Figure 5-10. Result of scale followed by translate......Page 66
Example 5-7. Direct use of Cartesian coordinates......Page 67
Figure 5-14. Transformed Cartesian coordinates......Page 68
Figure 5-16. Result of rotation around the origin......Page 69
Example 5-10. Rotation around a center point......Page 70
Figure 5-19. Result of scaling around a center point......Page 71
Example 5-12. skewX and skewY......Page 72
Table?5-1. SVG transformations......Page 73
Example 6-1. Using moveto and lineto......Page 74
Example 6-2. Using closepath......Page 75
6.3.1 The Horizontal lineto and Vertical lineto Commands......Page 76
Figure 6-3. Result of drawing a diamond with a path......Page 77
Figure 6-4. Variations of the elliptical arc command......Page 78
6.5 Technique: Converting from Other Arc Formats......Page 80
6.6 Bézier Curves......Page 87
Figure 6-7. Visualizing a quadratic Bézier curve......Page 88
Figure 6-9. Smooth quadratic polybézier curve......Page 89
Figure 6-10. Visualizing a cubic Bézier curve......Page 90
Figure 6-12. Cubic polybézier curve......Page 91
Table?6-1. Path commands......Page 92
Figure 6-14. Result of using different fill-rule values......Page 93
Example 6-5. First attempt at circular marker......Page 94
Example 6-7. Attempt to use three markers......Page 95
Example 6-8. Correctly oriented markers......Page 96
Figure 6-20. Using a single marker for all vertices......Page 97
Example 7-2. Tiles spaced with patternUnits set to objectBoundingBox......Page 99
Example 7-3. Tiles spaced with patternUnits set to userSpaceOnUse......Page 100
Example 7-4. patternContentUnits set to objectBoundingBox......Page 101
Example 7-5. Using viewBox to scale a pattern......Page 102
Figure 7-6. Patterns within patterns......Page 103
7.2.1.1 The stop element......Page 104
Example 7-9. Defining vectors for a linear gradient......Page 105
7.2.1.3 The spreadMethod attribute......Page 106
Example 7-10. Effects of spreadMethod values on a linear gradient......Page 107
7.2.2.1 Establishing transition limits for a radial gradient......Page 108
Example 7-13. Setting focal point for a radial gradient......Page 109
Example 7-14. Effects of spreadMethod values on a radial gradient......Page 110
7.2.3 Gradient Reference Summary......Page 111
Figure 7-15. Transformation of a pattern and gradient......Page 112
Figure 8-1. Two sets of glyphs......Page 114
Figure 8-3. Text placement and outlining......Page 115
Example 8-3. Use of text-anchor......Page 117
Example 8-5. Using dy to change vertical positioning within text......Page 118
Example 8-7. Use of multiple values for dx and dy in a text span......Page 119
8.5 Setting textLength......Page 120
Example 8-10. Producing vertical text......Page 121
Example 8-11. International text using Unicode......Page 122
8.7.2 The switch Element......Page 123
8.7.3 Using a Custom Font......Page 124
8.8 Text on a Path......Page 125
Figure 8-16. Text along a path (with paths shown)......Page 126
Example 8-15. Text Length and startOffset......Page 127
8.9 Whitespace and Text......Page 128
Figure 8-19. Text along path added to graphic......Page 129
Figure 9-1. Simple rectangular clipping......Page 131
Example 9-2. Complex clip paths......Page 132
Figure 9-2. Complex path clipping......Page 133
9.2 Masking......Page 134
Example 9-4. Masking with opaque colors......Page 135
Example 9-5. Mask alpha using opacity only......Page 136
Example 9-6. Unmasked image......Page 137
Figure 9-7. Masked image......Page 138
10.1 How Filters Work......Page 140
Example 10-1. First attempt to produce a drop shadow......Page 141
Example 10-2. Improved drop shadow filter......Page 142
10.3 Creating a Glowing Shadow......Page 143
Example 10-3. Glow filter......Page 144
10.3.2 More About the feColorMatrix Element......Page 145
Figure 10-8. Result of luminanceToAlpha......Page 146
10.5 The feComponentTransfer Filter......Page 147
Figure 10-10. Result of linear component transfer......Page 148
Figure 10-12. Result of using gamma correction......Page 149
10.6 The feComposite Filter......Page 151
Figure 10-14. Comparsion of linearRGB and sRGB......Page 152
Figure 10-15. Result of using feComposite operators......Page 153
10.7 The feBlend Filter......Page 154
10.8 The feFlood and feTile Filters......Page 155
Figure 10-18. Result of feFlood and feTile elements......Page 156
Figure 10-19. Relationship of x-, y,- and z-axes......Page 157
Example 10-9. Diffuse lighting with a point light source......Page 158
Figure 10-20. Result of applying diffuse lighting filter......Page 159
Example 10-10. Specular lighting with a distant light......Page 160
10.10 Accessing the Background......Page 161
Example 10-11. Accessing the background......Page 162
Figure 10-23. Result of using feMorphology......Page 163
Example 10-13. Embossing with feConvolveMatrix......Page 164
10.13 The feDisplacementMap Element......Page 165
Figure 10-25. Result of using feDisplacementMap......Page 166
10.14 The feTurbulence Element......Page 167
10.15 Filter Reference Summary......Page 168
Table?10-1. Filter reference summary......Page 169
Example 11-1. The incredible shrinking rectangle......Page 172
Example 11-2. Multiple animations on a single object......Page 173
11.2 How Time Is Measured......Page 174
Example 11-5. Synchronization of animations with offsets......Page 175
Example 11-6. Example of repeated animation......Page 176
Example 11-8. Example of set element......Page 177
11.6 The animateTransform Element......Page 178
Figure 11-6. Multiple animateTransforms -- before and after......Page 179
Figure 11-7. animateMotion along a complex path......Page 180
Figure 11-8. animateMotion along a complex path with auto-rotation......Page 181
Example 11-17. Links in SVG......Page 182
11.9.1 Changing Attributes of a Single Object......Page 183
Example 11-18. Basic scripting -- changing a single object......Page 184
Example 11-19. Changing multiple objects in a script......Page 185
11.9.3 Dragging Objects......Page 187
Figure 11-10. Screenshot of color sliders......Page 188
Figure 11-11. Screenshot of labeled color sliders......Page 190
11.9.5 Interacting with an HTML Page......Page 192
11.9.6 Scripting and Animation Together......Page 195
Example 11-20. Scripting and Animation Together......Page 196
11.9.7 Animation via Scripting......Page 197
Example 11-21. Animating a path with scripting......Page 198
Figure 11-14. Beginning and ending of scripted path change......Page 200
12.1 Using Perl to Convert Custom Data to SVG......Page 202
12.2 Using Java to Convert XML to SVG......Page 207
Figure 12-2. Sample converted from MathML to SVG......Page 224
Figure 12-3. Graphic weather template......Page 225
12.3.2 How XSLT Works......Page 226
12.3.3 Developing an XSL Stylesheet......Page 227
Figure 12-4. XSL-generated SVG file showing thermometer......Page 232
12.3.4 Extending XSLT in Java......Page 235
Figure 12-6. XSLT-generated SVG file showing complete data......Page 238
Figure 13-2. Screenshot of resulting graphic......Page 240
Example 13-1. HTML form for requesting OMF information......Page 241
Example 13-2. Weather.java, a servlet for creating a web page......Page 242
Figure 13-3. Information flow of Transform servlet......Page 245
Figure 13-4. Screenshot of error image......Page 252
13.2.4 The XSLT File......Page 254
13.3 Setting up the Server......Page 255
A.1 What Is XML?......Page 258
A.2.1 Elements and Attributes......Page 259
A.2.4 Comments......Page 261
A.2.5 Entity References......Page 262
A.3 Character Encodings......Page 263
A.3.1 Unicode Encoding Schemes......Page 264
A.4 Validity......Page 265
A.4.2 Putting It Together......Page 266
A.5 XML Namespaces......Page 267
A.6.1 Selecting a Parser......Page 268
A.6.2 XSLT Processors......Page 269
B.3 Internal Stylesheets......Page 270
B.4 Style Selector Classes......Page 271
Table?B-1. CSS property table for SVG......Page 272
Figure C-1. Two empty variables......Page 277
Figure C-2. Two assigned variables......Page 278
Figure C-3. Depiction of an array......Page 279
C.6 Conditional Statements......Page 280
C.8 Functions......Page 281
C.9 Objects, Properties, and Methods......Page 282
Figure C-4. The object diagram for a toaster......Page 283
C.10 What, Not How......Page 284
Figure D-3. Addition of two 3 by 2 matrices......Page 285
Figure D-5. Two matrices to be multiplied......Page 286
D.4 How SVG Uses Matrix Algebra for Transformations......Page 287
Figure D-12. SVG representation of translation......Page 288
Figure D-16. Result of premultiplying translation and scaling matrices......Page 289
Figure D-18. Color transformation matrix......Page 290
E.1 The ttf2svg Utility......Page 291
F.3 Placing SVG Directly Within XHTML Documents......Page 293
Example F-1. XHTML and SVG in one document......Page 294
Figure F-1. PDF output......Page 295
Example F-2. Combined XSL-FO and SVG markup......Page 296
Colophon......Page 299
Index......Page 300