making SVG output ready for web GUIs

[Gordon Rouse]

Being interested in writing music and web-development, 
I am interested in making an online 
music editing system that would maybe be half as good as Sibelius!

The idea would be to use the lilypond with SVG backend. 
I have had a look at the SVG output from lilypond and 
I am impressed with the work. 
To make the SVG able to be manipulated with a 
javascript library like jQuery I would need a manner to identify the 
elements in the SVG to 
add functionality to clicking and dragging the elements. 
While I could work with the curent 
output, it would be better 
if the elements could have some identifiers in them - like classes 
and ids, that would allow easier manipulation.

Here is an example of the current note element:

<path 
transform="translate(35.6618, 7.0119) scale(0.0040, -0.0040)" 
d="M220 138c56 0 109 -29 
109 -91c0 -72 -56 -121 -103 
-149c-36 -21 -76 -36 -117 
-36c-56 0 -109 29 -109 91c0 72 56 121 
103 149c36 21 76 36 117 36z" 
fill="currentColor"/>

I might be able to figure out it is a note by the numbers, 
and its position might tell me 
something about what note it is.

However, if we added some extra information 
to the element like a class tag, we could have 
some useful information that would make 
the SVG output easily manipulated by javascript.

<path 
id="el-X" 
class="note g4 bar-32 beat-2.5 
{group-X} {triplet|duplet|etc} {grouplength-2} 
{groupindex-2}" 
transform="translate(35.6618, 7.0119) 
scale(0.0040, -0.0040)" 
d="M220 138c56 
0 109 -29 109 -91c0 -72 -56 -121 -103 
-149c-36 -21 -76 -36 -117 -36c-56 0 -109 29 -109 91c0 
72 56 121 103 149c36 21 76 36 117 36z" 
fill="currentColor"/>

The element should have a unique id which allows it's identification

Then I envisage that the first class item tells me it is a note, rest stem 
etc, the second 
tells what note (not exactly as notated in ly file as these characters need 
to be www3 
compliant), the third item gives me bar number, fourth the beat position, 
the fifth links it 
to other elements  - ie stem and quaver groupings, with the X being a unique 
generated index 
for subsequent groups. The sixth item would tell me if it was part of 
special triplet or 
duplet etc over grouplength parameter and is the nth item as given in 
groupindex.

The layout of such information needs to be easy for jQuery or other 
javascript libraries to 
find related items. In the above example, 
if I was trying to find all elements in bar 32, I 
could use jQuery notation $('.bar-32'). 
Hence why I want the separation of bits of 
information into useful groupings. Naturally, 
once I found an item, I can lookup its other 
properties.

These are just ideas. 
Obviously this extra information adds more size to the SVG output, so 
it would not be part of any default SVG output.
Maybe if someone could point out the files where 
the SVG syntax is generated I could have a 
look at implementing this myself.

Regards

Gordon Rouse
Web-Programmer/Developer