2D Web Graphics: SVG

I. Herman, W3C, Head of Offices
Hong Kong, 2nd of September, 2002

Slides of a presentation held in Hong Kong, on the 2nd of September, 2002, at a visit at HKUST, the hosting institution of the W3C Hong Kong Office.

If your browser is enabled for SVG, I advise you to view the slideset in SVG. Otherwise, you can use the links below. Note that some of the slides refer to animation and/or to DOM scripting in SVG. Obviously, HTML+images will not work in that case... you should definitely use the SVG set if you want to see those effects!

There is also a printable version of all slides, collected into a single HTML file. Do not forget to use landscape mode when printing that file.

Table of Content:

  1. Graphics on the Web Today
  2. What do we Need?
  3. SVG
  4. A Simple SVG Example
  5. Transformation Examples
  6. Geometry: Path Expressions
  7. Path Examples
  8. Path “Shortcuts”
  9. Text
  10. International Text
  11. Inclusion of Images
  12. SVG Attributes
  13. Stroke Attributes
  14. Area Attributes
  15. Gradient Fill Examples
  16. Pattern Fill
  17. Text Attributes
  18. Filters
  19. Filter Operations
  20. Filter Details
  21. Colour Matrix Manipulation
  22. Picture Compositing
  23. Convolution Matrix on Pixels
  24. SVG Animation
  25. SVG Animation Example
  26. What is animated?
  27. Walking Man...
  28. How is animation performed?
  29. Bouncing Cubes
  30. When is animation performed?
  31. Chaining Animations
  32. Animated Patterns
  33. Changing Pattern References
  34. Lights and Images
  35. SVG DOM
  36. SVG DOM Objects and Methods
  37. Interaction with the DOM Tree
  38. When Should Scripts Be Used?
  39. Clock
  40. Mine Sweeper Example
  41. SVG and HTML
  42. Better (Future) Integration
  43. Implementations: Players
  44. Implementations: Authoring
  45. Application Examples
  46. Roadmap of SVG Evolution
  47. SVG Basic & Tiny
  48. First Mobile SVG Implementations
  49. Further Information
  50. Further Information (cont)