Course Outline

About SVG



2-5 days (covering a subset of the topics - contact us for more information/customization)

Lab Setup

Hardware Configuration

Participants must have access to a system with the following hardware configuration:

  • 2GB of free RAM, 20GB of free disk space and full network connectivity

Software configuration

  • Ubuntu 16.04 Desktop Edition (sudo/root access required)
  • Firefox and Chrome browsers
  • Firebug

Course Outline for SVG

Introduction to SVG
  • What, Why and When SVG
  • SVG in HTML
Positions in SVG
  • Coordinates system - viewport, viewbox and preserveAspectRatio
  • Coordinates system transformations
Shape, Path and Text
  • Basic shapes - Circle, Rectangle, Ellipse
  • Lines, Polylines and Polygons
  • Simple and Curved paths
  • SVG text element
Fill and Stroke
  • Shape painting
  • Shape stroke
Gradient and Pattern
  • Linear gradient
  • Radial gradient
  • Gradient stop
  • Fill shape with pattern
Masking and Clipping
  • Text mask
  • Path clip
SVG Transforms
  • Matrix
  • Translate
  • Skew
  • Rotate
  • Scale
foreignObject in SVG
  • Foreign XML namespace
SVG Animation
  • Animation elements - animate, animateTransform, animateMotion, animateColor, set
  • Animation attributes

The classroom training will be provided in Bangalore (Bengaluru), Chennai, Hyderabad or Mumbai and will be conducted in the client's premises. All the necessary hardware/software infrastructure must be provided by the client.