SVG fundamentals for beginners

Scalable Vector Graphics SVG from scratch

In this course you will learn:

What you’ll learn

  • Create SVG files in a text editor.
  • Create SVG files from existing vector data.
  • Animate and script SVG.
  • Work with SVG as static images.
  • Work with SVG as CSS.
  • Work with SVG as an element in HTML document.
  • Work with SVG as a scripted part of animations.

Course Content

  • Introduction –> 1 lecture • 6min.
  • Basic Shapes –> 7 lectures • 19min.
  • Transformations –> 4 lectures • 18min.
  • Paths –> 3 lectures • 13min.
  • Pattern and Gradients –> 3 lectures • 16min.
  • Text –> 3 lectures • 8min.
  • Working with SVG and CSS –> 4 lectures • 10min.
  • Animating and scripting SVG –> 3 lectures • 15min.

SVG fundamentals for beginners


  • You need to be familiar with HTML, JavaScript, CSS, and XML.
  • You don’t need to have prior experience with SVG.

In this course you will learn:

1-basic shapes: you will learn how to construct drawings using the basic shapes available in SVG including lines, circles, ellipses, rectangles, rounded rectangles, polygons, polylines and stroke characteristics.

We will also discuss stroke characteristics including: Stroke, stroke-width, stroke-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin.

2-Transformation: you will learn how to move, rotate, scale, and skew the coordinate system to affect the shapes drawn on it.

3-Paths: which include moveto, Lineto, closepath, the Q subcommand quadratic Bezier curves and the marker element.

4-Pattern and Gradients we will be discussing how to create a color gradient using linear gradient and radial gradient, or a fill pattern.

5-Text add text to a drawing, both in a straight line and following a path.

6-Working with SVG and CSS which includes how to use internal and external CSS style sheet, basic animation using CSS and animating multiple CSS properties at one time.

7-Animating and scripting SVG, you will learn how to use

SVG’s built-in animation capabilities by learning animation basics, time and repeated action and motion along path.

This course is for you if you are a web developer who is interested in exploring Scalable Vector Graphics., and if you have experience with JavaScript, CSS, and XML.

At the end of this course you will be able to:

Know how to work with SVG as static images,

in CSS,

inline as elements in an HTML document,

and as a scripted part of animations or visualizations