SVG Fundamentals

• 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