Knockout
Part of the SVG Text Reading List

The concept of a clipping mask is simple: a shape is used to constrain an image, such that the picture is only visible within the confines of the shape, creating a “cookie-cutter” effect.

The Webkit team has a CSS proposal to achieve this, but it’s not yet supported in browsers outside of Safari and Chrome. I wanted a solution that would work cross-browser, even in IE9.

The spec has supported clipping masks for years. Building on what we know of SVG text, it’s pretty easy to integrate a solution.

First, place your image on the page. For all intents and purposes this will be your “background” image, which will show through the clipping mask. 

<img src="yukon-river.jpg" alt="Knockout" id="knockout-text">
Yukon River

There are just two conditions for this image: it must be large enough to contain our text, and it must have an id value, which will be referenced in the CSS we will write shortly.

Next, we’ll create our file. This will be a separate document named knockout.svg, with a simple structure: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			text { 
				font-size:120px;
				font-family: Blue Highway, Arial Black, sans-serif;
				fill: white;
			}
		</style>
		<mask id="mask">
			<text y="100" id="knockout">KNOCKOUT</text>
		</mask>
	</defs>
  <use xlink:href="#knockout"/>
</svg>

Concentrate on the <text> element: the x and y values are the offset positions for the text, and the fill is the color for the letters. (This must be specified, even though we are showing our image through the letters). The font(s) we wish to use are written in an inline style, exactly as we do in CSS.

The part that is different is the <defs> and <mask> elements around our text. Very simply, this will allow use to specify the fact that we should use the text as a mask (note that the mask has an id). The penultimate line: <use xlink:href="#knockout"/> references the id provided to the text.

Finally, marry the SVG to our HTML content with CSS: 

#knockout-text {
	mask: url(knockout.svg#mask);
	-webkit-mask-image: url(knockout.svg);
}

The mask CSS property, used by Firefox, Opera and IE, refers to <mask id="mask"> in the knockout.svg file. Chrome and Safari need the second line, which pick up the mask where it is in specified in the file.

“But,” you might say, “How can I know that what you’re showing here is such an effect? It looks just like a picture!”

Indeed, that’s true: you’ll find that you can’t select the “KNOCKOUT” at the top of this article as text. But if you drag the element to your desktop, you’ll see that it saves as an image: removed from the clipping mask effect, you’ll see the entire landscape. And as I’ll show you shortly, you can edit the text in the SVG document to be anything you want… which is far quicker than going through .

Image supplied by Keith Williams under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.