Creating SVG images in MuseScore - Revision history

Craig: /* Editing the SVG images from MuseScore */

2020-09-02T22:36:42Z

Editing the SVG images from MuseScore

← Older revision		Revision as of 22:36, 2 September 2020
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 ===

2020-09-02T22:24:36Z

Output image from Inkscape

← Older revision		Revision as of 22:24, 2 September 2020
Line 46:		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).

2020-09-02T22:23:37Z

Output image from Inkscape

← Older revision		Revision as of 22:23, 2 September 2020
Line 34:		Line 34:
	== 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]]

2020-09-02T22:23:03Z

Step 2: Menu: Edit → Resize Page to Selection

← Older revision		Revision as of 22:23, 2 September 2020
Line 29:		Line 29:

	[[File:inkscape-new-canvas.png\|600px\|center]]		[[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 ==

2020-09-02T22:21:02Z

Step 2: Menu: Edit → Resize Page to Selection

← Older revision		Revision as of 22:21, 2 September 2020
Line 25:		Line 25:

	[[File:inkscape-resize-image.png\|300px\|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]]

	== Output image from Inkscape ==		== Output image from Inkscape ==

2020-09-02T22:20:21Z

Step 2: Menu: Edit → Resize Page to Selection

← Older revision		Revision as of 22:20, 2 September 2020
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]]

	== Output image from Inkscape ==		== Output image from Inkscape ==

2020-09-02T22:19:00Z

Step 1: Select the region to keep

← Older revision		Revision as of 22:19, 2 September 2020
Line 19:		Line 19:

	[[File:inkscape-select-region.png\|600px\|center]]		[[File:inkscape-select-region.png\|600px\|center]]

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

			[[File:inkscape-resize-image.png\|500px\|center]]

	== Output image from Inkscape ==		== Output image from Inkscape ==

2020-09-02T22:16:56Z

Editing the SVG images from MuseScore

← Older revision		Revision as of 22:16, 2 September 2020
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 [~~inkscape](~~https://www.inkscape.org). 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 18:		Line 18:
	Select the part of the SVG image that you want to keep in the image:		Select the part of the SVG image that you want to keep in the image:

	[[File:inkscape-select-region.png\|~~500px~~\|center]]		[[File:inkscape-select-region.png\|600px\|center]]

	== Output image from Inkscape ==		== Output image from Inkscape ==

2020-09-02T22:14:42Z

= Step 1: Select the region to keep

← Older revision		Revision as of 22:14, 2 September 2020
Line 14:		Line 14:
	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](https://www.inkscape.org). 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 [inkscape](https://www.inkscape.org). Here are the steps for doing that in inkscape:

	=== Step 1: Select the region to keep ==		=== Step 1: Select the region to keep ===

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

2020-09-02T22:14:16Z

Creating SVG images in MuseScore

← Older revision		Revision as of 22:14, 2 September 2020
Line 5:		Line 5:
	From the File menu in MuseScore, select "Export..." A save dialog window will open up:		From the File menu in MuseScore, select "Export..." A save dialog window will open up:

	[[File:musescore-svg-save.png\|center]]		[[File:musescore-svg-save.png\|400px\|center]]

			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](https://www.inkscape.org). 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:

			[[File:inkscape-select-region.png\|500px\|center]]

	== Output image from Inkscape ==		== Output image from Inkscape ==