Difference between revisions of "Creating SVG images in MuseScore"

From CCARH Wiki
Jump to navigation Jump to search
 
Line 12: Line 12:
 
== Editing the SVG images from MuseScore ==
 
== Editing the SVG images from MuseScore ==
  
A problem with the SVG images saved from MuseScore is that they are full-page SVG images.  These need to be cropped in a program such as [https://www.inkscape.org Inkscape].  Here are the steps for doing that in inkscape:
+
A problem with the SVG images saved from MuseScore is that they are full-page SVG images.  These need to be cropped in a program such as [https://www.inkscape.org Inkscape].  Here are the steps for doing that in Inkscape:
  
 
=== Step 1: Select the region to keep ===
 
=== Step 1: Select the region to keep ===

Latest revision as of 22:36, 2 September 2020

Here are instructions for creating SVG images of musical notation in MuseScore.

Creating SVG images in MuseScore

From the File menu in MuseScore, select "Export..." A save dialog window will open up:

Musescore-svg-save.png

Choose "Scalable Vector Graphics (*.svg) as the output file type, and the click on the "Save" button.


Editing the SVG images from MuseScore

A problem with the SVG images saved from MuseScore is that they are full-page SVG images. These need to be cropped in a program such as Inkscape. Here are the steps for doing that in Inkscape:

Step 1: Select the region to keep

Select the part of the SVG image that you want to keep in the image:

Inkscape-select-region.png

Step 2: Menu: Edit → Resize Page to Selection

After selecting the region to keep, go to the menu item Edit → Resize Page to Selection. This will shrink the canvas to the selected area.

Inkscape-resize-image.png

This will cause the canvas to shrink to the selected region:

Inkscape-new-canvas.png

Now you can save the SVG image. The cropped image can be either saved to the original SVG image file, or saved to a new file.

Output image from Inkscape

Here is a demonstration of the use of the final SVG image from Inkscape scaled to various sizes on the wikipage:

1000px wide
Scaled to 1000px wide
800px wide
Scaled to 800px wide
600px wide
Scaled to 600px wide
400px wide
Scaled to 400px wide
200px wide
Scaled to 200px wide

Each of these images are actually PNG image that were created for the specific size from the SVG image; however, they were created automatically by the mediawiki software, and are optimal for the size of image requested. There is probably a way of showing the SVG image directly, but on Wikipedia, SVG images are not allowed to be shown directly in the entries due to security problems that can occur with SVG images (we should not need to worry about that since the CCARH wiki is a close wiki).