Difference between revisions of "Creating SVG images in MuseScore"

From CCARH Wiki
Jump to navigation Jump to search
 
(5 intermediate revisions by the same user not shown)
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 ===
Line 24: Line 24:
 
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.
 
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.
  
[[File:inkscape-resize-image.png|500px|center]]
+
[[File:inkscape-resize-image.png|300px|center]]
 +
 
 +
This will cause the canvas to shrink to the selected region:
 +
 
 +
[[File:inkscape-new-canvas.png|600px|center]]
 +
 
 +
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 ==
 
== Output image from Inkscape ==
  
Here is the final output image from Inkscape scaled to various sizes:
+
Here is a demonstration of the use of the final SVG image from Inkscape scaled to various sizes on the wikipage:
  
 
[[File:xyz.svg|1000px|thumb|center|alt=1000px wide|Scaled to 1000px wide]]
 
[[File:xyz.svg|1000px|thumb|center|alt=1000px wide|Scaled to 1000px wide]]
Line 40: Line 46:
 
[[File:xyz.svg|200px|thumb|center|alt=200px wide|Scaled to 200px wide]]
 
[[File:xyz.svg|200px|thumb|center|alt=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.  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).
+
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).

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).