SVG: Clipping, Masking, and Filters
2h 20mAdvanced2018-08-30
Authors
Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
Do more with SVG. Many web designers and developers leverage the power of SVG for just that: Scalable Vector Graphics. But few realize that SVG also enables you to create code-based visual effects—the kind of graphics that used to be possible only in programs like Photoshop. Take a deep dive into the advanced visual features available in the Scalable Vector Graphics format, including clipping, masking, and filters, in this course with Morten Rand-Hendriksen. Learn how to use the clipPath, mask, and various filter elements to create clipping masks, alpha layers, and effects such as blurring and sharpening, color correction, extrusion, and advanced compositing. Morten includes a detailed breakdown of all the available filters in SVG, along with examples that show the advantages of code-based visual effects.
Learning objectives
How clipping and masking work in SVG
The mask coordinate system
The filter elements
Combining filters
Filter primitives
Using SVG filters
Learning objectives
How clipping and masking work in SVG
The mask coordinate system
The filter elements
Combining filters
Filter primitives
Using SVG filters
Skills covered
Web GraphicsWeb DesignProgramming LanguagesSoftware DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Clipping, masking, and filtering SVG
- 02 - Prerequisites
1. Clipping and Masking
- 03 - How clipping and masking works
- 04 - The clipPath element
- 05 - A basic clipping example
- 06 - The clipPath coordinate system
- 07 - The mask element
- 08 - A basic mask example
- 09 - The mask coordinate system
2. SVG Filters
- 10 - How SVG filters work
- 11 - The filter element
- 12 - A basic filter example
- 13 - Combining multiple filters
- 14 - Filter regions and sub-regions
3. SVG Filters and What They Do
- 15 - A walkthrough of SVG filter primitives
- 16 - feImage
- 17 - feTile
- 18 - feFlood
- 19 - feBlend
- 20 - feGaussianBlur
- 21 - feMerge
- 22 - feOffset
- 23 - feMorphology
- 24 - feComposite
- 25 - feComponentTransfer
- 26 - feColorMatrix, part 1
- 27 - feColorMatrix, part 2
- 28 - feDiffuseLighting
- 29 - feSpecularLighting
- 30 - feTurbulence
- 31 - feDisplacementMap
- 32 - feConvolveMatrix
4. Using SVG Filters
- 33 - Duotone images
- 34 - Extruded text
- 35 - Mixing multiple filters
5. Going Further
- 36 - SVG filters in the real world