RE: First experience with SVG

Hello Dimitrios,

 

I quite appreciated what you had to say here and the fact that you took the
time to say it. I'm glad, as well, that Jeremie responded so thoroughly.

 

The only thing that I might add would be a little trick or two that I
frequently use to put several buttons on a page.

 

Try the code that follows (also visible at
http://cs.sru.edu/~ddailey/svg/buttons.svg ). It resizes text and rects
concurrently so that the text fits the rect, without having to use script or
getBBox()

 

It uses a few tricks:

1.  textLength=number lengthAdjust="spacingAndGlyphs" – these work in IE9,
Opera, Chrome and Safari, but not yet in FF. This confines the text to a
given width (assuming there is enough room, I suppose).

2.  a viewBox is assigned to the <svg> so that the coordinate space is
simplified – I don’t think percents work on several of the text attributes
(perhaps a shortcoming of the spec?)

3.  <use> is employed to allow reusing the hard work.

4.  Text and rect are both inside a <g>. It is the <g> that determines the
coloration, size and placement and handles the events.

 

Cheers

David

 

------------------

 

<svg xmlns="http://www.w3.org/2000/svg" width="100%"

xmlns:xlink="http://www.w3.org/1999/xlink" 

 viewBox="0 0 100 100" preserveAspectRatio="none"

> 

 

 

<g id="B1" transform="scale(.4)" stroke="#620" fill="#a40"
onclick="alert(this.id)">

<g id="reuse">

<desc>id is added for ease of retrieval via script</desc>

<rect x="10" y="15" height="70" width="80" stroke="inherit" fill="inherit"
stroke-width="4"/>

<text id="T" fill="none" stroke-width="4" stroke="inherit"
stroke-opacity="1" fill-opacity=".5"

font-family="serif" font-stretch="ultra-expanded" 

textLength="70" lengthAdjust="spacingAndGlyphs"

font-size="50" x="15" y="65%"  font-weight="bold">    

      Decorative</text>

</g></g>

<g id="B2" transform="translate(40,30) scale(.3)" stroke="#620" fill="#aa0"
onclick="alert(this.id)">

<use xlink:href="#reuse" stroke="inherit"/>

</g>

<g id="B3" transform="translate(0,50) scale(.2)" stroke="#026" fill="white"
onclick="alert(this.id)">

<use xlink:href="#reuse" stroke="inherit"/>

</g>

</svg>

 

 

From: Jeremie Patonnier [mailto:jeremie.patonnier@gmail.com] 
Sent: Wednesday, June 20, 2012 6:27 AM
To: Dimitrios Apostolou
Cc: www-svg@w3.org
Subject: Re: First experience with SVG

 

Hello :)

 

Thnaks for sharing your thought. As a web developer I faced some of the
issue you rised here as well.

2012/6/20 Dimitrios Apostolou <jimis@gmx.net>

I needed to write some text within <rect>. There was absolutely no way to
display any tag within the <rect>. I tried applying various CSS styles on a
<title> I had into the rect but it would never show (what I was expecting
was that it would show anywhere I wanted on the page after setting
"display:block;position:absolute").

 

Yes but this an expected behavior as per the SVG 1.1 spec. <title> and
<desc> are meta-data and are not supposed to be displayed to the user
directly.

 

So I resorted to separate <text> with adjusted coordinates. This was not
ideal since coordinates and text were duplicated for both <rect> and <text>
elements. And text would overflow the <rect> and overwrite the text of the
nearby <rect>. Setting text's width had no effect. To actually restrict the
text within the <rect> I had to use javascript to compare <rect>'s width
with getBBox() for the text size. Pretty complex since <text> is not a child
of <rect>, but a sibling together with various other texts/rects.

 

This is a common mistake for people who come from HTML. SVG is not HTML in
the sens that SVG have no notion of "text flow". Basically, in an SVG
document, everything is absolutely positioned and each element never react
to the position of another element (there is some exception with element
within <text> element but it's really at the edge).

 

I think it would be ideal for <rect> to accept inner <text> nodes, and
display them by default clipped within the <rect> and be able to set
position of the text *relative* to the container.

 

Yes, I agree and there is plan for such a feature in SVG 2 :
http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input#Text_flow_to_
arbitrary_shapes

 

On another note, I had trouble with horizontally stacked bars that looked
like one big bar. No padding/margin style applies to <rect>. Am I supposed
to change the coordinates of thousands rects just to put some gap between
them?

 

Yes, as I said before : no flow in SVG so padding and margin are irrelevant.

 

Something else that would make my life really easier was having the (0,0)
coords at the bottom left corner. I couldn't find any easy way so I put
everything inside a <g transform="translate(0,500) scale(1,-1)">.
Unfortunately translate(0,100%) didn't work for me so I had to make a
compromise by using absolute numbers. But using scale(1,-1) really messed up
text rendering afterwards, so I had to re-transform for every <text>.

 

This is a mater of taste and this will be hard to change because all user
agent implement the coordinate system that way. However it could be possible
to discuss an explicite way to define the direction of the coordinate
système. Feel free to make any detailed suggestion on that matter.

 

Finally I needed a quick way to make the <rect>'s border stand out in front
of adjacent <rect>s when I turned it on with :hover styling. Z-index CSS
style didn't change anything, only the elements' order actually does. So I
figured out I should dynamically reorder all rects and always put as last
the mouseover one. I dumped that solution as too complex, so I never
actually solved this one.

 

Yes, and this z-index madness will be adressed FTW in SVG 2 :
http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input#z-index 

 

Cheers :)

-- 
Jeremie
.............................
Web :  <http://jeremie.patonnier.net/> http://jeremie.patonnier.net
Twitter : @ <http://twitter.com/JeremiePat> JeremiePat