Proposal: Nesting SVG Graphics Elements

Hi, SVG WG-

I have a proposal that may make SVG2 easier to understand and use for 
people already familiar with the HTML+CSS world.

The basic idea is to allow rendering elements to also serve as container 
elements, with child rendering elements also rendered. (This is 
currently not very clearly specified in SVG1.1.)

Currently, to associate 2 rendering elements, you have to use a group, 
like this:

   <g id="g1">
     <rect id="r1" x="5" y="10" width="70" height="40" fill="yellow" 
stroke="red" />
     <text id="t1" x="15" y="35" font-size="12" fill="crimson">Some 
label</text>
   </g>

This can be problematic for positioning the elements relative to one 
other, and to moving the whole unit (yes, you can use a transform, but 
for drag-n-drop, you have to know what to grab and drag).

We could allow authors to do this by simply nesting the text element, 
which would render on top of the rect (using the same Painter's Model), 
and could be positioned relative to the new established coordinate space 
of the parent shape:

   <rect id="r2" x="5" y="10" width="70" height="40" fill="yellow" 
stroke="red">
     <text id="t2" x="50%" y="50%" font-size="12" fill="crimson">Some 
label</text>
   </rect>

This also carries the benefit of being more accessible and semantic. 
After talking to several designers, I think it matches the conceptual 
model of containment and presentation from HTML and CSS (though it is 
distinctly different in some ways, since SVG merges the content and 
presentation modes).

The nesting relationship wouldn't have to be one of "visual containment" 
like in the label example... it can be a simple one-directional 
constraint system, which is not hard to deal with:

   <g id="g3">
     <rect id="r3" x="100" y="10" width="40" height="40"/>
     <circle id="c3" cx="170" cy="30" r="20"/>
   </g>

Would be visually equivalent to:

   <rect id="r4" x="100" y="10" width="40" height="40">
     <circle id="c4" cx="70" cy="20" r="20"/>
   </rect>

And when r4 is moved, c4 keeps the same relationship relative to it.

We would need to sort out many detail, but I think this is doable fairly 
simply, and has a low risk of backwards incompatibility.

This also solves some problems that I see coming up in SVG2 and Connectors.

I'd like discuss this briefly in the telcon, before I develop it further.

Regards-
-Doug

Received on Thursday, 29 November 2012 19:53:00 UTC