- Background in HTML & CSS
Scalable Vector Graphics (SVG) is an XML-based graphics format used to create 2D vector images.
In this instructor-led, live training, participants will learn the fundamentals of SVG as they step through the creation of their first SVG project.
By the end of this training, participants will be able to:
- Understand the basics of vector graphics and SVG
- Learn how to create, modify, use, and optimize SVG
- Learn how to use SVG with HTML & CSS
- Learn how to do basic animations with SVG
- Create their own SVG animation
Audience
- Developers and Programmers
- Graphic Designers
- HTML & CSS developers interested in learning more about SVG
Format of the course
- Part lecture, part discussion, exercises and heavy hands-on practice
Introduction
Overview of Scalable Vector Graphics
- Understanding Vector Graphics
- SVG Fundamentals
- SVG Uses and Applications
Learning the Basics of Using SVG
- Creating an SVG
- Using SVG as Images
- Creating an SVG Image
Digging Deep into SVG Code
- Understanding the SVG Layout, Structure, and Attributes
- Introduction to SVG Elements
- Working with SVG Graphical Elements
- Working with SVG Container Elements
- Working with SVG Gradient Elements
Using SVG with HTML & CSS
- Embedding SVG
- Modifying and Styling SVG Using CSS
- Making SVG Responsive
Creating SVG Sprites
- Overview of Image Sprites
- Using HTML Inline SVG Sprites
- Referencing External SVG Sprites in HTML
- Using CSS Inline SVG Sprites
- Using SVG Fragment Identifiers
Optimizing SVG
Animating with SVG
- Using CSS for SVG Animation
- Using SMIL for SVG Animation
- Using JavaScript for SVG Animation
Creating Your First SVG Logo Animation Project
- Setting Up Your Work Environment
- Drawing the SVG
- Modifying the SVG Code to Style the SVG
- Optimizing the SVG
- Animating the SVG
Troubleshooting
Closing Remarks
United Arab Emirates - SVG Fundamentals
Saudi Arabia - SVG Fundamentals
South Africa - SVG Fundamentals
Deutschland - SVG Fundamentals
Czech Republic - SVG Fundamentals
Magyarország - SVG Fundamentals
New Zealand - SVG Fundamentals
Philippines - SVG Fundamentals
Argentina - Fundamentos de SVG
Costa Rica - Fundamentos de SVG
Guatemala - Fundamentos de SVG
Venezuela - Fundamentos de SVG
United Kingdom - SVG Fundamentals