SVG in Mozilla

News / Latest Builds / Samples and Screenshots / Source Code / FAQ

News

13th September 2001

• James Turner has uploaded a new mac build.
• Daniele Nicolodi has a new linux build.
• Fixed the linejoin and fillrule css styles. (See sample for linejoin). The miterlimit property is also working correctly.

12th September 2001

• Andrea Salmasso has made a nice sample of the different stroking styles for line endings and angles.
  Sadley, as Andrea noted, the sample illustrates that linejoin:bevel and miterlimit don't work like they are supposed to :-(
  I still have to figure out why that is the case...
• James Turner has fixed the libart redraw bug! For an illustration of this bug, mouseover the shapes in polygons3.xml.
  Until James' fix filters into the libart CVS repository, you can get the patch here.
  There was also a message recently by Raph Levien (the author of libart) that the 'paint-leaking-to-the-right'-bug, which can occasionally be observed in mozilla svg, will be fixed soon.
• Daniele Nicolodi has implemented the remaining quadratic bezier path commands (Q, q, T and t). See quadbezier01.xml for an example.
• Andreas Streichardt has a newer linux build than the one I had referenced here earlier. Apparently the old one (mozilla-SVG-2.tar.gz) doesn't have some of Bradley's patches applied and is really slow.

06th September 2001

• We've now got Windows, Macintosh and Linux builds! Windows and Macintosh builds can be downloaded in the builds-section. Andreas Streichardt has a linux build here. Note that the linux build needs a recent libart (see Andreas's post).
• James Turner has ported the svg code to the Mac and hacked up libart to support the Mac native pixel layout.
• Will Cook has implemented the <rect>, <line> and <ellipse> elements. There are some samples here. Will has also hooked up the skew transformations. See skew01.xml for an example.
• Steve Bowen has gone through the trouble of debugging this very webpage, so all the internal links should now work. Thanks Steve!
• Bradley Baetz has made the svg compile under linux, implemented SVGDocument-support, and has moved all the code onto a branch in the mozilla.org cvs repository, which he has lovingly maintained and kept in sync with the Mozilla trunk for the past few weeks. Having the code on a CVS branch means that it is now much easier to get and build the code. So if you dare go to the source-section for more instructions, check out the code and help us hacking!
• Apart from a few bugfixes and tweaks, I have implemented support for some more css properties: stroke-fillrule, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin and stroke-miterlimit. See xbl-shapes2.xml for an example of stroke-dasharray.

20th July 2001

