(click anywhere to close)

Complete SVG Course

category: Website | course: SVG | difficulty:
1. Table of Contents

The acronym SVG stands for Scalable Vector Graphics, and has been a W3C recommendation for quite some time. This simply means that it is supported completely by all browsers, and integrates seamlessly with HTML. If you’re looking to dynamically create graphics within the browser, this is probably just the thing for you!

The name says it all: with SVG, you can easily create vector graphics (to be used) within webpages.

What are Vector Graphics? They are an alternative to the usual way images are created, which are what we call bitmap images. Bitmap images assign a colour to every pixel, and all pixels together create the image (if you don’t look from too close).

Vector images don’t do this. Instead, they consist of multiple lines of code, which generate certain shapes. When a vector image is to be displayed, the browser reads the lines of code and generates the image from that. This sounds hard and slow, but it’s actually very easy and extremely fast. This has two huge advantages: the image can be scaled infinitely, and the different elements within the picture can be accessed. For example, we could add a line of code that tells the browser to display a circle of certain width and colour. After the circle has first appeared, we can still access it to dynamically change its properties – we could, for instance, change the circle’s colour when the user clicks a button.


The word scalable is actually redundant – the whole idea behind vector graphics is that they’re infinitely scalable.

Of course, the circle from our little example could easily have been achieved with some basic HTML and CSS. That’s why most vector graphics consist of lots of groups containing so-called basic shapes, which, combined together, can make the most beautiful pictures. Most of this course is about how to create and modify those basic shapes. Nevertheless, you still need some basic HTML and CSS knowledge to get started with SVG, and some advanced knowledge if you really want to enrich your vector graphics and script them.

All icons on this website are SVG graphics. Most images within tutorials aren’t, because they are often far too complex to transform into vector graphics, and I know the exact place and size I want to use them with. The icons, on the other hand, appear throughout the site at lots of different sizes and positions.

Table of Contents

  1. Displaying SVGs
  2. Coordinates & Viewports
  3. Aspect Ratio & Grouping
  4. Rectangles
  5. Circles & Ellipses
  6. Lines, Polylines & Polygons
  7. Paths
  8. Definitions & Symbols
  9. Markers
  10. Text
  11. Switches, Links & Images
  12. Gradients
  13. Masks
  14. Filters I
  15. Filters II
  16. Filters III
  17. Scripting & Animation


No previous post :( [SVG] Displaying SVGs
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk