Computer Graphics - English Week - 2009
N
Slide Set: svg1_b
z 1.1: Grouping Overview z 1.2: Elements inside Group z 1.3: Definitions z 1.4: Transformations z 1.5: Transformations z 1.6: Rotation about a point z 1.7: More on Transformations z 1.8: Transformation Example z 1.9: Nested Groups
David Lightfoot (Oxford Brookes University) 1 Computer Graphics - English Week - 2009
Slide Set: svg1_e
z 2.1: Structuring z 2.2: Symbols z 2.3: Symbols made of Symbols z 2.4: Symbols viewBox z 2.5: Clipping z 2.6: Clip an Image
David Lightfoot (Oxford Brookes University) 2 Computer Graphics - English Week - 2009
Slide Set: anim_intro
z 3.1: Animation z 3.2: Uses of Animation z 3.3: Example - Setting up IP socket connection z 3.4: The Illusion of Motion z 3.5: A Timeline in Movies z 3.6: Conventional Techniques z 3.7: Conventional Animation z 3.8: Use of Computers z 3.9: Keyframing z 3.10: Interpolation z 3.11: Linear Interpolation ... z 3.12: Smooth Motion
David Lightfoot (Oxford Brookes University) 3 Computer Graphics - English Week - 2009
Slide Set: svg2_c
z 4.1: SVG Animation: Introduction z 4.2: What, How, When z 4.3: What is animated? z 4.4: Common Attributes z 4.5: Animation Functions z 4.6: Relationship to SMIL z 4.7: Animation Styles z 4.8: Animating Properties/Attributes z 4.9: Animating d Attribute z 4.10: animate Examples z 4.11: Animating stroke-dashoffset z 4.12: Animating Text Offset z 4.13: Stop Opacity: Lighting z 4.14: animateTransform Element z 4.15: Additive Animations z 4.16: Pseudo 3D z 4.17: Transformed Paths z 4.18: Animate Symbols z 4.19: Animated Fridge Control z 4.20: Animated Fonts z 4.21: set Element z 4.22: Changing Visibility z 4.23: Changing Visibility z 4.24: animateColor Element z 4.25: animateMotion Element z 4.26: Animate along Path z 4.27: Animate Motion Example z 4.28: Other Motion Paths z 4.29: Animating Path and Offset z 4.30: How z 4.31: How is Animation Performed? z 4.32: Types z 4.33: How Attributes z 4.34: values Attribute z 4.35: values Example z 4.36: values Examples z 4.37: Animating Text Example z 4.38: Animating Clip Path
David Lightfoot (Oxford Brookes University) 4 Computer Graphics - English Week - 2009
Slide Set: svg2_d
z 5.1: keyTimes z 5.2: Example keyTimes z 5.3: animateMotion: keyPoints z 5.4: calcMode z 5.5: Key Spline Interpolation z 5.6: Example Key Spline Interpolation z 5.7: Ball Bouncing z 5.8: Linear v Spline z 5.9: Animating many Circles z 5.10: When z 5.11: When is Animation Performed? z 5.12: Timing Attributes z 5.13: Synchronisation z 5.14: Events z 5.15: Animation onclick and set z 5.16: Chaining Animations z 5.17: Chaining: IP Network z 5.18: Restarting an Animation
David Lightfoot (Oxford Brookes University) 5 Computer Graphics - English Week - 2009
Slide Set: svg1_b
1.1: Grouping Overview
1.2: Elements inside Group
David Lightfoot (Oxford Brookes University) 6 Computer Graphics - English Week - 2009
1.3: Definitions
z Sometimes SVG elements are used to define something not to render it z To make it explicit that it is a definition: { Enclose the element in a defs element { Elements inside a defs element are not rendered