W3C home > Mailing lists > Public > www-svg@w3.org > July 2009

Re: Canvas and Interactivity

From: Jeff Schiller <codedread@gmail.com>
Date: Tue, 14 Jul 2009 22:33:38 -0500
Message-ID: <da131fde0907142033h3e7b54eeh671cc4d1aae4f8f6@mail.gmail.com>
To: robert@ocallahan.org
Cc: anthony.grasso@cisra.canon.com.au, www-svg <www-svg@w3.org>
On Tue, Jul 14, 2009 at 9:50 PM, Robert O'Callahan<robert@ocallahan.org> wrote:
> On Tue, Jul 14, 2009 at 12:27 PM, Anthony Grasso
> <anthony.grasso@cisra.canon.com.au> wrote:
> Many of the issues are around the SVG DOM APIs. For example, consider adding
> a circle to the page:
> var c = document.createElementNS(... SVG namespace that I can never remember
> ..., "circle");

C'mon, it's the year 2000 - not that hard! ;)  http://www.w3.org/2000/svg

> c.cx.baseVal.value = 20;
> c.cy.baseVal.value = 20;
> c.r.baseVal.value = 20;
> c.style.fill = "lime";
> svgContainer.appendChild(c);

I agree that the DOM is verbose.

Anyway, like anything this can be ameliorated by a little JS.  For instance:

   var parseSvgNode = function(xmlstr) {
      return document.importNode(
         new DOMParser().parseFromString('<svg
xmlns="http://www.w3.org/2000/svg">' +
            xmlstr + '</svg>', 'text/xml').documentElement.firstChild, true);
   svgroot.appendChild(parseSvgNode('<circle cx="50" cy="50" r="20"

> Some of the DOM issues are generic DOM issues, but some of them are
> SVG-specific. In particular setting the three circle attributes via the SVG
> API requires 6 getters and 3 setters --- 9 round trips from JS to browser
> and back. Even worse, it requires creation of 6 temporary objects!
> (Actually, in every implementation I know of, it creates at least 12
> temporary objects, a "native object" and some kind of JS wrappper.)

I don't suppose you're particularly happy with my hacky little
parseSvgNode() function then :)  Parsing strings to XML, then
importing them into the DOM - whoo!

Similar tricks exist with sending JSON to a function that iterates
over the properties and does a setAttribute:

	var createSvgFromJson = function(data) {
		var node = svgdoc.createElementNS('http://www.w3.org/2000/svg', data.element);
		assignAttributes(shape, data.attr);
		for (i in data.attr) {
			node.setAttributeNS(null, i, data.attr[i]);
		return node;

	svgroot.appendChild( createSvgFromJson( {"element": "circle",
						"attr": {"cx": 50,"cy": 50,"r": 20,"fill": "#00f"}}) );

I'd be curious which is better performing.  Both are definitely
examples of hacks to get around the verbosity of the SVG DOM.

> I think it would have been a good idea to forget about units in SVG
> coordinates, just have user space. Then since access to animated values is
> rare, move it to a separate interface (e.g. c.animated.cx). Then you could
> write
> c.cx = 20;
> c.cy = 20;
> c.r = 20;
> Much better... Oh well.

This seems like a very good suggestion for decreasing the verbosity of
the SVG DOM.  Actually I'm sure this type of feedback (# of getters,
setters, etc) would have been very valuable when the SVG 1.1 DOM was
first conceived.

Since I have not heard anything about WebKit and Mozilla implementing
the SVGT 1.2 uDOM, will there be an activity for SVG 2.0 to simplify
the SVG DOM?

Received on Wednesday, 15 July 2009 03:34:18 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:47:18 UTC