From the course: SVG: Clipping, Masking, and Filters
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
feImage
- [Instructor] The first filter primitive we'll look at is feImage, because feImage illustrates a lot of what's going on with filter primitives. FeImage takes a referenced image file, either a JPEG or a PNG or an SVG, and puts it in place of the original element the filter is applied to. Right now in our SVG we have three elements: this background image, a rectangle, and the text, and the filter has not been applied to any of them. In the exercise file you'll find a rectangle rule up here that has filter: url(#theFilter) applied, but it's commented out, so that's why we're not seeing the filter, and when we scroll down you'll find that filter here with the filter primitive feImage. FeImage uses xlink:href to find the image that replaces the original element. Xlink:href can be used to point at resources within the project, like I have here. You can also use it to point at resources outside the projects, some are on the web or the network, and you can even use it to reference elements…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
A walkthrough of SVG filter primitives2m 11s
-
(Locked)
feImage4m 31s
-
(Locked)
feTile4m 15s
-
(Locked)
feFlood2m 29s
-
(Locked)
feBlend2m 52s
-
(Locked)
feGaussianBlur3m 21s
-
(Locked)
feMerge2m 51s
-
(Locked)
feOffset2m 54s
-
(Locked)
feMorphology4m 39s
-
(Locked)
feComposite4m 50s
-
(Locked)
feComponentTransfer9m 23s
-
(Locked)
feColorMatrix, part 13m 42s
-
(Locked)
feColorMatrix, part 24m 53s
-
(Locked)
feDiffuseLighting7m 53s
-
(Locked)
feSpecularLighting4m 19s
-
(Locked)
feTurbulence6m 47s
-
(Locked)
feDisplacementMap2m 40s
-
(Locked)
feConvolveMatrix5m 49s
-
-
-