SVG in Firefox 1.5
From MDC
Firefox 1.5 marks the first official release of a browser from Mozilla that includes Scalable Vector Graphics (SVG) functionality. The road this project has taken to release has been long, and we're excited to get it in the hands of content developers to see what they produce.
Firefox SVG is a subset of SVG 1.1, but not any of the official profiles (Tiny, Basic, Full). A full list of the elements and whether they've been implemented for 1.5 can be found at the end of this document. The rest of this document attempts to provide you with information about our implementation's limitations.
We realize that the pecularities of our implementation can be bothersome when developing content, but we ask for your forbearing as we work towards a full implementation of this large specification.
Reading through this document, you might be wondering when these implementation details might change. Unfortunately the current roadmap puts the public release of Firefox based on the next version of Gecko a fair ways into the future, in the first quarter of 2007. However if you want to start experimenting with the new functionality, nightly builds of the current development are available.
Contents |
Performance
All platforms that Firefox ships for use the same rendering backend, cairo, so their performance characteristics will generally be similar. Performance on linux is the hardest to predict, as it will vary due to various X servers' implementation of the RENDER extension.
SVG rendering in Windows is considerably faster than on other platforms.
Coordinate range
If your content has geometry with a large coordinate range, you need to watch out for problems caused by cairo's internal use of a 16.16 bit fixed point representation for calculations. Cairo doesn't clip primitives before rasterization, so final coordinates after transformation that exceed the range -32678 to 32677 will cause rendering errors and possibly very slow performance.
Text on Windows 98
An unfortunate side effect of using cairo as the rendering backend on Windows is that text rendering does not work on Windows 98 machines. In fact, it's even more serious than that: once any text is encountered during rendering of SVG content, all further drawing will stop.
Font selection
If you're familiar with CSS you probably know that it allows you to specify fallback fonts for the font properties in case glyphs are unavailable in particular font. The current SVG rendering backend will only try using the first font specified, and if it doesn't exist will use a platform font. The fallback fonts are never used; so, for
example, font-family="Arial,LucidaSansUnicode" won't result in LucidaSansUnicode being used if Arial is not available.
Printing
Currently printing is unfortunately not done using the vector properties of SVG to generate extremely crisp output, but instead rendered at screen resolution and then output as an image.
Font sizes when printing on Windows will be much larger than specified for SVG.
Group opacity
The group opacity property opacityallows SVG container objects to be treated as a partially transparent layer, and is separate from the fill-opacity and stroke-opacity properties. The current implementation of opacity is fairly expensive, so should be used sparingly. fill-opacity and stroke-opacity are much faster, and depending on your content can yield the same results.
Group opacity is currently only implemented for <g> and not for <text> or <svg>.
Stroking fonts
On the Microsoft Windows and Mac OSX platforms, the stroke of the text doesn't exactly match the fill. The error is typically quite small, and can be covered by using a slightly thicker stroke. An example of this difference:
<image>
<image> does not support SVG images in Firefox 1.5; instead, it only the raster image formats handled by Firefox.
All instances of <image> have a separate copy of the image being used, which is something to keep in mind if your content is using multiple copies of an image for an icon or such. Unfortunately <use> of <image> content counts as another copy in this case.
Additionally, heavy use of raster images in SVG can badly degrade performance in Firefox 1.5.
Events
We support the SVG event attributes with the exception of onfocusin, onfocusout, and onactivate.
Our onload handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the onload attribute is called for each element, an SVGLoad<code> event is only fired for the root <code><svg> element. Some DOM methods will return garbage or an error if called before the corresponding element has been rendered, which you may need to take into account when writing onload code. Such methods are getBBox, getScreenCTM, etc.
We do not support the Adobe specific key events (onkeydown, onkeyup).
Interoperability
If you're working with current SVG content, you may encounter problems loading it into Firefox. Most of the problems tend to be fairly trivial, and are the result of Firefox being a stricter implementation. Jonathan Watt's SVG Authoring Guidelines explains the common problems.
SVG usage situations
Firefox 1.5 handles SVG as entire documents or when referenced by embed, object, or iframe. It cannot currently be used as source for an HTML or XHTML img element or for CSS properties that take an image reference.
Animation
Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create SmilScript, a small Javascript library that implements a subset of SVG's declarative animation.
Element implementation status
| Element | Notes |
|---|---|
| Structure Module | |
| svg |
|
| g |
|
| defs |
|
| desc |
|
| title |
|
| metadata |
|
| symbol |
|
| use |
|
| Conditional Processing Module | |
| switch |
|
| Image Module | |
| image |
|
| Style Module | |
| style |
|
| Shape Module | |
| path |
|
| rect |
|
| circle |
|
| line |
|
| ellipse |
|
| polyline |
|
| polygon |
|
| Text Module | |
| text |
|
| tspan |
|
| tref |
|
| textPath |
|
| altGlyph |
|
| altGlyphDef |
|
| altGlyphItem |
|
| glyphRef |
|
| Marker Module | |
| marker |
|
| Color Profile Module | |
| color-profile |
|
| Gradient Module | |
| linearGradient |
|
| radialGradient |
|
| stop |
|
| Pattern Module | |
| pattern |
|
| Clip Module | |
| clipPath |
|
| Mask Module | |
| mask |
|
| Filter Module | |
| filter |
|
| feBlend |
|
| feColorMatrix |
|
| feComponentTransfer |
|
| feComposite |
|
| feConvolveMatrix |
|
| feDiffuseLighting |
|
| feDisplacementMap |
|
| feFlood |
|
| feGaussianBlur |
|
| feImage |
|
| feMerge |
|
| feMergeNode |
|
| feMorphology |
|
| feOffset |
|
| feSpecularLighting |
|
| feTile |
|
| feTurbulence |
|
| feDistantLight |
|
| fePointLight |
|
| feSpotLight |
|
| feFuncR |
|
| feFuncG |
|
| feFuncB |
|
| feFuncA |
|
| Cursor Module | |
| cursor |
|
| Hyperlinking Module | |
| a |
|
| View Module | |
| view |
|
| Scripting Module | |
| script |
|
| Animation Module | |
| animate |
|
| set |
|
| animateMotion |
|
| animateTransform |
|
| animateColor |
|
| mpath |
|
| Font Module | |
| font |
|
| font-face |
|
| glyph |
|
| missing-glyph |
|
| hkern |
|
| vkern |
|
| font-face-src |
|
| font-face-uri |
|
| font-face-format |
|
| font-face-name |
|
| definition-src |
|
| Extensibility Module | |
| foreignObject |
|
Categories: SVG