From the course: Creating Web Media

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Mask an image in SVG

Mask an image in SVG - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Mask an image in SVG

“

- [Chris] Hi, this is Chris Convers, and in this episode, we'll load and mask an image in an SVG file, then load that very SVG into an HTML page. So if you'd like to follow along, download the exercise files and we'll begin by opening the HTML file in a text editor. So once you have the HTML file open, you'll see inside of the main element inside of the body area, we have an image with a width of 50% and a source equaling the about_us.SVG file, and we can see the SVG file showing up here, the black coffee beans. Now in order to clip an image into the SVG shape, we're going to need to load the image into the SVG file itself. So let's go back to the exercise files, inside of the images directory, let's find the about_us.svg, let's open this in our text editor and then I'll come up here and turn on my preview as well so we can see the preview over here on the right. And inside of the SVG we have a path element, this actually defines the shape of those coffee beans, so what we're going to…

Contents