Score Example 8001-01

SVG Color


    The following examples illustrate how to embed SVG code into the EPS file used as an intermediate format for generating SVG images. The SVG code which will pass through the EPS data is stored in SCORE data as _99 font text items. The _99 font text is a special escape mechanism which allows direct insertion of user content into EPS files generated by SCORE. This mechanism is utilized to embed PostScript comments starting with %svg% which will then be inserted into the final SVG image.

    The example coloring methods on this page can also be done in WinScore using color codes in parameters 25-27 of all objects, but these parameters are not recognized by DOS versions of SCORE. SCORE 5 (last DOS version of SCORE) uses P31 and P32 for color, except for text colors which use P14-P16.

    An advantage of the embedded SVG coloring method is its independence from SCORE program versions, and it can be expanded into interactive highlighting of SVG elements. In addition, separate stroke and fill colors demonstrated in the following examples are not possible within SCORE and SCORE data.

    To highlight a note in red for example, insert this two-line text object before a note (or set of notes, or any other objects to color):

        t 1 1
        _99%svg%<g color="red" stroke="red">
    The color attribute controls the fill color of all objects within the grouping, while the stroke attribute controls the color of the borders. To close a grouping started with the <g> element, place the following text after the colored note(s) to close the grouping element:
        t 1 1
        _99%svg%<\g>

    Notice that the forward-slash (/) is written in SCORE data as a back-slash (\), since SCORE converts back-slashes into forward-slashes when printing text in the EPS output. After converting to an EPS file, the middle note of the chord in the following example will have comments displayed before and after it:

      %svg%<g color="red" stroke="red">
        2250 -24000  1.000 P00
      %svg%</g>

    Any comments starting with %svg% will be inserted directly into the final SVG image created by the seps2svg (Score EPS to SVG) ruby script written by Thomas Weber (current version). Here is the final conversion to SVG for the highlighted note in the following example:

     <g color="red" stroke="red">
        <use transform="translate(2250,-24000)" xlink:href="#P00"/>
     </g>
     
     

    The SVG_SCALE parameter in the comment at the top of the data is used to specify a scaling factor to apply to the SVG image after it is created from the EPS file. If such a comment is found in the input data, then it will override the scale option settings on the Score Generator page.

    Case-insensitive text commands can substitute for some parameter values, such as STAFF for "8" or "TREBLE" for "3 . . . 0". The lower case letters in the above example are optional, so "STA" and "TREB" are equivalent commands.

    If no stroke color is given, then the default color of black will be used (or whatever color the stroke attribute in the main <svg> element is set to):

     

    The fill and outline colors can be controlled independently with the color and stroke attributes. The value of each attribute can be any predefined SVG color label or a hexadecimal color code such as #ff0000 for red. Here is an example which highlights the notehead green and draws an orange border around the notehead:

     
    The order of the objects in the SCORE data will determine the printing order in the EPS/SVG files. This will determine the overlapping of colored and non-colored elements. Here is an example which prints the chord stem (attached to the C4 note) after the colored note:
     

    Here is another ordering example where the colored note is printed behind the staff lines:

     

    Related to the previous example, colored shapes such as rectangles, circles, or ellipses can be placed in the background or foreground to highlight music:

     
     
     

    Opacity of objects can be adjusted so that notational elements which are obscured can be seen behind the obscuring object. Compare the following example to the previous one. The previous example contains a rectangle which is placed on top of the staff lines. The next example also places the rectangle above the stafflines, but it has an opacity of 15%:

     
     

    The following example shows how to utilize the stroke-width attribute to highlight items. In this example, the EPS bounding box does not accurately describe the visual region of the image, so an extra 2 point border is added around the viewBox to avoid clipping of the extra-thick stroke width. The attribute setting stroke-linecap="round" is used to extend the halo around the upper part of the stem for the chord.







    To highlight the notehead of the note in a chord which has a stem attached to it, but keeping the stem black, overlay a colored notehead without a stem on top of the black stemmed version:

     
     

    Alternatively, the stemmed note could have an invisible notehead with the overlaid note having no stem. This will prevent anti-aliasing of the hidden black notehead from being visible as a halo around the highlighted note. Also set P16=-3 for the stem note to minimize the width of the hidden ledger line.

     

    #defines

    An incompatible SCORE construction which the Score Generator is aware of is #define instructions interleaved in the PMX data. A #define works in a similar but not completely equivalent manner to the #define of a C preprocessor. In this case only simple substitutions can occur (no parameter controls or multiple lines). The #define consists of three components:

    1. The characters #define at the start of a line (ignoring whitespace).
    2. An identifier consisting of the alphanumeric characters and underline: [A-Za-z0-9_]
    3. At least one space, then a list of arbitrary characters to used as a substitution for the identifier.

    A basic example found in the following example is:

       #define WIDTH 50
    This will cause the word WIDTH occurring after the define to be replaced by 50 on all lines of text after the define statement. The identifier is case-sensitive, so WIDTH, width, and Width are not interchangeable for the same define.

    The replacement string can contain embedded newlines which are represented by \n. If the next character after \n is a letter or number, use \{n} to specify the newline character. Here is an example of a define which contains a newline and is used in the example below:

       #define SVG t 1 1\n_99%svg%
    This will cause the word SVG in any text after the #define to expand into:
          t 1 1
          _99%svg%

    The #define can be used again to redefine the same identifier. In the following example, HPOS is initial defined to be 15, and then later it changes to 25 and 35



    Accidental/Articulation coloring

    Normally accidentals and articulations will be given the same color as a note. Here is a note with the default coloring of notehead, stems, and accidentals:



    The accidental can be colored independently from the color of the notehead by displaying the note without an accidental, and the accidental on a note with no stem or notehead. Note that the order of the main notehead and the stemless invisible notehead with the accidental is not important. Either shape can be drawn first (although you could also keep the accidental on the primary notehead and overwrite the accidental using the invisible notehead).



    Setting independent colors for articulations works in the same manner as for accidentals. Draw the main note without an articulation, and the articulation notehead/stem as invisible:



    Beams

    Coloring of beams behaves similar to notes.



    Beam levels can be colored separately by overlaying multiple beams.



    Beam stroke widths are controlled separately from all other graphical object stroke sizes in SCORE output. Typically the stroke size is set to zero to generate a wide gap between beams. This default can be overridden with the stroke-width SVG parameter. In the online SCORE Generator, the beams have no stroke, so you cannot independently control fill and stroke colors for beams.

    Gradient fills

    Gradients can be given used in fill attributes to paths. Here is an example SVG image which uses a gradient to color a note. This example is not possible to implement without hand coding of the SVG file to replace the fill="currentColor" with fill="url(#grad)" in a copy of the notehead shape definition.







    Filtering effects

    SVG Filters can be applied in a manner similar to gradients. Here is an example which applies filters to generate a 3-D effect:



    A square stroke-linecap was applied to the staff lines and barlines so that they create a corner rather than an indentation when they are joined at right angles to each other.

    Note that the filter was applied to two objects (clef and note), and the note had an additional alteration so that it was colored red.

    A drop-shadow:



    This example required a dummy treble clef within the filter region (opacity set to 0% so that it is invisible but present in the output SVG file). Otherwise, the stem and edges of the note were being clipped.

    Here is an example which adds a jagged box around a set of notes:



     
     

    Bibliography

    http://srufaculty.sru.edu/david.dailey/cs427/StateOfArt-Dailey.html
    An SVG Primer for Today's Browsers (2009)
    http://www.w3schools.com/svg/default.asp
    SVG Tutorial.
    http://oreilly.com/catalog/svgess/chapter/ch03.html
    SVG Essentials, Chapter 3 (Basic Shapes) by J. David Eisenberg (Feb. 2002). Published by O'Reily, ISBN 0-596-00223-8.
    http://www.w3.org/TR/SVG11
    SVG 1.1 specification (2nd edition 16 August 2011)
    http://srufaculty.sru.edu/david.dailey/svg
    SVG animation with JavaScript and SMIL