Introduction to SVG

SVG Examples
Editing an SVG Statement Viewer
Looking at XML Structure
Looking at an XML Statement pt. 1
Looking at an XML Statement pt. 2

SVG Document Structure

Well Formed Document
Valid Document
SVG Text Statements
SVG Viewport
Preserve Aspect Ratio Attribute
Meet and Slice Ratios Attribute
Container Elements
Use Element
Streamlining Code
Defs Element
Symbol Element

The SVG Coordinate System

Coordinate System and Unit Identifiers
Multiple Coordinate Systems
Translate Transformation pt. 1
Translate Transformation pt. 2
Scale and Rotate Transformations
Skew X and Y Transformations

Basic Shapes

Rounded Rectangle
Filled Rectangle / Circle / Ellipse
Polygon Element
Polyline Element
Line Element
Text in SVG
DX and DY Attributes
Tspan and Tref Elements
Fonts / Kerning / Baseline Shift


Path Elements
Stream Lining Code and "C" Command
Creating a Triangle and Elliptical Arc
Large Arc Flag, Sweep Flag Values
Cubic Benzier Curves
Quadric Benzier Curves

Gradients and Fills and Patterns

Color / Color Fill and Stroke Order
Linear Gradients pt. 1
Linear Gradients pt. 2
Spread Method Attribute
Radial Gradients pt. 1
Radial Gradients pt. 2
Patterns pt. 1
Patterns pt. 2


Intro Filter Elements pt. 1
Intro Filter Elements pt. 2
Diffuse and Specular Light pt. 1
Diffuse and Specular Light pt. 2
feComposite pt. 1
feComposite pt. 2
feImage / feFlood / feTile
feDisplacementMap / feTurbulance
feCompononentTransfer pt. 1
feCompononentTransfer pt. 2

Clipping and Masking

ClipPath pt. 1
ClipPath pt. 2
ClipPath Using Text
Mask Element
Gradient Fill Mask
Color in Masks

Cascading Style Sheets

Internal Stylesheets
Class Selector and Attribute
External Stylesheets

Animation and Interactivity

Intro to SVG Animation
Set Animate Color
Animate Motion pt. 1
Animate Motion pt. 2
Timing pt. 1
Timing pt. 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 pt. 1
SVG and CorelDraw pt. 2
Jasc WebDraw