[Seaside] SVG design questions

Holger Kleinsorgen kleinsor at smallish.org
Wed Apr 9 09:54:57 UTC 2008


after the recent discussion I've played a bit with creating SVG  on the 
fly (tags, not pixels ;), and immediately stumbled on some design 
questions (surprise). Because I haven't very much Seaside experience, 
I'd be happy for some input/corrections/insights. Aas reward, I would be 
happy to publish the stuff once it's done and desired ;)

The first issue is the canvas. Subclassing the existing canvas seems to 
be a bad idea:
- SVG has an extensive set of tags. Combining this with the extensive 
set of HTML tags will end up in one large bulky mess
- the SVG anchor has the same tag as the HTML anchor, but requires the 
xlink namespace for the href attribute, so it requires a different 
anchor brush
- SVG and HTML cannot be freely mixed, so it's not necessary to combine 
the both in a single class.

Currently, I've subclassed WACanvas, not WARenderCanvas. Rendering 
inlined SVG will require switching the canvas. Currently I see no 
problems here, but maybe I'm wrong.

Another issue is inlining SVG vs. separate SVG documents. Quite often 
I've seen some caveats about inlining SVG (e.g. see 
http://wiki.svg.org/Inline_SVG). On the other hand, I see some disadvantages
- not part of the DOM, contents cannot be accessed by javascript 
functions of the HTML document
- rendering a separate SVG document within the context (session, 
callbacks, continuations) of the Seaside component is a bit tricky

Embedding with <object>
I've tried to implement rendering of external SVG documents that are 
included as <object> in the HTML document, and kind of succeeded:


However, I'm pretty sure the hacks to make this possible will make 
seasoned Seasiders vomit ;) (if someone is interested in the gory 
details, I can write more about this).

I'm just a bit unsure if this effort is really necessary.

Drawing SVG in WAComponents
Due to the decision to use separate Canvas classes, I've introduced 
separate rendering method, #drawWithContext: / #drawContentOn:, which 
correspond to #renderWithContext: / #renderContentOn:.

So a component can render HTML as usual, and somewhere in the rendering 
code call
    "canvas renderExternalSVG: self"
    (or #renderInlinedSVG:)

which will ultimately invoke #drawContentOn:.
#drawContentOn: receives an SVG canvas.

SomeSVGComponent>>renderContentOn: canvas
    canvas renderExternalSVG: self.

SomeSVGComponent>>drawContentOn: svg
    svg rect
       width: 100;
       height: 100;
       fill: 'rgb(220,220,220)';

More information about the seaside mailing list