resizing svg format

• Jun 19, 2021 - 13:57

I have begun exporting to svg format to be used in my html pages.
The svg output is very good except for the size.
Is there any way to resize svg output and layout?

Attachment Size
Cheat Sheet_2BopOr2Swing MS3.6-1.svg 1.98 MB

Comments

In reply to by Imaginatorium

I just embed it in the html page like any svg eg:

<!DOCTYPE html>

<HTML>
<HEAD>
<META CHARSET="utf-8">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<TITLE>svg music</TITLE>
</HEAD>

<BODY>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="2976.38px" height="4209.45px" viewBox="0 0 2976.38 4209.45"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny">
<title>Cheat Sheet_2BopOr2Swing MS3.6 (1)</title>
<desc>Generated by MuseScore 3.6.0</desc>
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.75" stroke-linejoin="bevel" points="212.598,1406.97 2763.78,1406.97"/>
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.75" stroke-linejoin="bevel" points="212.598,1431.97 2763.78,1431.97"/>
:
:
</svg>

</BODY>
</HTML>

In reply to by avronp

Hmm, I think this is wrong. The "<?xml" header is the beginning of an svg document; you have chucked it into the "< body >" of an html document. Browsers normally ignore errors and do their best, but I don't think you will get the results you want this way. Either use the svg file as an image, and put it in an < img > tag in the HTML body with src=, or simply serve the svg file as a standalone document. (Like sending an image file or a plain text file.) The latter seems neater, but you need to check it is being sent with the right header (the server will almost certainly do this automatically).

Then you have to work out how to size it appropriately. An svg image is just like a mathematical object: it has no real-world "size" in a normal sense, so really, really, really, speaking, you need to be able to express its intended effect with something like the angle subtended by the width of the image at the intended viewing distance. If this is, for example, 25 degrees, then you can easily calculate the dimensions needed for display on the side of a building to be viewed from the opposite side of the street. But don't expect anything that sensible to happen quickly. You have a "pixel" dimension in the svg file: perhaps you need to scale that to something like the typical width of a browser window this year, in pixels. Or if it is really intended for printing, you should be able to specify a size in physical units... sorry I do not know any details of svg. The only logical unit from CSS would be "vw", which is 1% of the viewport width, so 100vw would make the image fit the screen, but I doubt if that is possible. Sorry, mustn't ramble... good luck with finding a real svg expert.

In reply to by Imaginatorium

Sorry, there is an svg tag in html. You still should clear out the unnecessary headers for xml etc; I still think it should be neater just to serve the svg file as an svg document. Apart from anything else, the user can immediately save it as an svg file.

The numbers on the html tag for "width" and "height" must (presumably) be the coordinate ranges within the svg univers, not the dimensions of the displayed image in pixels, though I bet that is what happens by default. So if you do use an svg tag in html, you need to use css to size the image display - and yippee! that would mean you can put width: 100vw to fit the image to the screen. This is all without testing. (Was it Peter Naur who once said "I have proved the program correct, but you will have to try it to see if it works"...)

In reply to by avronp

Well, yes, but I still think it all depends on your end objective. Is this basically something printable? If so I think it would be better to embed the svg file in a pdf. If your objective really is a web page, then I think you are going the wrong way about it, because your svg file is inevitably just an image. It does not have any of the flexibility of a "real" web page. In this case it should be easy to generate all the musical examples as svg images from Musescore, then embed them into an html page. It is always going to be easier to produce the text result you want using an html editor than Musescore.

But out of curiosity, you say that changing the size "works" - but in what, pixel units? How do you decide how many pixels wide you want the image?

In reply to by Imaginatorium

svg size - by Trial and Error.
The dimensions are in pixels as was created by museScore. In html pixels are the default for graphic objects as opposed to text which is in pts, em, in, cm, etc. I haven't tried testing on smartphones.

BTW Vextab is a javascript API to display music using a completely different format from musescore but doesn't have a playback mechanism. I create mp4's for playback but there is no control over the score itself like on the musescore.org website where there is a playback and navigation mechanism. I wonder how it works and in what format the score is being downloaded and rendered. It seems the score data is in json but the rendering API is unknown.

Do you still have an unanswered question? Please log in first to post your question.