Drawing module midterm update

snufkin's picture

The half of the Summer of Code period seems to have passed so quickly as a Cray XT4 prints out "hello world". This not only means these machines are very fast, but also that I enjoyed much of the time i spent working on my project. Lets have a quick overview what has been done so far, and what is to be done in the second term.


In short the drawing module provides an easy, FAPI-like syntax for other modules to create SVG based graphics. It supports all the basic SVG shapes, and Path, group, as well as basic styling (fill, stroke, opacity), and all available (in the specification) transformations.

In case of a complex shape, the path SVG element can be used. The module offers a way to define the points explicitly, giving the long series of point coordinates that would otherwise go after the d attribute of the element:

<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />

The example is the syntax for a red triangle in SVG. Via the Drawing API:

['path_example'] = array(
'#type' => 'drawing_path',
'#explicit' => TRUE,
'#points' => 'M 100 100 L 300 100 L 200 300 z',
'#stroke' => 'blue',
'#stroke-width' => 3,
'#fill' => 'red',

For a more machine-friendly way a structured array syntax is also provided, as well for the polyline SVG element. There is a simple demo about the potential usage of more complex paths can be found here. There is also a capability to have already saved SVG files displayed, but due to a more complex browser-dependence issue this needs more work and testing.


The array syntax can be used to build other functionality around displaying graphics, like using it for graphs, a graphing API. A basic API for graphs is included in the current (5.x-2.x-dev) release of drawing module, you can check out a small demo here.


Though I found no reference in the documentation so far, it seems jQuery somewhat supports manipulating SVG elements. This gives a great opportunity to use this Drupal-shipped javascript library-wrapper-whatever to manipulate our graphics, giving feedback back to the user, displaying information without clicking (graph point labels, route highlighting etc).

To be done

Though most of my milestones previously set are met, there is still a lot to do. First of all I am intending to do a great code cleanup, and finishing the graphing module. To help developers, who would be interested in the project, my next priority is to assemble a complete documentation on the drawing module, its syntax. For demonstration several examples (like those on the links above) can be found in the module releases tarball on the project page. These will be probably removed, but to be found in the documentation if necessary.

Any comment, suggestion, criticism is appreciated.



jpetso's picture

In the status bar, without displaying the actual SVG, my Konqueror says about both of your linked demos:

A legal svg document requires a <svg> root element.

As Konqueror supports SVG natively, I'd be glad if you could get this to work here. Thanks!

Which page? Looking at all

sime's picture

Which page? Looking at all the demos, the svg tag appears in the source.

Could you check the source,

snufkin's picture

Could you check the source, and maybe paste it to pastebin? All the demos should print out valid SVG, and there is an root element in all of them. I will check later in Konqueror.

I was told that Konqueror doesn't yet have SVG support, it only will in 4. Im trying to check the documentations about it, and have so far found no claim that 3 has support. Could you help me out with a link here?

[edit] ok, after the irc talk i just write down what we learned:

this bug is a rendering issue with konqueror 3.4 (and probably in the 3 series). the svg rendered is valid, and works when saving it to a file and opened. i will try to replicate it.


jpetso's picture

Ok, after having a bit of research, it seems to work this way:

  • Konqueror/KHTML supports SVG since 3.2 with its embedded KSVG part. You can see for yourself at the W3C's SVG test suite and look up features at Wikipedia's feature comparison list. Konqueror supports the <object>, <embed> and <image> tags for embedding SVG graphics.
  • BUT: Konqueror does obviously not support inline SVG, that is, if the <svg> tag and its children occur directly in the (X)HTML source it will fail.

Obvious choices:

a) Ignore Konqueror because of its low market share, or
b) Make result pages use either of the <object>, <embed> or <image> tags that point to an URL which contains the complete generated SVG file.