SVG Text Effects Gallery

This is a gallery of SVG examples. The idea is to give authors a starting point for creating cool SVG content. This way SVG may eventually replace those bandwidth hogging raster images that display some title text with a drop shadow or a glow.

You are free to copy, modify, hack, distribute, improve, eat or forget any of the examples here. The SVG source for each sample is available as well as a thumbnail image (unfortunately the thumbnail is a raster image at the moment).

Free free to contribute SVG samples to the gallery. You can do this by sending me mail. All authors will be acknowledged, but they must allow their works to be freely copied and modified. The idea is to build up a good collection of the most used text effects, so authors can concentrate on improving them rather than replicating them.

If an example only works in a particular SVG viewer, it is noted. The official SVG implementations page has a list of SVG viewers.

The Gallery

Name : Simple Glow Author : [None] Very simple filter, just a Gaussian blur of text with the same text painted over the blur. You can easily choose glow color and intensity (either modify the blur radius or the number of feMerge elements). (view as svg)

Name : Drop Shadow Author : [None] Another simple blur filter that should be familiar to the Photoshop crowd. A Gaussian blur (with a fairly small blur radius) passed through an Offset filter. You can adjust the shadow angle by adjusting the dx and dy attributes on the offset filter. (view as svg)

Name : Water Texture Author : From a Batik Example Complicated turbulence and color matrix to simulate water (the kind of water you find in most computer games). Note that this examples renders differently in Adobe and Batik (currently under investigation). (view as svg)

Name : Inner Shadow Author : [None] Very similar to the normal drop shadow, but uses a mask on the text element to give the impression of a cutout. You can play with different cutout and shadow colors. An improved version would give the edge of the cutout a slight bevel. (view as svg)

Name : Complex Glow Author : [None] An extension of the simple glow that uses three different glows to produce a compound effect. There are two outer (simple) glows on the text, a light blue and a larger green, and a very slight inner red glow on the white text. With so many parameters to choose from it doesn't take much to achieve a tacky XFiles effect. (view as svg)

Name : MultiStroke Author : [None] No filters in this example, just text drawn over itself with a smaller stroke each time (and different color). You sometimes get a nice effect when you choose the background color for one of the inner strokes and a texture for the outer. (view as svg)