Mozilla SVG Samples

News

20.07.2003

• The mime-type issue (bug #160882) and a whole load of other things are now fixed in SVG_20020806_BRANCH builds.
• foreignObject support is fixed for gtk2 builds on SVG_20020806_BRANCH

28.11.2002

• I've uploaded a linux build. Among other things, it fixes the infamous bug #111152, so it should work for any X11 pixel-depths. foreignObject tags don't work in this build.
• I've uploaded a new Windows-only SVG GDI+ build.
• bug #182533 now tracks progress of the SVG backend rewrite

15.08.2002

• You can download a new Windows-only SVG GDI+ build here. Major enhancement over the previous version: Implements links (the <a>-element).

14.08.2002

• I've uploaded yet another Windows-only SVG GDI+ build here. Main new features:
  (1) .svg-files and files with mime type images/svg+xml are now rendered correctly. No more crashing.
  (2) Presentation-attributes (e.g. fill="red" instead of style="fill:red;") are working. Thanks to Mike Lee for the clever implementation idea (see bug#111317).

12.08.2002

• You can find a new Windows-only SVG GDI+ build here. This build includes the personal security manager.
• SVG_20020806_BRANCH is now switched over to gmake makefiles. If you want to build GDI+ SVG from source, checkout client.mk on SVG_20020806_BRANCH:
  cvs co -r SVG_20020806_BRANCH mozilla/client.mk
  Then set up a configuration file containing
  --enable-svg
  --enable-svg-renderer-gdiplus
  --disable-activex
  and pull/build:
  make -f client.mk
  As mentioned below you need a platform sdk with gdiplus. If you're on Windows98/2000/NT, you'll need to copy the file gdiplus.dll into your bin-directory after building.

08.08.2002

• Finally! You can grab an experimental Windows-only SVG build with <text> and <tspan> support here. This build will only work with Windows98/Me/NT/2000/XP. Win95, MacOS and Linux are not yet supported. Once you've extracted the zip, you'll find that the bin/-folder contains a file 'gdiplus.dll'. This file is only needed for Win98/NT/2000. If you're running WinXP make sure you delete it, as apparently it can cause Mozilla to crash if just left there.
  The main (visible) enhancement in this GDI+ SVG build is the addition of basic text support. It also contains numerous bug-fixes and probably introduces some regression as well...
  Note that if you want to specify the font-size you'll need to use a unit identifier such as px or pt. E.g., style="font-size:30;" doesn't work (although it should); style="font-size:30px;" does.
• For some samples you can try the 'mozillified' conformance suite. This suite of tests is a clone of the W3C's conformance suite which has been XSLT-transformed into a format that Mozilla can digest. Mozilla has two main problems with the standard W3C suite. Firstly, Mozilla SVG doesn't understand presentation attributes such as fill="..." or stroke="...". These have to be put into a style-attribute, e.g. style="fill:...; stroke:...;". Secondly, Mozilla SVG doesn't recognise the SVG mime type at the moment, so the test files need to be served up as text/xml.
• For some more samples you can point your Mozilla SVG browser at this presentation.
• Some technical detail:
  The new code basically consists of a rewrite of the SVG rendering backend and some additions to make the new elements (text,tspan) work. The new rendering backend architecture is designed to be modular, so that we can plug in different cross-platform and platform-specific renderers. The only renderer implemented so far is based on GDI+ and hence Windows-only. It should be relatively straight-forward to move the current cross-platform libart implementation over to the new architecture.
  Since the code is too big for a patch (it contains 61 modified, 17 obsolete and 59 new files), I've checked it into a CVS mini-branch at mozilla.org. Until we've at least got the libart backend working it will not be ready for the trunk. If you want to build from source you'll need a recent version of the MS Core Platform SDK; one that contains the gdiplus headers and lib. You can download one from www.microsoft.com/msdownload/platformsdk/sdkupdate/.
  Once you've got the SDK set up, you need to pull mozilla/client.mak on branch SVG_20020806_BRANCH and proceed with 'nmake -f client.mak pull_all build_all'. For files not touched by GDI+ SVG, this will pull the trunk. You can find a list of all the files in the mini-branch in client.mak (SVG_BRANCH_{NEW,OBSOLETE,MODIFIED}_FILES).
  You need to set MOZ_SVG, but you don't need MOZ_INTERNAL_LIBART_LGPL.
  For some reason the Mozilla ActiveX control doesn't build with the new MS SDK so you'll have to disable building it.

07.06.2002

• On Windows we'll have some basic text support "real soon now". Go here for a sneaky preview.

31.05.2002

• Updated the xbl/svg samples (xbl1.xml & xbl-shapes.xml) to reflect XBL syntax changes (bug#119317)
• The foreignObject samples are currently somewhat broken, pending a fix to bug#147920

21.12.2001

• Thanks mainly to the effort of Bradley Baetz, the SVG code has now finally found its way onto the CVS trunk. Bradley managed to check the 35000 lines of code into the repository literally 1minute before it was closed for the 0.9.7 milestone freeze!
• I've started migrating much of the information from the croczilla.com site over to the official Mozilla SVG project page. Please go there as your primary source of information. I will only be keeping most of the samples on croczilla.com. You can still find the old croczilla.com index 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)