Text masking — The SVG way

dabblet.css

/**
 * Text masking — The SVG way
 */

svg {
	width: 6em; height: 1.5em;
	font: 900 500%/1.2 'Arial Black', sans-serif;
}

text { fill: url(#wood); }

dabblet.html

<svg>
<defs>
	<pattern id="wood" patternUnits="userSpaceOnUse" width="400" height="400" >
		<image xlink:href="/Content/images/trainings/background-8.jpg" width="400" height="400" />
	</pattern>
</defs>
<text y="1.2em">SVG rocks!</text>
</svg>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}