YoVDO

SVG: Clipping, Masking, and Filters

Offered By: LinkedIn Learning

Tags

Vector Art Courses Web Development Courses Visual Effects Courses

Course Description

Overview

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

Related Courses

Code Yourself! An Introduction to Programming
University of Edinburgh via Coursera
¡A Programar! Una introducción a la programación
University of Edinburgh via Coursera
Visual Effects for Guerrilla Filmmakers
Norwich University of the Arts via FutureLearn
Unreal Engine Interactive 3D: Sequencer-Cinematography, Interfaces, Visual Effects, Pipelines, and Production
Rochester Institute of Technology via edX
Create a Space Shooter Game with Scratch Studio
Coursera Project Network via Coursera