Re: First experience with SVG

Dimitrios Apostolou:
> Hello again, thanks for all the helpful replies. I've used some of your
> tips and have also noted some more for future improvement, especially as
> browsers implement more features!
>
> I've temporarily put my little SVG tool at the following address in case
> you are curious:
>
> http://teras-ics.mooo.com:8003/cgi-bin/callgrind_svg.cgi?r=4.8-20120429

Looks complex - and at least with deactivated script interpretation a lot of
overlapping text ;o)

>
>
> David: you mentioned a good tip of keeping rects/texts inside a <g> so
> that I set coordinates only once. Since <g> doesn't have x,y attributes
> I'd have to use translate(), right? Wouldn't that mean that I wouln't be
> able to use % coords? (I use them all over the place) Would it have other
> implications?

g itself has no specific attributes, but you can set presentation attributes
(those who correspond with properties). Indeed you have to use the attribute
translate to translate a g ...
In a full profile of SVG you can use elements like svg or symbol, if they fit
to your application, those provide their own viewBox, that can be positioned
with attributes like x, y and the size can be restricted with width and 
height. If you set viewBox and width and height, the content of the
viewBox will be scaled to fit into the box.
But maybe not very nice to use hundreds of svg elements in one
SVG document ;o)

>
> Also textLength and lengthAdjust are fantastic, but if I understand they
> are not meant to clip text, but to squeeze it.

For clipping you have clipPath etc  or mask
(the clip property is obfuscated in CSS2.1 and
does not work properly in many viewers).

>
> Olaf: Textarea is very nice, I'll certainly use it when supported! But I'd
> be happy with even simpler solution, since wrapping is an overkill for my
> needs. Ideally I'd want <text> to accepth the "width" attribute, wouldn't
> that be really simple both in understanding and in implementing? Or maybe
> textarea needs a new attribute: onlimit=wrap/clip?

No, with text you can position every glyph or groups of glyphs individually.
This is a graphical element, quite different from any text container in 
(X)HTML. If you know the font-size and you use a monospace font, it
might be easy to estimate the size of a text, if you do not position every 
glyph manually, more precisely if you do, of course.
With textPath you may get some clipping, if the text is longer than the path -
does this help (at least, this should work already without scripting ;o)?

>
> Right now I restrict the text you see inside the rects by running
> getBBox() on every text, see if it fits, cut the string in half, see if it
> fits, and clear it if not. Reducing the string length char-by-char until
> it fits proved *way* too slow. For simplicity I had this to execute
> "onload" for every rect but didn't work, so I changed it to "onload" for
> the whole <svg>. I guess this is client-dependant.
>
> Maybe there is a transformation for <g> that sets width and height for
> children elements?

No, it just transforms, g has no viewBox and nothing is clipped or
restricted, it only groups content together, see above, symbol
or svg have a different behaviour (the element a has
the same behaviour as g concering this).

>
> That reminds me that I was trying to set the value of some attributes in
> <g>, for example rx,x,y,width,height,onmouseover so that all children
> elements inherit them. 

Currently, this means SVG 1.1.2 and SVG tiny 1.2 and earlier versions,
there are no properties rx,x,y,width,height applicable for g.
rx,ry,x,y,width,height are for example attributes of the element rect, 
they determine, what kind of rect is used, no decorative aspects, therefore
these are currently attributes and no properties or presentation attributes.
This may change for some attributes in future versions.


> This is not doable in some other way, right? 
> Especially for "rx", it seemed to me strange that I had to repeat it in
> every element, since I couldn't globally set it either with XML or CSS.

If you have the same rect for example, just different decoration, you
can define it once in a defs element and reference it with the element
use with different presentation attributes and positioning.
But if you change, what kind of rect you need (beyond transformations),
you may have to specify a new rect.
Some more tricky things are available, if you use XSLT instead of CSS
of course ;o)


>
> Finally, Olaf, you mention that I should use a viewbox, which indeed is
> much more friendly for all the transformations. If I do how can I set the
> SVG to use the 100% of the browser window?

Set no width and height at all (or set it to a percentage value, what is
ok for width and height of the root svg even for SVG tiny). 
The attribute preserveAspectRatio determines what to do if the 
aspect ratio of the viewBox does not fit to that of the viewport. 
With 'none' you get it scaled to the viewport, with other values 
you can decide either to slice something
of your image or how to align the smaller scaled viewBox into the
viewport.


Olaf

Received on Saturday, 30 June 2012 15:13:25 UTC