SVG and HTML download for VHV

17 views

Skip to first unread message

Craig

unread,

Feb 8, 2020, 4:40:28 AM2/8/20

to starstarhug

Hello **HUGers,

I added two new download options for the Verovio Humdrum Viewer editor: SVG download, and webpage download with score embedded inside of the HTML code.

Here is a view of the VHV editor with the SVG saving option highlighted in the File menu:

Screen Shot 2020-02-08 at 01.09.55.png

Selecting this will save the currently viewed music to an SVG file in your Downloads folder (default name data.svg).

Here is a view of the downloaded SVG image opened in the web browser:

Screen Shot 2020-02-08 at 01.10.12.png

The SVG image can then be used on your own webpages, or it can be inserted into Microsoft Word or other word-processing programs that can import SVG images.

By default, the SVG images being saved will be of the entire score, since the default VHV view is "single-page" mode, where you scroll down the page to view the full score. If you want to only generate a single SVG image for a page of the music, you can select View->Multipage view from the top menu, and then adjust the size of the window to the region of music that you want to put in the SVG image. Here is an example:

Screen Shot 2020-02-08 at 01.22.31.png

And the downloaded SVG image viewed in the web browser:

The SVG image contains pitch and rhythm information about the notes within the image, so you can use CSS and Javascript to manipulate the images, even though they are static layouts of the score:

https://doc.verovio.humdrum.org/myvhv/svg_notes/

Another new capability is to download the score embedded within a webpage:

Screen Shot 2020-02-08 at 01.10.18.png

The default name of the downloaded webpage is "data.html". Here is a view of it in a web browser:

Screen Shot 2020-02-08 at 01.10.34.png

The score automatically adjusts to the width of the webpage, and will resize automatically when the browser is resized. In the future, I can add multiple embedded score styles. For now, you can edit the downloaded HTML file and add options from the Humdrum Notation Plugin documentation: https://plugin.humdrum.org/#options

You can also add text or other HTML content to the webpage. For example, if there are additional verses for a song, you can add them underneath the score.