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:
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:
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:
The characters #define at the start of a line (ignoring
whitespace).
An identifier consisting of the alphanumeric characters and
underline: [A-Za-z0-9_]
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:
