About the Tutorial

SVG Overview

• Introduction
• Origins of SVG
• Explaining SVG
• SVG Viewer & Browser
• Why Another Graphics Format
  • Vector vs Bitmap
  • SVG vs Flash
• Applications of SVG
  • Mobile
  • Print & Web
  • GIS & Mapping
  • Interchange
  • Embedded System
• Quiz

.

SVG Concepts

• Rendering Concept
• SVG Document
• Basic Document Layout
• SVG Data Types
• Styling SVG
• Grouping in SVG
• Referencing Objects
• Embedded SVG in HTML
• Quiz

Basic Drawing

• Getting Started
• Graphical Objects
• Basic Shapes
  • Elements
  • Rectangle & Square
  • Circle & Ellipse
  • Line & Polyline
  • Polygon
• Path
  • About Path
  • Line & Shape
  • Cubic Curve
  • Quadratic Curve
  • Elliptical Curve
• Text
  • About Text
  • Font, Alignment & Direction
  • Word Wrapping
  • Text on a Path
• Quiz

Painting & Effects

• Painting
  • Painting Operations
  • Color
  • Fill
  • Stroke
  • Gradient
  • Pattern
• Filter Effect
  • Filter Primitives
  • Attributes
  • Image Examples
  • Text Example
• Transformation
  • Basics
  • Translation
  • Rotation
  • Scaling & Skew
• Quiz

Dynamic SVG

• Animation
  • Basics
  • Attributes
  • <animate>
  • <animateColor>
  • <animateMotion>
  • <animateTransform>
  • <set>
    
• Interactivity
  • Basics
  • Linking
  • Mouse Events
  • Keyboard Events
  • Scripting
  • Using JavaScript
    
• Quiz