- [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…
Author
Updated
9/28/2017Released
12/8/2016Skill Level Intermediate
Duration
Views
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
Related Courses
-
CSS: Animation
with Val Head1h 59m Intermediate
-
Introduction
-
1. Creating Web Media
-
SVG symbols with Illustrator6m 34s
-
The video element9m 50s
-
Combine images with Canvas7m 50s
-
Web graphics from InDesign5m 27s
-
Keeping it in proportion5m 18s
-
Responsive iFrames5m 50s
-
Loop a CSS animation7m 44s
-
The Audio element7m 31s
-
Get SVG from Photoshop7m 44s
-
Read JPG metadata with PHP12m 19s
-
Interactive inline photo gallery12m 14s
-
Fullscreen background video13m 30s
-
Load animation with HTML and CSS12m 40s
-
Base64 encoding images4m 42s
-
Using GULP with Sketch files12m 12s
-
Indicate download file types3m 53s
-
Inline video for iOS2m 36s
-
Mask an image in SVG4m 40s
-
Animate an HTML canvas4m 47s
-
Trigger content from a video8m 53s
-
Responsive SVG Logo5m 5s
-
Zooming hover state3m 8s
-
Animate SVG with CSS4m 45s
-
Custom Google Maps markers7m 14s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Mask an image in SVG