Home

Introduction


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.


Next   Previous