| Duration: 6 hrs
Author Ellen Pearlman educates users in the power of Scalable Vector Graphics
(SVG), a modularized language for describing two-dimensional vector and mixed
vector/raster graphics in Extensible Markup Language (XML). SVG is essentially
a subset of XML, allowing for three types of graphic objects: vector graphic
shapes, images and text. Unlike Flash ActionScript, SVG is text based, allowing
search engines to index based on graphics. Graphical objects can be grouped,
transformed, styled and composited into previously rendered objects.
Intro to SVG
Intro
SVG Examples
Editing an SVG Statement Viewers
Looking at XML Structure
Looking at an XML Statement part 1
Looking at an XML Statement part 2
SVG Document Structure
Well Formed Document
Valid Document
SVG Text Statements
SVG Viewport
Viewbox
Preserve Aspect Ratio Attribute
Meet and Slice Ratios Attribute
Container Elements
Use Element
Streamlining Code
Defs Element
Symbol Element
SVG Coordinate System
Coordinate System and Unit Identifiers
Multiple Coordinate Systems
Translate Transformation part 1
Translate Transformation part 2
Scale and RotateTransformations
Skew X and Y Transformations
Basic Shapes in SVG
Rounded Rectangle
Filled Rectangle, Circle and Ellipse
Polygon Element
Polyline Element
Line Element
Text in SVG
DX and DY Attributes
Tspan and Tref Elements
Fonts, Kerning and Baseline Shift
Internationalization
Paths in SVG
Path Elements
Stream Lining Code and "C" Command
Creating a Triangle and Elliptical
Large Arc Flag, Sweep Flag Values
Cubic Benzier Curves
Quadric Benzier Curves
Gradients and Fills and Patterns
Colour, Colour Fill and Stroke Order
Linear Gradients part 1
Linear Gradients part 2
Spread Method Attribute
Radial Gradients part 1
Radial Gradients part 2
Patterns part 1
Patterns part 2
Filters in SVG
Introduction Filter Elements part 1
Introduction Filter Elements part 2
Diffuse and Specular Light part 1
Diffuse and Specular Light part 2
feComposite part 1
feComposite part 2
feImage, feFlood and feTile
feMorphology
feDisplacementMap and feTurbulance
fecolourMatrix
feCompononentTransfer part 1
feCompononentTransfer part 2
feConvolveMatrix
Clipping and Masking
ClipPath part 1
ClipPath part 2
ClipPath Using Text
Mask Element
Gradient Fill Mask
Colour in Masks
Cascading Style Sheets in SVG
Internal Stylesheets
Class Selector and Attribute
External Stylesheets
Animation and Interactivity
Introduction to SVG Animation
Animate
Set Animate Colour
Animate Motion part 1
Animate Motion part 2
Timing part 1
Timing part 2
Chaining and Repeating
Radial Gradients
Interactive Events
A Brief Look at Scripting
SVG and Drawing Packages
Adobe Illustrator 10
SVG Filters in Illustrator
SVG and CorelDraw part 1
SVG and CorelDraw part 2
Jasc WebDraw |
