[Seaside] SVG design questions
Holger Kleinsorgen
kleinsor at smallish.org
Wed Apr 9 09:54:57 UTC 2008
Hello,
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 ;)
Canvas
------
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.
Inlining
--------
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:
http://www.smallish.org:7777/seaside/SVG/example
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