In many respects, SVG is the easiest method of achieving text effects on web pages, across multiple platforms: SVG is supported on all modern browsers, including IE9. The code to create the text, written directly into the page, is also easy to understand:

1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
2. <text fill="#e96" style="font-size:60px;
3. font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
4. color: yellow;" stroke = "black" stroke-width = "2px">STROKED SVG TEXT</text>
5. </svg>

As you can see, styles within SVG are very similar to the way they are used in HTML. The primary difference at this simple level is that you cannot use color (instead, you use a fill attribute; the y value is used to set the baseline of the text).

You can also see that outlining the text is much easier than doing so via CSS.

With these advantages, why isn’t text on all web pages in SVG? Several reasons:

• support for SVG is not equally distributed: while SVG is built into all versions of Firefox, Chrome, and Safari, Microsoft didn’t support it until IE9. Presenting SVG in earlier versions of Internet Explorer is possible, but requires a JavaScript "shim" such as Raphael.

• SVG 1.1 does not have native text-wrap, making it unsuited for body copy.

• Selection of SVG text is still an issue across browsers: you will find that you can select and copy the SVG text above in recent versions of Chrome and Safari, but not (as of this writing) Firefox.

For right now, SVG text is best used as a font descriptor (the iPad, for instance, loads fonts in SVG format for embedding in web pages), as headlines, and in text special effects, which we will cover shortly.