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 Filters
SVG with Filter Effects have a lot of potential for complex text styling. Take a look at this example:
See the Pen SVG Filters on Text by chrismichaelscott (@chrismichaelscott) on CodePen
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.
Apparently, only 0.1% of Web pages use SVG graphics. If that statistic is anything to go by, there’s a good chance that you are probably not using SVG on a regular basis. Why is SVG used so unpopular? It’s only a guess, but the reason I didn’t get into SVG (until I absolutely had to) was its learning curve: SVG is an XML vocabulary and is, I think, extremely technical (matrix multiplication for colour shifts, anyone?). The way I got into SVG was through Raphael.js, a JavaScript Library for creating vector drawings. Because it’s a JavaScript library it felt fairly familiar, all of the complexity was abstracted away. Before long I was creating complex graphics like a pro.
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 id
:
<div id="title-container"></div>
Everything else is done in JavaScript.
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");
title.attr({
"fill": "MintCream",
"font-family": "Butcherman",
"font-size": "54px",
"text-anchor": "start"
});
Now for some effects! The simplest things you can do are shadows, blurring, lighting, embossing and colour shifting. Those require very little coding. Let’s try the emboss effect. Add to the JavaScript:
title.emboss();
You can chain effects, so applying a shadow afterwards is straightforward:
title.emboss().shadow();
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:
See the Pen SVG Filters on Text by Chris Coyier (@chriscoyier) on CodePen.
Shortcomings
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
svg
tag doesn’t give any clue as to it’s content; you can use a sensible parent, though
Wrapping Up
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!
“only 0.1% of Web pages use SVG graphics.”
That’s Horrible!
I always try to use as many .svg graphics as possible. Look at a site that’s vector on a high-ppi Smartphone, Phablet, etc., and one that isn’t. There’s a huge difference in “pop” and clarity: It’s almost like the difference between watching old TV and HD.
Graceful degradation is fairly easy for the IE and Droid 2.x crowd, and everyone’s device will soon accomodate .svg. You’ll future proof against 4K desktops and laptops. Bitmaps will look very dated very soon.
Just do it!
Yeah I try to use SVG whenever I can because I hate the idea of managing @2x images. I don’t want to do everything more than once. SVG resolves much of this (PNG fallback of course, but that’s easy).
SVG looks very blurry with small icons on 1:1 pixel-ratio monitors. This is one case where bitmaps win over.
Cool stuff. Though, another shortcoming which might be worth mentioning is browser performance. Scrolling past the demos was pretty choppy and slow.
I think this is awesome and has huge potential, but I would also say the quality on some of these filters has a bit to go still. Some of the characters with your initial example are pixelated so far on Chrome 28.0.1500.95 for OS X version 10.8.4. Like I said, still cool to see the potential.
I already stumbled over SVG text filters a while ago, but after I realized their disastrous mobile compatibility (no Android, just iOs 6+), I decided that they are not worth the effort these days.
Exactly what I thought about – Wordart. Though, hipster style pages will love that.
Is Wordart making a comeback then?
Please don’t say things like that.
That is what I thought these examples looked like! :X
Sadly, my Samsung Note 8 with Google Chrome had rendering issues (in some cases the examples just didn’t show up). However, with image file sizes increasing due to responsive design and hi-rez monitors, I can see vector playing a huge part.
Great post.
Probably a bit early to be rolling this out across all my sites but good to know what the future may hold.
I was pretty interested to see this turn up in my email inbox with the filters applied to the text. In outlook no less.
I forwarded it on to a couple of other accounts but no joy elsewhere. May do a full litmus test if I get time.
Cheers.
Very interesting… could be great for simple logotypes…
Something I am trying to work out how to do is make a text like that scale like an image does when it has ‘max-width’ applied to it. So for example if you created a basic logotype logo using a few svg texts and positioned them nicely (but precisely), could SVG be made to output so the content scales like an image does when it has max-width i.e. auto scaling but retaining the internal layout and proportions…. Obviously this is possible with zoom/transform but it would be great if it did not require any designer input and could behave like a responsive image…
Any idea if SVG can be used to achieve something like this?
When I scroll to the example with the 4 different lines, my browser really starts to churn. The redraw rate is roughly 5% of normal, can’t imagine what that would be like on mobile devices, especially under-powered ones. Seems like images would still be best as far as performance is concerned.
I can’t understand why you use Raphael for this, when the main advantage of Raphel over other drawing libraries is the VML compatibility layer, but this effects are svg only. Any special reason for this?
Great post!
Here’s a forked pen so you can have the text inside the html tag for accessibility, and have JS pull the text from there.
Hi Chris,
Just noticed that when I used the Pin It bookmarklet to pin your articles, no suitable images come up: http://imgur.com/9P1G8Uc
It would be helpful to have a relevant static/featured image on each article that Pinterest can pick up and entice people to click through – just my two cents :)
Danielle
Funnily enough I was fighting with these sorts of ideas last week and as much as I’d love to use it more often, the text rendering inconsistencies between browsers make it a bit tricky. While the css styling capabilities vary (e.g. letter-spacing) and are rather limited (yes, I know that guys at Mozilla will be sharing some love for it in next versions), the bigger problem is a lack of simple word-wrapping, which makes it tricky (read: hacky) to use for RWD. =
It’s a shame, really, but I can see these things changing next year, with the “release” of SVG 2.0.