Saving notation SVGs

This page demonstrates how to save the SVG renderings created by the Humdrum notation plugin, as well as the Humdrum data itself. A function called saveHumdrumSvg() is provided with the plugin that can save Humdrum-generated SVG images on a page to your local hard-disk.

For example, a list of incipits is shown below for several keyboard sonatas by Domenico Scarlatti. Click on the red button to the right of each incipit to save that incipit image to the local computer’s hard disk. The location where that file will be saved is dependent on settings within your browser (typically either in Downloads or the Desktop).

Sonata in C major (Allegro), K. 514, L. 1 Save

Sonata in F minor (Andante), K. 238, L. 27 Save

Sonata in C major (Allegro), K. 502, L. 3 Save

After clicking on a Save button, you should see evidence that the image was downloaded, such as in the following image where the file L027K238.svg has been downloaded:

Opening the saved SVG image into another tab in the web browser:

Here is the source code for the placement of the incipits on the page:


Sonata in C major (Allegro), K. 514, L. 1
<span class="button right" onclick="saveHumdrumSvg('L001K514')">Save</span>
<script>
   displayHumdrum({
      source: "L001K514",
      url: "https://raw.githubusercontent.com/craigsapp/scarlatti-keyboard-sonatas/master/kern/L001K514.krn",
      scale: 30,
      spacingStaff: 12,
      incipit: true
   })
</script>
<script type="text/x-humdrum" id="L001K514"></script>
      

Sonata in F minor (Andante), K. 238, L. 27
<span class="button right" onclick="saveHumdrumSvg('L027K238')">Save</span>
<script>
   displayHumdrum({
      source: "L027K238",
      url: "https://raw.githubusercontent.com/craigsapp/scarlatti-keyboard-sonatas/master/kern/L027K238.krn",
      scale: 30,
      spacingStaff: 12,
      incipit: true
   })
</script>
<script type="text/x-humdrum" id="L027K238"></script>
      

Sonata in C major (Allegro), K. 502, L. 3
<span class="button right" onclick="saveHumdrumSvg('L003K502')">Save</span>
<script>
   displayHumdrum({
      source: "L003K502",
      url: "https://raw.githubusercontent.com/craigsapp/scarlatti-keyboard-sonatas/master/kern/L003K502.krn",
      scale: 30,
      spacingStaff: 12,
      incipit: true
   })
</script>
<script type="text/x-humdrum" id="L003K502"></script>

The spacingStaff: 12 option is used to set a minimum distance between the grand-staff staves so that the width is more consistent across multiple incipits.

Notice that each button has a click callback function, such as:

saveHumdrumSvg('L001K514')

This means to save the SVG image associated with the Humdrum script element having the ID L001K514. You can also given an optional filename; otherwise, the ID will be used as the filename base, saving to a file called L001K514.svg in this case. To save to a file called scarlatti-kirkpatrick-514.svg, the callback would be:

saveHumdrumSvg('L001K514', "scarlatti-kirkpatrick-514.svg")

Here is the button styling code that was used in the example:


<style>

span.button {
   background: #aa0000;
   border-radius: 1rem;
   font-family: Arial;
   color: #fafafa;
   font-size: 1rem;
   padding: 0px 5px 0px 5px;
   text-decoration: none;
   margin-left: 1px;
   margin-right: 1px;
}
span.button.demo {
   font-size: 0.80rem;
   padding: 0px 4px 0px 4px;
}

span.right {
   display: block;
   float: right;
}

span.button:hover:not(.demo) {
   background: #009900;
   text-shadow: 0px 0px 3px #00ff00;
   box-shadow: 0px 0px 14px #008800;
   cursor: pointer;
}

span.button.demo:hover {
   cursor: default;
}

</style>

HTML template for saving

Here is a minimal but complete HTML file that can be used as a template for placing an SVG save button on a page. You can place your Humdrum data into this page and then save the resulting SVG images for other uses, such as figures in papers:

<html>
<head>
<title>My musical scales</title>
<script src="scripts/verovio-toolkit.js"></script>
<script src=""></script>
<script>var vrvToolkit = new verovio.toolkit()</script>
</head>
<body>
<div style="margins:auto; width:600px;">
<h1>My scales</h1>


My first scale:
<span class="button right" onclick="saveHumdrumSvg('c-major-scale')">Save SVG</span>
<script>
   displayHumdrum({
      source: "c-major-scale"
   })
</script>
<script type="text/x-humdrum" id="c-major-scale">
**kern	**fing
*M4/4	*
*k[]	*
*C:	*
4c	1
4d	2
4e	3
4f	1
4g	2
4a	3
4b	4
4cc	5
4b	4
4a	3
4g	2
4f	1
4e	3
4d	2
4c	1
==	==
*-	*-
</script>


