Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

SVG: Clipping, Masking, and Filters

via LinkedIn Learning

Overview

Prepare for a new career with $100 off Coursera Plus
Gear up for jobs in high-demand fields: data analytics, digital marketing, and more.
Create code-based visual effects for your web project using the clipping, masking, and filter elements built into the Scalable Vector Graphics format.

Syllabus

Introduction
  • Clipping, masking, and filtering SVG
  • Prerequisites
1. Clipping and Masking
  • 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
2. SVG Filters
  • How SVG filters work
  • The filter element
  • A basic filter example
  • Combining multiple filters
  • Filter regions and sub-regions
3. SVG Filters and What They Do
  • 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
4. Using SVG Filters
  • Duotone images
  • Extruded text
  • Mixing multiple filters
5. Going Further
  • SVG filters in the real world

Taught by

Morten Rand-Hendriksen

Reviews

Start your review of SVG: Clipping, Masking, and Filters

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.