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 do first is wrap this path element…