STROKED SVG TEXT
Part of the SVG Text Reading List

In many respects, 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 stroked text above is fairly straighforward:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<defs>
		<style>
		text {  
		fill: #e96; font-size:60px;
		font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
		stroke: black; stroke-width: 2px;
		}
		</style>
	</defs>
	<text y="60">STROKED SVG TEXT</text>
</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 fill. You can also see that outlining the text is much easier than doing so via CSS.

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