Masking an image with selectable text with SVG - possible?

Question

One neat typographic effect often seen headlines in magazines etc, is to select a really bold font and put an image inside of the text. Here's a random example of the effect:

In web design, there is no way to do this with plain html/css/js. It could be done with flash or with a bitmap image but those techniques obviously have some big drawbacks.

I wonder if it is possible to do this with SVG though? I have never ever used SVG, but if this is possible, it might be worth trying to wrap my head around it.

For instance, would it be possible to let a javascript go through the page and look for certain elements (h1s or certain classes) and generate, on the fly, an SVG file that contains selectable text in the chosen font with an image clipped to the letter shapes? Does anyone know if this has been done, tutorials, anything else that might be interesting for looking at this problem...

Answer 1

It is possible to do this with SVG, though you don't need to do masking, you can just specify the image as a pattern:

<defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
        <image xlink:href="daisy-grass-repeating-background.jpg" x="0" y="0"
            width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php--&gt;
    </pattern>
</defs>

Then reference that as the fill in your text:

<text fill="url(#img1)">

I've done an example, the most painful part was figuring out what patternUnits and patternContentUnits actually did, this MDC article was helpful.

The text is selectable in Opera and Chrome (and, I presume, Safari) but not Firefox because of a long standing bug. SVG doesn't work in IE (until 9 comes out, anyway) so either don't bother with it or see if you can get VML to do similar things. If you're going to try and build a JavaScript utility to do this a good starting point might be figuring our how to make the above work in Raphaël.