Table of contents
- Tutorial Outline
- What is SVG
- Why another graphics format?
- Raster graphics
- Rasters - WYS really Is WYG
- Wide range of device resolutions
- Vectors - zoom to see more
- Scalability
- Graphics Scalability
- Web Scalability
- Typical uses
- Text in Graphics
- XML - what is it
- Typical XML Sample
- ...which looks like this
- A graphical example
- ...which looks like this
- Uses of XML today
- The Web with XML
- What does XML buy us?
- What (else) does XML buy us?
- XML - just the first step
- Related W3C Recommendations
- XML Namespaces
- SVG use of XML Namespaces
- SVG and XLink/XPointer
- Linking and re-use
- Styling Graphics
- Cascading Style Sheets
- CSS basics
- Example of CSS
- Background images
- CSS2 Media-specific style sheets
- CSS supports
- XSL and transformation styling
- SVG Progress
- Implementation status
- Editing SVG in Illustrator
- Exporting SVG in Corel Draw!
- Displaying SVG, Mozilla
- Exporting SVG, Mayura Draw
- Features of SVG
- The SVG Canvas
- The SVG Viewport
- SVG objects
- Paths
- Paths in SVG
- Path commands (lines)
- Curves (explained)
- Path commands (curves)
- SVG basic shapes
- SVG basic shapes (continued)
- Transformations
- Transformations - Scaling
- Transformations - Rotation
- Transformations - Skew
- Transformations - Translate
- Bike example
- Bike example (continued)
- SVG and Raster Images
- Raster Image Example
- Text in Graphics
- SVG and real Text
- Text display in SVG
- Example of text in SVG
- Fonts in SVG
- SVG Fonts
- Fonts, SVG fonts, and curves
- Multilingual graphics
- An example of 'switch'
- Raster Effects
- Raster Effects (continued)
- Raster Effects example
- Raster effects sample (rendered)
- CSS and multi-namespace XML
- SVG and other XML namespaces
- MathML
- MathML and SVG
- RDF - metadata in XML
- RDF and SVG
- How does DOM fit in?
- Animation and SVG
- SMIL
- SMIL in use
- SMIL and SVG
- SVG animation example
- Summary: SVG
- Questions and Demonstrations
- For further information
![]() |