Scalable Vector Graphics (SVG) - Jeroen Dijkmeijer¶

Tags: django, pun

(Talk at the 2012-01-18 Dutch Django meeting)

Jeroen actually has zero Django experience, but he does nice things :-) That website of his is actually made with SVG.

Update 2012-01-23: his presentation is online at

http://www.iscriptdesign.com/svgopen/presentation/ .

SVG is more than 10 years old, Adobe published the first version in 1999. IE6 supported it with an adobe plugin, most other browsers started adopting it in 2003. IE9 fully supports it, btw. Nice: since 2011 (corrected, I said 2001…) it is even part of the html5 specification.

Scalable vector images are, well, scalable. Despite the screen size, you won’t see the pixels as in an upscaled pixel image.

SVG as a format is just XML. You can draw lines, arcs, circles, boxes and so on on a canvas. The output can be styled with css, just like html. It are DOM elements. And you can manipulate the drawn SVG elements with javascript, too.

What you use often is pen movements. M or m for move, L or l to draw a line. The lower case is relative to the current location, the upper case for absolute location. M 10 10 l 10 20 l 20 20 l 20 10 l 10 10 would draw a rectangle. For more elaborate forms you can use inkscape, an open source SVG editor.

Nice: events on SVG objects can be processed by Javascript. You can also do animations with SVG. There are three ways:

• CSS. Very promising, but browser support is spotty and it is still not really completely standardized.

• SMIL. Synchronised multimedia language. It came from CWI, where Python also came from :-) It ran out of steam early on because of flash and so, but it is now back inside SVG.

• With javascript. “Simple” DOM manipulation.

As browser compatibility is still a bit of a problem, you’re probably best off by using libraries like raphaeljs if you want to use SVG. (Personal note: I used raphaeljs with success in a small Django project last week).

He showed a couple of demos. What was particularly good was the easy and on-the-fly integration between forms and the picture (like for a custom table that can hover over the couch). Put in a different height of the couch and the table would adjust. Good javascript integration.

He uses it for making designs for feeding them into CNC milling machines like they have at the fab lab in The Waag in Amsterdam.