Re: SVG 2 Features and Approach

Errata and addenum,

Actually Doug, Media Queries is exactly what I was referring to. So there  
is a method which is a bit cumbersome if you compare it to what I propose.  
Making it possible to add a min and max value to the default would make it  
a lot easier to author Media Queries. However, adding max-width and  
whatever, would be fine to me as long as it works without reverting to CSS  
;-)

For the time being I'm quite chuffed with the Media Queries, something I'd  
never though of and hadn't come across myself. I can see that it may be  
more powerful to do it in CSS, but I think it would be nice to have a  
direct interface to that in SVG as well, so people can get to know it is  
even possible without knowing CSS that well. It sometimes seems to me CSS  
has taken the lead rather than being additional feature patching to  
content.

Proposal 1: minimum and maximum sizes

The possibility exist through CSS media queries. That means it is already  
implemented process wise. However, it would be nice to have it in SVG  
directly as there obviously is a use case for.
>>>

>>> My proposal is to optionally add a minimum and maximum size to objects.
>>> For example <g width="100%, 600px, 1200px" /> and <Text
>>> font-size="1.4em, 14px, 24px"/>  That would allow for dynamic layouts
>>> with an insurance of readability. Especially in combination with the  
>>> new
>>> text flow mechanism, it would allow for very powerful and flexible text
>>> layout without the problems that HTML has (natively). Nice thing about  
>>> this method
>>> is that it doesn't add much data, as you could just omit values if you
>>> don't need them, the method is used in other parts of SVG and it's
>>> readable.
>>>
>>> Use case
>>> Text flows with minimum constraints, dynamic layouts with objects
>>> scaling to a minimum acceptable view size. Great for web and page
>>> layouts with unlimited x or y depth.
>>
>> I think what you're asking for can be accomplished with using CSS Media  
>> Queries. Here's an example where I alter the image from the same SVG  
>> file to add or remove detail based on where it's used (down-arrow to  
>> see the bullet points), completely declaratively:
>>
>> http://www.w3.org/2010/Talks/06-schepers-atmedia/media-queries.html
>>
>> Let me know if that's the sort of thing you have in mind.



Proposal 2: Special container Object or alignment rule for objects.

Using Doug's proposal to have referring object by ID is way more elegant  
and clear code wise. My additional input is to enable it to link objects  
in context. So graphical elements by offset, angle, rotation and text  
elements by flow. The latter could be added to a reference group Object to  
inherit offset, angle and rotation (or matrix for that matter) or have  
it's own angle and rotation.

>>>
>>> An object container similar to DIV would be extremely practical. The
>>> nasty thing of DIV's is that everything in it is constrained to it's
>>> borders and no direct interaction to other object outside it are
>>> allowed. If you want your drop down menu to show outside of a DIV  
>>> header
>>> for instance, you have to create a new DIV somewhere and then you can
>>> fill that with some content.
>>>
>>> SVG doesn't have the problem, but it would be very useful to have some
>>> container object, that can align to other objects with a specified ID  
>>> at
>>> a certain offset.
>>
>> If I understand your proposal correctly, I recently proposed a  
>> different mechanism that has some of the same outcomes. I suggested  
>> that we allow any graphics element to be the parent of other graphics  
>> element, and that the positioning of the child would depend upon the  
>> parent.
>>
>> For example:
>> <rect id="rect-1" x="10" y="50" width="100" height="30">
>>   <rect id="rect-2" x="10" y="30" width="100" height="30"/>
>>   <rect id="rect-3" x="10" y="60" width="100" height="30"/>
>> </rect>
>>
>> Rect-2 and rect-3 would both have an effective x value of 20 (rect-1's  
>> 10 + their own 10), and an effective y value of 80 and 110,  
>> respectively. This would change accordingly if rect-1 were moved  
>> around. Thus, they would be positioned like a submenu of a parent menu  
>> item.
>>
>> This is a very simple relative layout mechanism (specifically, a  
>> one-way constraint layout, computationally very easy).
>>
>> The other stuff you've mentioned harkens more to more complex layout  
>> options for SVG, which I think many people would like to see, if it can  
>> be done performantly.
>>
>> Regards-
>> -Doug
>

> Using the example of Doug here, that would render the same way. It will  
> have to be made clear to people they cannot use the "-" etc. anymore in  
> ID names. If this method can be used with parent-child etc. it would  
> almost completely settle the issues I want to address with a container.  
> But maybe it would be easier to use the "-" as a connector char to  
> relating objects. That would allow for more flexible coding in case you  
> want to add an option in a menu or something like that. It would  
> certainly allow for things like diagrams made easy, if there would be  
> added an angle and rotate to this. You could use the angle to make  
> things right align or left align to the parent object. This would be a  
> great way to create relations between objects and keep them logically  
> ordered in the code.
>
> i.e.
> <rect id="rect1" x="100" y="30" width="100" height="30"/>
> <rect id="rect1-rect2" x="100" width="100" height="30" angle="+15"  
> rotate="auto"/>
> <rect id="rect1-rect3" x="100" width="100" height="30" angle="+15"  
> rotate="auto"/>
> <rect id="rect1-rect2-note" x="50" width="100" height="30" />
>
> I was wondering if a similar relation could be made with text, so that  
> you would be able to create text flowing from one column into the other  
> dynamically.
>
> <text id="text1" x="100" y="30" width="100" height="30">
> Some text here
> </text>
>
> // to clear any styling of the quote here tell the style to inherit of  
> the object related to.
> // would be a really nice way to clear up the readability of inheritance  
> of attributes as well.
>
> <text id="text1-text2" x="100" width="100" height="30" angle="+15"  
> rotate="auto">
> <use xlink:href="about.svg#quote" style="text1-inherit"/>
> </text>
>
> <text id="text2-text3" x="100" width="100" height="30" angle="+15"  
> rotate="auto">
> More text and a bunch of TSPAN elements
> </text>
>
> // this text would be added as next in Z-order AFTER the content of  
> text2-text3, unless there is some
> // work on forcing z-orders I read about in the notes. To mind springs  
> something like z="text2+1" to add
> // if you'd like to add the note after the first child of text2
>
> <text id="text2-note" x="50" width="100" height="30">
> </text>
>
> The best part of it being that it would be easy to separate graphical  
> elements and text in a single document.


Okay,.. no further rant ;-)

Jelle Mulder

Received on Tuesday, 8 January 2013 06:01:33 UTC