resizing svg format
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 |
Do you still have an unanswered question? Please log in first to post your question.
Comments
Doesn't setting the width in your html work?
img width="1000"
further info:
https://stackoverflow.com/questions/3120739/resizing-svg-in-html
In reply to Doesn't setting the width in… by musikai
Setting the width/height is not helpful because all the score and notes are written as absolute vectors in svg and their coordinates and sizes are not altered when altering the svg height/width
In reply to Setting the width/height is… by avronp
How are you including the .svg file in an html page?
In reply to How are you including the … 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 I just embed it in the html… 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 Hmm, I think this is wrong… 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 Sorry, there is an svg tag… by Imaginatorium
"100vw"?
In reply to "100vw"? by Jojo-Schmitz
No, I think I meant 100hw. But actually if it is the only element in the html body, then 100% should work just the same.
In reply to No, I think I meant 100hw… by Imaginatorium
Ah, vertical/horizontal width
In reply to Ah, vertical/horizontal width by Jojo-Schmitz
No, sorry, you succeeded in confusing me. It's 'vw' for viewport width, or 'vh' for viewport height - i.e. percent of the screen dimensions.
In reply to No, sorry, you succeeded in… by Imaginatorium
I'm good at confusing people, including myself ;-)
In reply to Ah, vertical/horizontal width by Jojo-Schmitz
I was wrong. Changing these DOES alter the size of the svg so I can now display music in html pages without pdfs
In reply to Setting the width/height is… by avronp
Problem solved - I was wrong. Changing the height/width DOES alter the svg size.
In reply to Doesn't setting the width in… by musikai
And Css works fine as well
In reply to And Css works fine as well 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 Well, yes, but I still think… 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.