HOWTO use Inkscape filter effects to style text

February 23rd, 2009 in Howto

Today’s HOWTO covers a simple way to style text using Inkscape. This approach uses Filter Effects, which make it possible to define resizable effects for text and vectors (like shadowed or 3d text). Inkscape’s Filter Effects dialog is a powerful, visual macro tool that lets you stack up filter steps and apply them to objects on your canvas. For more information on the Filter Effects tool, see the Inkscape user guide.

Basic Steps

  1. Add some text to your drawing using the text tool
  2. Select the text, and open the Filter Effects dialog (Object -> Filter Effects)
  3. Add a new filter and name it
  4. Add effects, set their parameters, connect them to each other

SVG/Inkscape filters example

Shadowed Text

Creating shadowed text is simple with the Filter Effects tool. First, consider what makes text shadowed:

  • The original text
  • The shadow text, slightly offset and blurred

Building this in the Filter Effect tool is easy. First make sure that you have a text element on your canvas, that it’s selected, and that you’ve created a new filter.

  1. Add a Gaussian blur and connect it to the text’s alpha channel (drag the arrow to the “source alpha” column). Now you will have a blurred text element.
  2. Add an Offset filter, which by default connects to the output of the previous filter. Adjust the Offset to be +2. You will see the blurred text move as you adjust the offset value.
  3. Now, you want to add back the source text. Add a Merge filter, and connect it’s first input to the Offset filter (should be the default), and connect the second input to the “source graphic”.

You now have shadowed text.

Bigger and better

You can now attempt more interesting text filters, like etched text or 3d effects. The example SVG file shows simple examples for both. 1

The etched example:

  • Adds two offset images of the text (one +1, one -1 px from the source)
  • Composites the two offset images, then blurs the result
  • Composites the results again with the source text
  • Blends the results again with the source text

The effect produces a slightly etched text effect.

The 3d example:

  • Adds a specular lighting filter and blurs it
  • Composites the result with the source text

The result is a reasonable 3d text effect (it could be better, but it’s a start).

In the real world

For my purposes, the Filter Effects tools will make my life simpler for website mockups and my comic vector sketches. I’ll start to build a library off effects that I can share between drawings, which will reduce the amount of layer and by-hand nudging I’ve been doing on my drawings.2

  1. Note that the example SVG will not show the effects in most browsers, as support for them is still in the works. ↩
  2. Especially handy with text, as I won’t need to spread it across layers anymore. ↩