SVG debugging requirements and suggestions

This group has been quite quiet recently, so I thought I’d do a post to see if everyone is awake ;)

Opera Dragonfly [0] is closing in on its first final release (hopefully Q1 of 2011). The current roadmap for DFL 1 can be found here [1] (more or less up to date, except the in progress state). 

With all this in healthy progress, I’m building the initial roadmap for the next version of DFL. SVG is important to Opera, especially with it being huge in markets where Opera is strong, such as the connected TV space (most or many EPGs and on screen menus are built with SVG middleware, such as Dreampark’s Dreamgallery for example [2]). Hopefully it will get big on the desktop eventually too.

I’d like to know your thoughts on what you think is missing in the SVG debugging workflow and what we can add to DFL to make developing SVG easier. 

Performance debugging is one area we will look into as this is especially critical to our TV customers, as TVs are often much less powerful than a phone, but have to push many more pixels (not that SVG uses pixels but anyway…).

Currently DFL 1 doesn’t have too much custom support or adaptions for SVG, but what it has so far is the following:

* The DOM inspector can view and edit the SVG DOM. Features such as inspect element et al also work on SVG. External SVGs in a document can be selected with the document drop down selector (in the DOM toolbar).
* You can of course debug JS attached to SVG as you would for JS used for HTML
* Ditto with CSS
* Colours defined with CSS properties have a colour picker swatch, that allows you to choose the colour you’d wish to use (built using SVG)
* Auto-complete has recently been added (not yet released) for SVG specific CSS properties
* Links to the SVG specs for DOM interfaces and CSS properties have also been added but not yet released (right click a CSS property in the style inspector for example)

The last two will appear on the experimental branch shortly [3]. You can try them out for regular CSS properties in the current build. (make sure you use Opera 11 beta).

One thing we are planning potentially for the current version is to map SVG presentational attributes to CSS properties, as defined by the SVG spec, so that all the features of the CSS inspector (spec links, editing with auto-complete, colour picker, et al) can be supported.

Another thing we are adding is a cubic bezier curve editor. This is currently designed for the CSS transition-timing-fucntion property, to make it easier for designers to specify a timing function visually. This can also be mapped to SMIL, but of course it is more complex there as there can be multiple points instead of being limited to just two in CSS, so that will take more work to get that working (plus it is defined via XML so we’d need a way to expose it to the DOM view, as these helper windows only apply after CSS properties currently. An initial test for the transition-timing-function can be found here [4] if you are interested. This is also built using SVG of course (we like to eat our own dog food ;)). This will end up being including in one of the floating windows, like the current colour picker. Currently there is no clamping of values. the spec mentions to clamp at 0,0 and 1,1, but Opera and Gecko both allow larger and smaller values, which cause overshooting (try this in the preview), which is a quite cool effect, so maybe it would be nice if it was allowed.

Anyway, it would be great to hear your ideas. There is probably a lot we could do around the metrics panel, as currently it shows the CSS box model, which doesn’t really make sense for SVG. I guess it should show the bounding box and some other info (related to view boxes and such)?

Of course being open source, it is easy to clone the repository and make experiments if you are so inclined. The experimental branch (the redesign we are working on to get DFL to 1.0) can be found here [5] and the UI Elements we are working on to be included in DFL can be found here [6]

[0] http://www.opera.com/dragonfly/
[1] http://people.opera.com/dstorey/dfl/dfl1-roadmap-public.html
[2] http://www.dreampark.com/
[3] http://labs.opera.com/news/2010/09/29/
[4] http://scope.bitbucket.org/ui-elements/bezier-control/index.xml
[5] http://bitbucket.org/scope/dragonfly-stp-1-experimental
[6] http://bitbucket.org/scope/scope.bitbucket.org





-- 
David Storey

Chief Web Opener / Product Manager, Opera Dragonfly
W3C WG:  Mobile Web Best Practices / SVG Interest Group 

Opera Software ASA, Oslo, Norway
Mobile: +47 94 22 02 32 / E-Mail/XMPP: dstorey@opera.com / Twitter: dstorey

Received on Monday, 29 November 2010 12:38:27 UTC