The following is a guest post by Chris Scott. Chris was messing around with SVG filters and how they can be applied to text. I thought this was quite interesting because SVG filters are quite a bit different than CSS filters. Arguably more powerful, as there are more of them and you can do things like bevel/emboss or stroke which you can’t in CSS filters. Chris goes into detail here on how it’s done including a tool to make it even easier.
There has been a general trend in Web development, for some years now, away from using images in designs. Only a few years ago software companies would favour using an image of a rounded corner as the best “cross-browser” solution; the CSS attribute
border-radius has made that technique seem very antiquated today. Titles are another example of this trend, where in the past one may have generated a fancy banner title in Photoshop and used an image to show it on the page. These days we have web fonts at our disposal and CSS3 to help us achieve shadows and other effects. These solutions load much faster, scale better and are more accessible and semantically correct. But there is even more we can do!
SVG with Filter Effects have a lot of potential for complex text styling. Take a look at this example:
That line is created using SVG Filter Effects. It’s just text. You can select it with your cursor. Search engines can index it. It will scale in size without losing quality. To boot, it takes very little time to download. You can achieve a whole lot more, too, the scope for creativity with Filter Effects is huge. The example was created with a library called Raphael.js and an extension I wrote for it. This article talks about the rationale for developing the extension and shows – in brief – how it can be used.
Filter Effects for Raphael
Raphael has a shortcoming though: no support for Filter Effects. I remember one of my customers specifically requesting a drop shadow for bubbles in a data visualization which was interactive and animated. The request stumped me for a while as I bumped into this limit of Raphael. For that project, I wrote a very specific extension to Raphael for handling drop shadows. But the same complexity that had initially put me off SVG was back and worse than ever. Make no mistake, Filter Effects are very, very technical.
So, after that project, I set about building a more full-featured library to make Filter Effects as easy to apply as Raphael makes drawing shapes.
Introducing Filter Effects for Raphael!
Here’s how to use it:
First, the HTML. This bit is dead simple, just a
div with an
To start an SVG drawing with Raphael you create a “paper” by referencing the
id of the container element:
var paper = Raphael("title-container");
Now to do some drawing. This example creates some text and sets some of the style attributes:
// The first two arguments are the origin of the text
var title = paper.text(0, 30, "Filters are ice cold");
You can chain effects, so applying a shadow afterwards is straightforward:
Pretty cool, huh? You can take this much further if you want, by creating your own filters. The SVG spec lists (lower level) filter effects which can be combined to create all kinds of filters (convulsion matrices, in particular, can be used for a vast number of operations).
This demo has the full code and some other examples of different effects that can be achieved:
What are the downsides to SVG? Well – aside from the pros and cons of vector over raster (like
canvas) – there are a couple I can think of:
- Browser support – You may not be surprised to learn that the graphical trickery discussed here is not supported in older versions of IE, 10 only. SVG itself will render in IE9, just without the effects. Firefox, Chrome and Opera have supported Filter Effects for ages
- Semantics – Some may have reservations about the semantic validity of using SVG in documents, certainly the
svgtag doesn’t give any clue as to it’s content; you can use a sensible parent, though
Hopefully, this piece has given you a good idea of what filter effects can do and how Filter Effects for Raphael can do them. Check out the project page on Github for more details. Thanks for reading!