A page of sheet music is divided into multiple groups (<g>).
This makes it easy to move parts around according to the music or your
own taste, and makes it easier to navigate the source.
Below is a code sample.
The pages are created to be printed at 300dpi for U.S. letter size paper;
so are 2550px by 3300px initially, with 120px margins [.4 inch] on the
pages I make. This, as with all else, can be changed to suite you're needs.
Here is a skeleton of the source:
<g id="body" transform="translate(120,780) scale(1)">
<g><desc>............................. staff 1-1 </desc>
<use xlink:href="#staff"/><use xlink:href="#G-clf"/>
<g transform="translate(96,0)"><desc> msr 1-1 </desc>
<!-- ................................ beat 1 -->
<!-- ................................ beat 2 -->
</g>
<g transform="translate(1140,0)"><desc> msr 2-1 </desc>
<use xlink:href="#bar"/>
<!-- ................................ beat 1 -->
<!-- ................................ beat 2 -->
</g>
<use x="2304" y="0" xlink:href="#bar"/><!-- end of staff -->
</g>
</g><!-- end of body -->
Re-scaling the body or root svg is convenient for viewing in a web browser.
I use
Batik
most of the time; a java-based svg toolkit (more on that later).
The staves are marked by a <desc>... staff 1-1. That would be
staff one of page one, and so on. The measures are marked also by a <desc>
msr 1-1. That would be measure one of staff one, and so on. The beats of a
measure are marked by a comment, and the music content of the measures
goes below their corresponding beat:
<g transform="translate(96,0)"><desc> msr 1-1 </desc>
<!-- ................................ beat 1 -->
<use x="50" y="24" xlink:href="#solnu"/>
<use x="150" y="60" xlink:href="#solnu"/>
<use x="250" y="108" xlink:href="#solnu"/>
<use x="350" y="60" xlink:href="#solnu"/>
<!-- ................................ beat 2 -->
<use x="450" y="108" xlink:href="#solnu"/>
<use x="550" y="144" xlink:href="#solnu"/>
<use x="650" y="108" xlink:href="#solnu"/>
<use x="750" y="24" xlink:href="#solnu"/>
</g>
Most glyphs are referenced from the library with a <use.../>.
In order to work you must have the attributes 'xml:base' and 'xmlns:xlink' in
the root svg:
<svg version="1.1" width="2550" height="3300" viewBox="0,0,2550,3300"
xmlns="http://www.w3.org/2000/svg" xml:base="music-notation.svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
The index for the single staff library is
munolib2_index.htm
, and for the system library
munolibS_index.htm
The system layout is here: Systems
The lines of a staff are 3px wide. The center pixel is the 'y' coordinate.
The top line is y=0. The spacing from line to line or space to space is 24px.
As many glyphs as possible that might accompany a note have been drawn
to use the same coordinates as the note, i.e.: an accidental that precedes a note
would use the same x,y as the note. For others that could be placed in a number
of locations, the author will have to choose. The index gives guidelines.
I will describe the use of 'transform="translate, skew, rotate, scale, matrix"'
later on.