SVG Tutorial image/svg+xml I. Herman, W3C, Head of Offices mailto:ivan@w3.org en W3C - World Wide Web Consortium sealed cool embarrassed frown innocent kiss loughing surprised cry smiling tongue undecided wink yell ® ©1994-2004, W3C (MIT,ERCIM,Keio) SVG Tutorial SVG Tutorial 0. [Title Page] 2. Graphics on the Web 3. What do we Need? 4. SVG 6. A Simple SVG Example 7. Coordinates, Transformations 8. Basic Coordinate System 9. Possible Units 10. Using Viewbox 11. Simple Transformations 12. Rotations 13. Matrices are 2×3! 14. Concatenation Examples 15. All Transformations Together 16. Grouping 17. Structuring SVG Files: Templates 18. Structuring SVG Files (cont) 19. Grouping/Templates are Used a Lot! 20. Sierpinski Triangle 22. Geometry: Path Expressions 23. Path Simplifications 24. Path Examples 25. Path Details: Q-Splines 26. Path Details: Q-Splines (cont) 27. Path Details: C-Splines 28. Path Details: C-Splines (cont) 29. Path Details: Arcs 30. Path “Shortcuts” 31. Text 32. Plain Text Examples 33. tspan Examples 34. Text on Paths 35. International Text 36. Inclusion of Images 37. Images Inline 39. Rendering Model 40. Opacity, Blending 41. Opacity on Groups 42. Clipping 43. The "objectBoundingBox" Attribute 44. Masking 45. Practical Masking Example 47. SVG Attributes 48. Stroke Attributes 49. Dash line control 50. Marker Symbols 51. Area Attributes 52. Fill Rules 53. Fill Rule Examples 54. Gradient Fill Definitions 55. Gradient Fill Examples 56. Details of Gradient Specification 57. Transforming Gradients 58. Another Gradient Example 59. Pattern Fill 60. Adaptation of a Pattern to an Area 61. Typical Use of Patterns 62. Image as a Pattern 63. Patterns can be Transformed 64. Stroke/Fill Attributes Defaults 65. Text Attributes 66. Text Rendering control 67. Named Colours 68. Named Colours & RGB values 70. Styling in Text Processing 71. Styling in Graphics 72. SVG Styling 73. SVG Styling 2 74. Separation into a CSS File 75. Styling Priorities 76. Complex Lines with Styling 78. Font Selection 79. SVG Fonts 80. SVG Font Definition... 81. ... and What You Get 82. Font Metrics 83. Referring to external fonts 84. Han Character Example 85. Smiley Font Example 87. Filters 88. Filter Operations 89. Filter Primitives 90. Filter Details 91. Coding Filters in SVG 92. (Rough) Overview of Filters 93. Overview of Filters (cont.) 94. Colour Matrix Manipulation 95. Linear Component Transfer 96. Gamma Component Transfer 97. Picture Compositing 98. Convolution Matrix on Pixels 99. Morphed Ducks 100. Displacement Maps 101. Displacement Maps 2. 102. Lighting 103. Lighting Effects 104. Turbulent Ducks 105. Filtering the W3C Logo 106. Filter Usage May Be Very Simple! 108. SVG Animation 109. SVG Animation Example 110. Aspects to Describe 111. What is animated? 112. Path Deformation 113. Walking Man… 114. Animate Transformation 115. Animate Motion 116. Animate Colour 117. Instantaneous Change: ‘set’ 118. How are the values calculated? 119. Key Values 120. Key Values example 121. Key Values and Times 122. Time Interpolation Modes 123. Key Splines 124. Bouncing Cubes 125. When? 126. When (cont.)? 127. Chaining Animations 128. Multimedia Show... 129. Control with Mouse Events 130. Cartography Example 131. Panda and the Flower 133. Framing an Image 134. Framing an Image: How 135. Animating Gradients in Filters 136. Animating Font Glyphs 137. Using Filters for Patterns 138. Animate Clipping Path 139. The Power of Local Animations 140. Changing Pattern References 141. Lights and Images 143. SVG DOM 144. Scripting Languages 145. DOM Tree 146. But it is not that simple... 147. SVG DOM Objects and Methods 148. Interacting with an Element 149. Example: Usage of “onclick” 150. Reacting on “mouseover” 151. Modifying the DOM Tree 152. Interaction with the DOM Tree 153. Event List 154. Idiom: Animation with Mouse 155. Idiom: Top Level Document 156. Idiom: Namespaces 157. Idiom: Animation 158. Frame Based Animation 159. Same Effect with Animation Objects! 160. When Should Scripts Be Used? 161. RDF Schema Viewer Example 162. Idioms for Applications 163. W3C Document Visualizer 164. Binomial Distribution 165. Clock 166. Mine Sweeper Example 168. Miscellaneous 169. Conditional Processing 170. Metadata 171. Foreign Objects 172. Some Design Guidelines 173. Some Performance Tricks 174. Accessibility Issues 175. SVG in Practice 176. SVG Mime Type 177. SVG and HTML 178. Establishing the Coordinate System 179. Preservation of Aspect Ratio 180. Aspect Ratio Examples 181. Access to the DOM from HTML 182. Better (Future) Integration 184. SVG Mobile Profiles 185. SVG Basic 186. SVG Tiny 188. Implementations: Players 189. Adobe Plugin Deficiencies 190. Implementations: Authoring 191. Application Examples 192. Application Examples (cont.) 193. Some Mobile SVG Examples 195. SVG1.2 196. SVG 1.2: Better Text 197. Flowtext Example 198. SVG 1.2: Media 199. Audio & Video Example 200. SVG 1.2: Pages, Time Containers 201. SVG 1.2: SMIL2.0 Concepts 202. SVG 1.2: Richer Rendering model 203. Composition Examples 204. Better Content Creation 205. SVG 1.2: Vector Effects 206. Vector Effect Example 207. Shared borders 208. XML Binding Language (sXBL) 209. Simple sXBL 210. Complex sXBL With Script 211. Extended Links 212. SVG 1.2: Additional DOM Functionalities 213. SVG 1.2 Mobile and Print 215. Closing Examples 216. Further Information 217. Further Information (cont.) 218. Further Information (cont) I. Herman, W3C, Head of Offices,; © 1994-2004, W3C (MIT,ERCIM,Keio) 0 (218)