My second scale:
<span class="button right" onclick="saveHumdrumSvg('d-major-scale')">Save SVG</span>
<script>
   displayHumdrum({
      source: "c-major-scale",
      target: "d-major-scale",
      filter: "transpose -k d"
   })
</script>
<script type="text/x-humdrum" id="d-major-scale"></script>


<style>
span.button {
   background: #aa0000;
   border-radius: 1rem;
   font-family: Arial;
   color: #fafafa;
   font-size: 1rem;
   padding: 0px 5px 0px 5px;
   text-decoration: none;
   margin-left: 1px;
   margin-right: 1px;
}
span.right {
   display: block;
   float: right;
}
span.button:hover {
   background: #009900;
   text-shadow: 0px 0px 3px #00ff00;
   box-shadow: 0px 0px 14px #008800;
   cursor: pointer;
}
</style>

<div>
</body>
</html>

The first musical example in the template shows how to store the Humdrum data and add a button, the second example shows how to borrow the Humdrum data from the first example, and then filter it with the transpose tool to create music in D major.

Here is a snapshot of the resulting HTML rendering in a browser:

And here is the SVG image that will be saved by clicking on the save button for the second example:

Saving all SVG images

When no arguments are given to the saveHumdrumSvg() function, all SVG images created by the Humdrum notation plugin will be saved. Each image is saved to a separate file based on the ID of the Humdrum script element that contains the source data for the SVG image. For example, click on the following button to save all images on the page to your local hard disk:

Save all incipits

There are also more examples further below that will also be saved when clicking on the above button.

The HTML code for the button is:

<span class="button" onclick="saveHumdrumSvg()">Save all notation</span>

Saving Humdrum data

Similar to saveHumdrumSvg(), another function called saveHumdrumText() will save the Humdrum data that generated an SVG image. Below is an example that now has two buttons to the right of each incipit: one to save the SVG image and the other to save the Humdrum data:

Sonata in F minor (Andante), K. 238, L. 27 Save SVG Save Humdrum

Transposed to G minor: Save SVG Save Humdrum

Transposed to E minor: Save SVG Save Humdrum

Here is the HTML code that was used to generate the above example:


Sonata in F minor (Andante), K. 238, L. 27
<span class="button right" onclick="saveHumdrumSvg('L027K238')">Save SVG</span>
<span class="button right" onclick="saveHumdrumText('L027K238')">Save Humdrum</span>
<script>
   displayHumdrum({
      source: "L027K238-fminor",
      url: "https://raw.githubusercontent.com/craigsapp/scarlatti-keyboard-sonatas/master/kern/L027K238.krn",
      scale: 30,
      spacingStaff: 12,
      incipit: true
   })
</script>
<script type="text/x-humdrum" id="L027K238-fminor"></script>

Transposed to G minor:
<span class="button right" onclick="saveHumdrumSvg('L027K238-gminor')">Save SVG</span>
<span class="button right" onclick="saveHumdrumText('L027K238-gminor')">Save Humdrum</span>
<script>
   displayHumdrum({
      source: "L027K238-gminor",
      url: "https://raw.githubusercontent.com/craigsapp/scarlatti-keyboard-sonatas/master/kern/L027K238.krn",
      scale: 30,
      spacingStaff: 12,
      filter: "transpose -k g",
      incipit: true
   })
</script>
<script type="text/x-humdrum" id="L027K238-gminor"></script>

Transposed to E minor:
<span class="button right" onclick="saveHumdrumSvg('L027K238-eminor')">Save SVG</span>
<span class="button right" onclick="saveHumdrumText('L027K238-eminor')">Save Humdrum</span>
<script>
   displayHumdrum({
      source: "L027K238-eminor",
      url: "https://raw.githubusercontent.com/craigsapp/scarlatti-keyboard-sonatas/master/kern/L027K238.krn",
      scale: 30,
      spacingStaff: 12,
      filter: "transpose -k e",
      incipit: true
   })
</script>
<script type="text/x-humdrum" id="L027K238-eminor"></script>

Notice any filters located in the options used in displayHumdrum() will be applied to the saved Humdrum data files. For example, each of the downloaded Humdrum files will be in a different key. Also notice that the options specify that only an incipit will be displayed, but the entire Humdrum data file was downloaded from Github, and therefore the entire score will be saved for each Humdrum file.

Saving all Humdrum data

Similar to calling saveHumdrumSvg() with no arguments, all Humdrum data will be saved to individual files if saveHumdrumText() is called with no arguments:

Save all Humdrum data

The HTML code for the above button:

<span class="button" onclick="saveHumdrumText()">Save all Humdrum data</span>

Compared to saving SVG images, the behavior of svgHumdrumText() is different. The function will merge all Humdrum data into a single multi-segment file called humdrum.txt. This file can then be split into separate Humdrum files by using the Humdrum Extras humsplit tool.