Virtual Training Company author Ellen Pearlman teaches users 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, styled, transformed and composited into previously rendered objects. Click on a movie topic below to begin learning!
Introduction to SVG
Introduction 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 Viewbox 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
Internationalization
Paths
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
Filters
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
feMorphology
feDisplacementMap / feTurbulance
feColorMatrix
feCompononentTransfer pt. 1
feCompononentTransfer pt. 2
feConvolveMatrix
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
Animate
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