United States SVG Tutorials
Online Contents For This Course
We have made some of the video tutorials for
SVG
freely available to help you evaluate our training. Click on any of the linked lesson listings below to preview FREE!
Course Description
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!
Choose your media type:
|
Introduction to SVG
|
|||
| Introduction | (07:13) | ||
| SVG Examples | (05:22) | ||
| Editing an SVG Statement Viewer | (03:14) | ||
| Looking at XML Structure | (06:17) | ||
| Looking at an XML Statement pt. 1 | (02:03) | ||
| Looking at an XML Statement pt. 2 | (05:35) | ||
|
SVG Document Structure
|
|||
| Well Formed Document | (04:12) | ||
| Valid Document | (03:34) | ||
| SVG Text Statements | (07:07) | ||
| SVG Viewport | (05:26) | ||
| Viewbox | (04:47) | ||
| Preserve Aspect Ratio Attribute | (03:05) | ||
| Meet and Slice Ratios Attribute | (02:28) | ||
| Container Elements | (05:03) | ||
| Use Element | (03:27) | ||
| Streamlining Code | (02:30) | ||
| Defs Element | (02:00) | ||
| Symbol Element | (03:32) | ||
|
The SVG Coordinate System
|
|||
| Coordinate System and Unit Identifiers | (04:32) | ||
| Multiple Coordinate Systems | (04:46) | ||
| Translate Transformation pt. 1 | (04:10) | ||
| Translate Transformation pt. 2 | (04:08) | ||
| Scale and Rotate Transformations | (03:04) | ||
| Skew X and Y Transformations | (03:54) | ||
|
Basic Shapes
|
|||
| Rounded Rectangle | (03:43) | ||
| Filled Rectangle / Circle / Ellipse | (04:25) | ||
| Polygon Element | (05:23) | ||
| Polyline Element | (00:32) | ||
| Line Element | (01:47) | ||
| Text in SVG | (03:22) | ||
| DX and DY Attributes | (01:48) | ||
| Tspan and Tref Elements | (02:06) | ||
| Fonts / Kerning / Baseline Shift | (04:03) | ||
| Internationalization | (02:53) | ||
|
Paths
|
|||
| Path Elements | (03:58) | ||
| Stream Lining Code and “C” Command | (02:41) | ||
| Creating a Triangle and Elliptical Arc | (04:27) | ||
| Large Arc Flag, Sweep Flag Values | (03:03) | ||
| Cubic Benzier Curves | (03:41) | ||
| Quadric Benzier Curves | (03:22) | ||
|
Gradients and Fills and Patterns
|
|||
| Color / Color Fill and Stroke Order | (05:18) | ||
| Linear Gradients pt. 1 | (03:17) | ||
| Linear Gradients pt. 2 | (05:55) | ||
| Spread Method Attribute | (03:11) | ||
| Radial Gradients pt. 1 | (05:58) | ||
| Radial Gradients pt. 2 | (02:26) | ||
| Patterns pt. 1 | (03:15) | ||
| Patterns pt. 2 | (04:33) | ||
|
Filters
|
|||
| Intro Filter Elements pt. 1 | (05:19) | ||
| Intro Filter Elements pt. 2 | (02:48) | ||
| Diffuse and Specular Light pt. 1 | (04:31) | ||
| Diffuse and Specular Light pt. 2 | (02:32) | ||
| feComposite pt. 1 | (06:22) | ||
| feComposite pt. 2 | (05:23) | ||
| feImage / feFlood / feTile | (04:56) | ||
| feMorphology | (04:26) | ||
| feDisplacementMap / feTurbulance | (06:34) | ||
| feColorMatrix | (05:35) | ||
| feCompononentTransfer pt. 1 | (05:27) | ||
| feCompononentTransfer pt. 2 | (01:56) | ||
| feConvolveMatrix | (06:33) | ||
|
Clipping and Masking
|
|||
| ClipPath pt. 1 | (06:48) | ||
| ClipPath pt. 2 | (01:17) | ||
| ClipPath Using Text | (03:07) | ||
| Mask Element | (06:26) | ||
| Gradient Fill Mask | (04:30) | ||
| Color in Masks | (02:34) | ||
|
Cascading Style Sheets
|
|||
| Internal Stylesheets | (05:04) | ||
| Class Selector and Attribute | (03:34) | ||
| External Stylesheets | (04:49) | ||
|
Animation and Interactivity
|
|||
| Intro to SVG Animation | (05:19) | ||
| Animate | (04:41) | ||
| Set Animate Color | (03:22) | ||
| Animate Motion pt. 1 | (02:44) | ||
| Animate Motion pt. 2 | (04:23) | ||
| Timing pt. 1 | (05:37) | ||
| Timing pt. 2 | (03:56) | ||
| Chaining and Repeating | (04:24) | ||
| Radial Gradients | (03:28) | ||
| Interactive Events | (06:34) | ||
| A Brief Look at Scripting | (05:56) | ||
|
SVG and Drawing Packages
|
|||
| Adobe Illustrator 10 | (06:51) | ||
| SVG Filters in Illustrator | (05:20) | ||
| SVG and CorelDraw pt. 1 | (04:03) | ||
| SVG and CorelDraw pt. 2 | (04:08) | ||
| Jasc WebDraw | (05:40) | ||
Email this Page
Send us FeedbackCourse Information
| Course: | SVG |
| Author: | Ellen Pearlman |
| SKU: | 33426 |
| ISBN: | 1-932072-31-4 |
| Release Date: | 2003-04-27 |
| Duration: | 6 hrs / 87 tutorials |
| Captions: | No |
Subscription / Purchase Information
This course is just part of the entire VTC collection of over 782 courses, 81,350 video tutorials (20,800+ free), available to you for just $30 a month.
View All Courses Subscribe Learn More