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.

SVG Fragment Identifiers

An SVG feature appearing for the first time in Firefox 15 is support for SVG Fragment Identifier linking. This feature allows authors to display different parts of an SVG image by specifying a different fragment identifier on the end of the URL.

The Firefox 15 implementation also includes support for the view element which is basically a predefined fragment identifier. It does not however, support XPointer style fragment identifiers.

One use case for fragment identifers could be an SVG document with a set of sprites arranged in a grid. Fragment identifiers could then be used to display one or more of those images on another html or svg page.

Here’s an example that shows Fragment Identifier Linking in action

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.

SVGTests interface implemented

Support for the SVGTests interface has just landed in Firefox. It’s currently available in Nightlies and all being well, should make its release appearance in Firefox 12.

The SVGTests interface allows scripts to check whether additional functionality is supported by a browser. There’s no strict definition of what extensions mean but Firefox currently uses element.hasExtension(“http://www.w3.org/1999/xhtml”) to suggest that foreignObject elements support html content and element.hasExtension(“http://www.w3.org/1998/Math/MathML”) to suggest they also display mathML.

The SVGTests interface also allows the requiredFeatures, requiredExtensions and systemLanguage attributes to be manipulated as if they were arrays using the SVG DOM.

SVG Masks are changing their default colour space

According to the original SVG 1.1 specification masks in SVG always operated in the linear RGB colour space. That meant that Firefox always converted the graphic being masked to linear RGB and after that, applied the mask.

SVG 1.1 2nd edition changes the way masks work and a patch has landed for Firefox 10 to match that change. SVG masks now honour the color-interpolation property. This means that authors can choose whether the graphic is converted to linear RGB before the mask is applied.

The thing to watch out for though is that the default value for color-interpolation is sRGB so existing content may render slightly differently. If you want things to stay the same you need to add color-interpolation=”linearRGB” as an attribute of the mask element.

Opera has worked like this for some time now and a patch make this change also landed in Webkit recently so Chrome and Safari will render things this way at some point too.

SVG is on all the time now in Firefox

In versions of Firefox prior to 4.0 there was an svg.enabled flag that you could set to false in about:config to disable Firefox’s SVG capability.

During the development of Firefox 4, UI changes took more and more advantage of SVG; for buttons for instance you can ship with fewer bitmaps – one scalable drawing can replace all the bitmaps for different screen resolutions and using SVG filters you can even derive the greyscale disabled state from the enabled button.

Eventually we discovered that the Firefox 4 UI had become so internally dependent on SVG that it would not start any more when you set svg.enabled to false so we removed the flagfootgun. SVG is now a first class citizen just like html.

One consequence of this is that if you were using an SVG plugin such as the Adobe or Corel SVG viewers these will no longer function. To ease the pain, we have implemented more of the SVG specification in Firefox 4 than ever before and as you can see we’re up to a similar score to the Adobe plugin. There are still some things that the Adobe plugin does that Firefox does not, such as SVG fonts there are now things that Firefox does or does correctly that may in some way make up for that.

SVG cursors

Daniel Holbert wrote a while ago in svg-as-image that you can use SVG in many new places in Firefox 4. Did you realise that that means that you can use SVG for cursors too?

For an SVG cursor it’s as simple as:

cursor: url(cursor1.svg) , auto;

Browsers that don’t understand SVG cursors should fall back to the non-URL value.

One caveat is that the SVG image must contain a length-valued (not percentage-valued) height and width on its root SVG node. The usual SVG as an image restrictions apply but animation will work so spectacular things should be possible.

For more information see the newly updated MDN article: Using_URL_values_for_the_cursor_property