Course outline for SVG
TechnologySVGDuration2-5 days
LevelPrerequisites listed
About SVG
- SVG is a language for describing two-dimensional graphics in XML. Find out more from Scalable Vector Graphics Documentation
Pre-requisites
- Participants must have good knowledge of HTML and CSS
- Good to have knowledge of JavaScript
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
How we train
Online training for SVG
- Instructor-led live cohorts
- Self-paced learning with expert coaches
- 24x7 cloud labs with end-to-end examples
All sessions are 100% hands-on. Labs and activities are derived from real-world work our engineers deliver.
Classroom training
Available for corporate teams in:
- Bengaluru
- Chennai
- Hyderabad
- Mumbai
- Delhi/Gurgaon/NCR
- Pune
Note: Classroom training is for corporate clients only.
Self-paced hands-on sessions are delivered via VirtualCoach.
Detailed Course Outline
Hands-onIntroduction to SVG
- What, Why and When SVG
- SVG DOM
- 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