Course outline for SVG
About SVG
- SVG is a language for describing two-dimensional graphics in XML. Find out more from Scalable Vector Graphics Documentation
Pre-requisites for learning SVG
- 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
Duration
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 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