ScoreSVG: A Web-Based Music Editor

for Creating Scores in SVG


Geoffrey Bays, Ying Zhu
Department of Computer Science
Georgia State University
P.O. Box 3994
Atlanta, Georgia 30302-3994


ScoreSVG allows the user to create web-viewable music scores in a non-proprietary format, the W3C's SVG standard. The Java-based frontend allows the user to create and edit scores interactively and then convert them to a music XML format, guidoXML. The backend uses an XSL transform to output an SVG file. Large, complex, proprietary music editors such as Sibelius and Finale require the purchase of expensive software and output to formats like PDF, PS, and TeX that are not editable and require further specialized software to display. Other notable music editors include LilyPond, an open source music editor producing scores in graphical formats only. The output is in the proprietary LilyPond (.ly) files which can be exported to the same non-editable formats that Sibelius and Finale use. Music scores in SVG, in contrast, are readily displayed in Internet Explorer equipped with a plugin from Adobe, and will hopefully be viewable in Mozilla in the near future as their development team works to add native SVG support. ScoreSVG enables the user to produce small scores that will be especially useful for music theory examples and interactive test questions.

A music XML format captures the semantic meaning of a music score in a way that a graphical representation cannot, and allows for interchange between proprietary formats. MusicXML from Recordare is such a format that has gained some currency as a format exchange medium for Sibelius and Finale. ABC, 4XML and SDML are just some of the other music XML specifications that can be found: there seems to be not standard format emerging. At the center of ScoreSVG lies a subset of the GuidoXML format, an XML format based upon the Guido music notation system, a very compact textual representation for music developed at the Technical University of Darmstadt (TUD). This music XML format was selected because it is compact and human-readable, unlike MusicXML, which is precise but enormously verbose. The computational musicology research group at the Computer Science department at TUD has created an applet and other software that converts Guido notation into graphical music scores. Even though Guido notation is not difficult to learn, the use of these converters will probably be limited. ScoreSVG is readily usable without knowledge of any specialized notation.

Other research efforts such as MusicML2SVG (SVGOpen, 2002) tackle the problem of converting MusicXML to SVG, but encounter considerable difficulties in calculating the position of musical elements using XSLT. ScoreSVG uses a backend XSL transform implemented with Saxon 8.0, but the project's software architecture includes a Java-based front end that allows the user to create a WYSIWYG score with Java 2D graphics before the Java objects are written to a file in GuidoXML format. This front end process allows for the addition of x and y coordinates for all musical elements, making the backend XSL transform much less difficult to implement. Graphical difficulties mentioned in MusicML2SVG are overcome by using software (Adobe Illustrator) that converts bit-mapped musical graphics into SVG.

The three-part software architecture of ScoreSVG has the WYSIWYG Java score editor on the front end, GuidoXML in the middle, and the XSL transform on the backend to output an SVG file. Score SVG is a web-based application using the new Java Web Start technology, which allows a Java application to read and write files on a client system. In addition, ScoreSVG saves the Java 2D objects to a file, which allows music scores to be input through a file of Java objects. Thus musical examples or question can be input into ScoreSVG, edited and changed and then saved in both Java and SVG formats. This capability makes ScoreSVG an excellent choice for music theory problems such as counterpoint and four-part chorales. With the usage of the guido2xml software, the XSL transform in ScoreSVG could be used to convert Guido notation into SVG as well. Future features could include adding javascript to the SVG output to make a score editable in a browser, and adding an XSL transform that outputs a .wav file to make the score audible.

Keywords: SVG, Music Notation, Music Editing, Java 2D Graphics, XSLT, Guido, XML

Valid XHTML 1.1!