Create code-based visual effects for your web project using the clipping, masking, and filter elements built into the Scalable Vector Graphics format.
Overview
Syllabus
Introduction
- Clipping, masking, and filtering SVG
- Prerequisites
- How clipping and masking works
- The clipPath element
- A basic clipping example
- The clipPath coordinate system
- The mask element
- A basic mask example
- The mask coordinate system
- How SVG filters work
- The filter element
- A basic filter example
- Combining multiple filters
- Filter regions and sub-regions
- A walkthrough of SVG filter primitives
- feImage
- feTile
- feFlood
- feBlend
- feGaussianBlur
- feMerge
- feOffset
- feMorphology
- feComposite
- feComponentTransfer
- feColorMatrix, part 1
- feColorMatrix, part 2
- feDiffuseLighting
- feSpecularLighting
- feTurbulence
- feDisplacementMap
- feConvolveMatrix
- Duotone images
- Extruded text
- Mixing multiple filters
- SVG filters in the real world
Taught by
Morten Rand-Hendriksen
