Archive for the ‘Uncategorized’ Category

New SVG/CSS Filter support in Firefox

There’s a new specification for filters that replaces the filters module in SVG 1.1. Firefox and Chrome are both implementing new features from this specification.

Firefox 30 was the first version to support feDropShadow As well as being simpler to write, feDropShadow will be faster than the equivalent individual filters as it skips some unnecessary colour conversions that we’d otherwise perform.

Firefox 35 has support for all CSS Filters so for simple cases you no longer need any SVG markup to create a filter. We’ve examples on MDN showing how to use CSS filters.

We’ve also implemented filter chaining, this is we support multiple filter either via URLs or CSS filters on a single element.

As with earlier versions of Firefox you can apply SVG and CSS filters to both SVG and HTML elements.

As part of the rewrite to support SVG filters we’ve improved their performance by using D2D on Windows to render them thus taking advantage of any hardware acceleration possibilities on that platform and on other platforms using SIMD and SSE2 to accelerate rendering so you can now use more filters without slowing your site down.

Advertisements

New SVG filter pseudo inputs for Firefox 17

Firefox has supported all SVG 1.1 filter primitives since Firefox 3, however until now it has only supported SourceGraphic and SourceAlpha pseudo inputs. Fortunately these are by far the most common.

Firefox 17 includes support for an additional two pseudo inputs – FillPaint and StrokePaint. The SVG testsuite has an example showing how they can be used.

Even though HTML doesn’t use the SVG fill and stroke CSS properties, you can still set them in Firefox to have StrokePaint and FillPaint filters with HTML.

Hyperlinking semantics for SVG animation

One of several new SVG capabilities in Firefox 15 is support for triggering animations by clicking on hyperlinks.

If a link target is an animation element then the animation will begin when the user clicks on the link such as in this example.

This completes SVG 1.1 animation support in Firefox, apart from the deprecated animateColor element and wallclock timing, both of which are likely to be removed in SVG 2.0. Therefore from Firefox 15 we’re also enabling the http://www.w3.org/TR/SVG11/feature#Animation feature string.

SVG tooltips and style setting

Last weekend, I landed a couple of fixes to improve the integration of SVG with existing Gecko functionality. (To be exact, Takeshi Kurosawa and I fixed bug 329212 and bug 374216)  These improvements are both available in nightly builds.

In particular, we now support setting SVG element.style.property values e.g. element.style.fill=”green”. This feature was sufficiently popular that Google’s SVG Web project took the time to patch Firefox to implement this whenever it was loaded. It’s possible that this change may cause some pages written to target Microsoft Explorer filter implementation to display strangely since a test like if (element.style.filter) will now pass in both IE and Gecko. If you have such tests you may need to update them to ensure that they really do only catch IE.

We also display tooltips in SVG now by converting <title> elements into tooltip text so you won’t need to roll your own tooltips in future.