Course outline for SVG

About SVG

Pre-requisites for learning SVG

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 20.04/22.04 Desktop Edition (sudo/root access required)
  • Firefox and Chrome browsers


2-5 days

Training Mode

Online training for SVG

We provide:

  • Instructor led live training
  • Self-paced learning with access to expert coaches
  • 24x7 access to cloud labs with end to end working examples

All jnaapti sessions are 100% hands-on. All our instructors are engineers by heart. Activities are derived from real-life problems faced by our expert faculty. Self-paced hands-on sessions are delivered via Virtual Coach.

Classroom training for SVG

Classroom sessions are conducted in client locations in:

  • Bengaluru
  • Chennai
  • Hyderabad
  • Mumbai
  • Delhi/Gurgaon/NCR

Note: Classroom training is for corporate clients only

Detailed 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