• I've compiled a new Windows build with a couple of small bug fixes:
  • The 'd'-attribute of <path>s is now readable (previously path.getAttribute('d') didn't give the real value).
  • The CTM chain now includes anonymous parents as well as real parents. (This is only relevant if SVG is used within XBL.)
• Both fixes are needed to render the new samples adrenalin.xml, diazepam.xml, glutamate.xml and mols3.xml. These samples are CML (chemical markup language) files, made to render using XBL and SVG.

19th July 2001

• Added new sample arcs1.xml
• Added new samples chem1.xml and chem2.xml
• Tobias Reif (http://www.pinkjuice.com/myDigitalProfile.htm) pointed out that some of the samples are actually invalid svg! The offending samples are all those that contain <foreignObject>s. According to the svg dtd, these tags are only allowed as children of <switch>, but not <svg> or <g>. Since we don't have <switch> yet but <foreignObject> is a very handy thing, I'll keep those invalid samples for now and mark them as such.

16th July 2001

• I've updated the SVG sources to stay in sync with Mozilla and compiled a new Windows build with SVG and MathML support. It's based on a trunk snapshot of 11.07.01 and you can find it here. New features:
  • Corrected transformations for circles and paths.
  • Corrected stroke scaling
  • Fixed some relative coordinate bugs in <path>s. See the paths1.xml sample.
  • Implemented h, H, v and V path-commands. See the paths1.xml sample.
  • Implemented shorthand (smooth) cubic path commands (s, S). See the paths2.xml sample.
  • Implemented elliptical arc path-commands (a, A). See the paths3.xml sample.
  • The svg-element's viewport property is set correctly now. This is e.g. handy for converting event coords into the svg-element's coord system, as in
    var x = theEvent.clientX + scrollX - svgElement.viewport.x
    var y = theEvent.clientY + scrollY - svgElement.viewport.y
  • Fixed a bug in the redrawing when the style-attribute is changed by script. (see style1.xml sample)
  • Implemented translating and scaling for <foreignObject>s, but they still don't rotate :-(
• There's a bug in the xml document's implementation of createElementNS('http://www.w3.org/2000/svg', ...) which means that you can't dynamically create svg content in xml documents. (You can in XUL documents, though.) I've filed a bug (with patch) on this (#90954).

8th June 2001

• I've added some support for <path>s. This means we can now render cubic splines, such e.g. in the tiger
• The <foreignObject> element is now implemented, allowing us to put html/xul or any other content onto svg canvases. If you've played around with <bulletinboard>s before, you might be interested in this one. See the samples for details.
• SVG now happily co-exists with XBL. See samples.
• The suspendRedraw(), unsuspendRedraw() and unsuspendRedrawAll() of the SVGSVGElement interface are now implemented (not fully, though).
• SVG DOM support from JS is enhanced and event handlers (addEventListener) work
• Added two user prefs: 'svg.bezier_flatness' and 'svg.stroke_flatness'. They map onto the corresponding libart parameters.
• The code doesn't render to nsIImage's anymore but to nsIDrawingSurface's. This is needed for getting <foreignContent> working
• I have started to write a small FAQ.

11th May

• Circles are now implemented. There are some screenshots here.
• The SVG DOM is now working (at least partially) from JavaScript. (dom1.xml, dom2.xml)
• Polylines don't crash anymore when used with 'fill'

Latest Builds

• The latest Windows build of Mozilla with SVG support can be found here. It is a build of the CVS branch 'SVG_20010721_BRANCH' of 06.09.01 and includes MathML.
• Thanks to James Turner, we now also have a Macintosh build. The most recent one (dated 13.09.01) can be found here.
• Andreas Streichardt has a Linux build here.
• Daniele Nicolodi has a Linux build (dated 13.09.01) here.

SVG samples and screenshots

	polygons1.xml	Simple stroked and filled regular polygons. Modified W3 sample
	polygons2.xml	Basically the same as the polygons1 sample, but made dynamic with the CSS :hover pseudo-class.
	polygons3.xml	Polygons with transparency and CSS :hover pseudo-classes and attribute selectors. Illustrates a Libart redraw bug.
	opacity1.xml	Dynamically constructed polygons with script animation and CSS-determined opacity (:hover)
	opacity2.xml	Two overlapping polygons with dynamic CSS-determined opacity and stroke.
	dom1.xml	Script-based animation of a triangle by direct manipulation of DOM properties (as opposed to attributes).
	dom2.xml	Illustration of the SVGTransformList and SVGTransform DOM interfaces. Note that the SVGTransformList::Consolidate() function is not implemented yet, so clicking the Consolidate-button has no effect.
	circles1.xml	Simple stroked and filled circle. (Modified W3 sample)
	circles2.xml	Filled circles with :hover-dependent opacity
	lion.xml	A lion made up of polygons. Nicked from Steve Bowen's site
	butterfly.xml	Butterfly made up of cubic splines. Taken from JASC's WebDraw
	events1.xml	Demonstrates simple mousedown event handlers on svg elements.
	events2.xml	Drag an SVG circle around on the screen.
	circles3.xml	Essentially the same as circles2.xml, but with a background image (using <foreignObject>). Note: This sample is not valid svg! The <foreignObject>-tag is used in a way not allowed by the svg dtd.
	tiger.xml	The famous tiger, made from cubic spline <path>s
	xbl1.xml	Interactively moveable transparent XBL/SVG triangles. CSS: xbl1-bindings.css, XBL: xbl1-bindings.xml
	xbl2.xml	Same as xbl1.xml but with a background image. CSS: xbl1-bindings.css, XBL: xbl1-bindings.xml. Note: This sample is not valid svg! The <foreignObject>-tag is used in a way not allowed by the svg dtd.
	xbl-shapes.xml	Moveable/Resizeable XBL/SVG triangles and cubic splines. CSS: xbl-shape-bindings.css, XBL: xbl-shape-bindings.xml
	foreign1.xml	HTML and XUL mixed with SVG using <foreignObject>. Note: This sample is not valid svg! The <foreignObject>-tag is used in a way not allowed by the svg dtd.
	style1.xml	Very simple example of changing style attribute through JS.
	paths1.xml	Examples of <path>s with l, L, h, H, v and V commands. Note: This sample is not valid svg! The <foreignObject>-tag is used in a way not allowed by the svg dtd.
	paths2.xml	Examples of <path>s with c, C, s and S commands. Note: This sample is not valid svg! The <foreignObject>-tag is used in a way not allowed by the svg dtd.
	paths3.xml	Examples of <path>s with elliptical arc segments (a, A commands). Adapted from a W3 sample. Note: This sample is not valid svg! The <foreignObject>-tag is used in a way not allowed by the svg dtd.
	arcs1.xml	Ellipses built using <path>s, generated by script.
	chem1.xml	A structural diagram 'stolen' with permission from Henry S. Rzepa's and Peter Murray-Rust's Chemical Examples of SVG and CML (Chemical Markup Language)
	chem2.xml	chem1.xml + 8x zoom
	adrenalin.xml diazepam.xml glutamate.xml mols3.xml	These samples are CML (chemical markup language) files, made to render using XBL and SVG. The original files are from www.xml-cml.org. Implementation files: cml.css and cml-bindings.xml.
	line01.xml	Examples of <line> elements with different stroke-linecap styles and stroke-widths.
	rect01.xml rect02.xml	Examples of <rect> elements.
	ellipse01.xml	Examples of <ellipse> elements.
	xbl-shapes2.xml	Interactive shapes, same as xbl-shapes, but with different 'stroke-dasharray' styles applied. Note that currently the dasharray needs to be enclosed in inverted commas. This needs to be fixed. CSS: xbl-shape-bindings.css, XBL: xbl-shape-bindings.xml
	skew01.xml	Examples of skew transformations.
	quadbezier01.xml	Examples of the quadratic bezier path commands. (Modified w3c sample by Daniele Nicolodi.)
	linestroke.xml	Illustration of the different stroking styles for lines. Sample by Andrea Salmasso.

Old Screenshots

• Screenshots 1: polygons with transparency
• Screenshots 2: circles with transparency, lion (code nicked from Steve Bowen's site)

Source code

I have filed a bug on getting the SVG code into cvs.mozilla.org. There (bug #80142) you can find discussions about the svg code and dependent bugs. Now that Bradley has put all the code on a cvs branch in the mozilla.org repository, the patches attached to that bug aren't up to date anymore. If you are interested in getting and building the source, you can check it out from cvs directly. The branch tag is 'SVG_20010721_BRANCH'. This is a mini-branch, so not all files are tagged and you need to ensure you pull the HEAD-revision when a file is not tagged. The best way to do this is to checkout a branch version of client.m(a)k :
cvs checkout -r SVG_20010721_BRANCH mozilla/client.m(a)k
and let client.m(a)k do the pull.

Building Mozilla with SVG is unfortunatley still somewhat complicated, since in addition to the source code you need to apply several patches and you need to install a recent (and in the case of windows and mac: patched) version of libart. I will post instructions here soon.

FAQ

What is working so far?

• The following tags are at least somewhat supported:
  • <svg>: only a subset of the SVGSVGElement interface is implemented
  • <g>
  • <polyline>: filled polylines don't work
  • <polygon>
  • <circle>
  • <path>: The quadratic path commands aren't implemented yet (q,Q,t,T). All other commands are working (m, M, z, Z, l, L, C, c, s, S, h, H, v, V, a, A)
  • <foreignObject>: Doesn't work on linux. Rotation doesn't work.
  • <line>
  • <rect>
  • <ellipse>
• All elements should support the transform-attribute and the associated DOM interfaces. The transform-attribute currently parses only rotate, scale and translate transformations.
• The only CSS properties implemented so far are:
  • fill
  • fill-opacity
  • fill-rule
  • stroke
  • stroke-dasharray: currently the dasharray has to be enclosed in single quotes. This will be fixed in future.
  • stroke-dashoffset
  • stroke-linecap
  • stroke-linejoin
  • stroke-miterlimit
  • stroke-opacity
  • stroke-width
• SVG should work fine in compound documents. I.e. you can place SVG content into a XUL or HTML document, as long as it is wrapped up in an enclosing <svg>-</svg> pair and the namespace ('http://www.w3.org/2000/svg') is properly specified.
• SVG should work fine in XBL. See the samples for details.

Is this some sort of rival project to the official Mozilla SVG project?

No, this code was written with the intention of going into the official Mozilla SVG project. As far as I am aware, there is no other Mozilla SVG development going on at the moment. The official Mozilla SVG project homepage can be found here.

When will this code go into the Mozilla CVS repository?

Well - we have made it onto a branch in mozilla.org's cvs repository! As for getting the code onto the main trunk, it'll still need to be reviewed and there are some other issues that need to be sorted out. E.g. our rendering library (libart) is not licensed under the MPL.
You can follow the progress by cc'ing yourself to the bugzilla bug #80142.

Does it run on platform XY?

In principle, the code should be cross-platform. Libart (the rendering library we use) is known to work under Linux and Windows and Macintosh. Again, in principle it should be easy to port to other platforms.
At the moment we have Windows, Macintosh and Linux builds.
If you think you can get this code compiled on some exotic platform, then please give me a shout.

Why are you writing this code?

Here at Crocodile Clips we are actually developing a future product based on Mozilla! This product will need some basic SVG support, about as much as I have implemented so far. So from here on, anything I'll do will be purely for fun and in my spare time.

Why are you using Libart as the rendering backend?

I chose Libart because

• it is available under a Mozilla-compatible license (LGPL)
• is x-platform (known to work on at least Linux and Windows and Macintosh)
• it implements almost everything needed to render SVG (stroking, antialiasing, gradient filling, clipping, etc.). Also, the Libart datastructures can be used for things like mouse hit testing.
• it is very lightweight and fast. (Not hardware-accelerated, though.)

When running the interactive samples I experience redraw problems. I see rectangular gaps in areas that should be completely filled. Why is that?

I am pretty sure that it is a libart bug. When a polygon has no intersections with the redraw area it doesn't seem to get rendered. On the plus side, this bug shows nicely that the microtile invalidation code is doing what it is supposed to :-)
Apparently this bug has now been fixed, and we're justing waiting for it to feed into libart cvs!

Why doesn't my svg file render in the patched browser?

This could be for a whole range of reasons:

• All SVG tags must be properly namespaced ('http://www.w3.org/2000/svg'). This can e.g. be accomplished by putting an attribute 'xmlns="http://www.w3.org/2000/svg"' onto the outermost svg-tag.
• All SVG content has to be put into an enclosing <svg>-</svg> pair.
• Only a small subset of SVG is implemented to date. See also What is working so far?