PDF sheet music/MIDI question

[Psymon]

Re...

Originally Posted by Jellby

It should be possible to make the SVG transparent too, and with some luck to take the surrounding text colour.

...and...

Originally Posted by DaleDe

Looking at the svg file itself I see the canvas/view port specified enable background. I have never seen that before and suspect it may be causing the issue, perhaps to avoid a black on black condition with the lines and text.

If there's a way to get the SVG transparent, I haven't got a clue how. I made those in Adobe Illustrator (CS6), and you'd think that if any program could do it, then that could -- but this morning I searched all over the 'net for a tutorial on "transparent svg illustrator" and just couldn't find one. Indeed, if anything, what I found was various discussion boards where they said you can't make an SVG transparent.

It wouldn't surprise me, though, if there's some freeware proggie out there somewhere that I could run my Illustrator-made SVG file through and make them transparent (i.e. do what my $600 program can't!). Seems like half of everything I do is in freeware proggies that can do what expensive, paid-for software can't.

Originally Posted by DaleDe

SVG is vector imaging and PNG is raster/bitmap imaging check our wiki for details at Graphics. the text is real text in SVG and is searchable and scalable.

Yeah, I do understand the difference between raster and vector images, although in these music images I've done all the text is part of the image -- I made the vector (SVG) files from one, single raster (PSD) image. I've had Illustrator for years now, but simply never had any occasion to use it until now -- in fact, I didn't even have it installed until the other day -- so although I know Photoshop inside-out, I'm virtually a newbie to Illustrator. :/

The only relevant "text" in these music images is the lyrics, basically -- I don't imagine people would be doing a search for "Andante" or "cresc." or "p" or "f" or something -- and I was going to write out, in text, the full lyrics after the music itself (the music only contains the first stanza). So that would still be searchable, of course.

SVG is fully supported in ePub 2 and ePub 3 but not the old mobi format although it is supported in KF8.

Oh, well, although I was only planning on publishing this in epub, I was going to basically give it away for free, and so I could certainly see that people might want to convert it to MOBI format (or whatever), so isn't that an argument in favour of not using SVG, and just going with PNG instead?

As to scaling PNG, JPG, GIF etc scale by taking the image pixels and duplicating some number of them at the new resolution. It can cause jaggies in the image. SVG on the other hand draws the image at the new resolution.

Yeah, I know, but my PNG versions were reasonably large enough (i.e. hi-res enough) that those "jaggies" are virtually imperceptible, it's only when you make a smaller image larger than it's supposed to be that you really start to see stuff like that happen, but not when you take a large image and display it at a smaller size. I can hardly tell the difference at all between the SVG and the PNG version of the same image.

For all the above reasons, I really have to wonder why I'm going through all this time/effort to get these done up in SVG format, just so that I can end up with images that pretty much look exactly the same as the PNGs would, are not transparent (at least, as far as I can figure out, using Illustrator to make them), and less compatible if/when someone converts the book from epub format.

Seriously, aren't I better off just doing them up as PNGs instead?

(PS. Thanks for the nice comment/feedback, DomesticExtremis!)

EDIT: Oh, and here's another reason to go with PNG instead of SVG. When I did up that one measure in colour, both in PNG and SVG format (and with exactly the same pixel dimensions), the PNG was only 18k in size, whereas the SVG was 325k! That's almost 20x the file size!

[dgatwood]

Originally Posted by Psymon

If there's a way to get the SVG transparent, I haven't got a clue how. I made those in Adobe Illustrator (CS6), and you'd think that if any program could do it, then that could -- but this morning I searched all over the 'net for a tutorial on "transparent svg illustrator" and just couldn't find one. Indeed, if anything, what I found was various discussion boards where they said you can't make an SVG transparent.

SVG is inherently transparent. There's no fill anywhere unless you add it as part of the content.

With that said, not all user agents render it that way, and it often depends on how you include the content. In particular, the <object> tag is rendered as opaque in WebKit-based UAs. You're usually better off including the <svg> tag in the content rather than including it from a separate file.

[Psymon]

Originally Posted by dgatwood

SVG is inherently transparent. There's no fill anywhere unless you add it as part of the content.

Well, I couldn't seem to figure out how to do it -- not using Illustrator, anyway. :/

In any case, though, I still don't get the rationale for doing it in SVG instead of PNG anyway. I do realize that the former is vector and the latter raster, but nevertheless in the context of ebooks the quality is not only negligible, but virtually indiscernible.

And then there's the compatibility issue (if one wants to convert to MOBI format).

And then there's the file size issue (as I mentioned last time, for that one image I did in both formats, the SVG one was almost 20x the size of the PNG one).

Seems like I have multiple reasons for going with PNG instead, and the only reason to go with SVG is because it's vector -- and yet, you don't even notice any difference in quality anyway, so that's hardly an argument in its favour at all.

[DaleDe]

You have done some great pioneering work in SVG, thank you. However, I agree that PNG or even GIF might be better for your application. Only you can determine this. Originally you were looking for some solutions to some problems that were present in images of notes and we have now explored that, it is up to you to decide.

Dale

[Psymon]

Originally Posted by DaleDe

You have done some great pioneering work in SVG, thank you.

That's so kind of you to say, although I'm genuinely flabbergasted by that, too! Seriously, when I was initially urged in this thread that SVG would be the best way to go, I just figured this was all "old hat" for those of you doing the urging -- I had no clue about SVG at all (other than that it was vector, but I'd never actually made one before), never mind converting a raster image to that format.

So if this has somehow been helpful for others, well, I'm delighted!

With that said, though, and as you were saying as well...

However, I agree that PNG or even GIF might be better for your application. Only you can determine this. Originally you were looking for some solutions to some problems that were present in images of notes and we have now explored that, it is up to you to decide.

Yeah, as I said I can't seem to figure out how to make my SVGs transparent -- I guess they don't "have" to be, but for the aforementioned reasons it'd be nice if they are -- not to mention the other things I mentioned about file size, etc., I think I'll just stick with plain ol' PNGs for this particular thing I've been working on.

But it's been an interesting learning experience for me, and with any luck that'll come in nice and handy for me sometime in the future again.

Thanks for all your help, Dale -- and the same to everyone else, too!

[Tex2002ans]

Originally Posted by Psymon

Well, I couldn't seem to figure out how to do it -- not using Illustrator, anyway. :/

I am not extremely familiar with Illustrator... the few experiences I have had with it have been extremely negative. Adobe always seems to want to promote their own format (in this case, their vector format is .ai files), and try to tie you into "Adobe's way or the highway".

Perhaps there are ways to strip the SVG down, similar to the "Save for Web" on JPGs/PNGs... in Inkscape, you are able to save vector files as "Plain SVG", which strips out a bunch of the extra cruft. Perhaps there is something similar in Illustrator.

Side Note: I really have an aversion to the entire proprietary ecosystem... I hate being tied into one version of the software, where the file formats are not very portable between OTHER outside programs. Similar thing with DOC(X)s and Microsoft Office.

Originally Posted by Psymon

In any case, though, I still don't get the rationale for doing it in SVG instead of PNG anyway. I do realize that the former is vector and the latter raster, but nevertheless in the context of ebooks the quality is not only negligible, but virtually indiscernible.

Similar reasons why I favor HTML Tables over images of tables (See Post #5):

https://www.mobileread.com/forums/sho...d.php?t=223062

Or very similar to the reasons I give for creating/generating higher resolution formulas instead of creating ant-sized thumbnails (I mentioned it in my Formulas to PNG Tutorial).

I also mentioned a lot of the disadvantages of SVG in the MobileRead topic I linked to in Post #8 of this topic.

I don't want to go through all the same reasons again, and again, but here is the main gist:

While the bitmap images might look ok on the surface FOR NOW, they will look worse in the future. You can stave it off temporarily by generating much higher resolution bitmap images, but that is only pushing the ball down the road one step. What happens when the next-next higher resolution device comes out? Why spend more time generating a higher resolution PNG of course!

One of the largest disadvantages of bitmap images is if you scale up/down, they can look like crap (especially when dealing with text in images). Since vector images are generated by mathematics (points, lines, curves, etc.), it will continue to look crisp no matter what the resolution.

Side Note: Here is a site I thought was informative, focusing on Web Design using SVG icons:

http://www.smashingmagazine.com/2012...ence-with-svg/

Initially, the file size of a vector file may be larger, but doing it this way is forward-looking, for when screens/devices become higher and higher resolution. The SVG icons will continue to look crisp, while PNG/bitmap icons will begin to suffer negative effects.

Originally Posted by Psymon

IAnd then there's the compatibility issue (if one wants to convert to MOBI format).

Indeed, if you go MOBI, you will be forced into a PNG fallback. This is one of the reasons why I haven't pushed that way in my EPUBs (although I have made it simple for me to substitute in new code in the future). Although you seem to be iBooks iBooks iBooks, and hand-crafted, hand-crafted, hand-crafted. From what I gather, you don't mind spending hours and hours doing tweaks to multiple formats to make things "perfect".

For work, I sort of have to design "one EPUB to rule them all." So sadly, I have to err on the side of "compatibility" over "superiority."

I haven't had as much time to dedicated towards researching SVG as I have wanted to.

Originally Posted by Psymon

And then there's the file size issue (as I mentioned last time, for that one image I did in both formats, the SVG one was almost 20x the size of the PNG one).

[...]

Seems like I have multiple reasons for going with PNG instead, and the only reason to go with SVG is because it's vector -- and yet, you don't even notice any difference in quality anyway, so that's hardly an argument in its favour at all.

A lot of it is dependent on how exactly the vector image was created as well... was this scanned in, and then changed to paths? Or did you create this file from scratch?

If you zoom in very closely to a "bitmap -> vector" SVG, you can see the lines are very jaggy/wobbly. The SVG has to take into account ALL of those scanning imperfections with math. This bloats the file size drastically.

If you generated a vector file straight from a digital source (for example, the output from MuseCore or MusiXTeX), the vector music sheets generated from that would be MUCH smaller in size.... because a straight line would actually be a straight line (a simple draw a line from A to B as thickness X).

I have attached a few SVGs I created for a book about a year ago, David Osterfeld, "Freedom, Society and the State" (I believe I showed these off previously on the forums).

I handcrafted these in Inkscape by tracing over the graphs manually (and I had no clue what I was doing. ).

The 8 SVGs are similar in size compared to the 8 extremely optimized PNGs:

SVGs: 115 KBs
PNGs: 114 KBs

The biggest advantage of SVG is that on a small device, big device, medium device, the image will scale/look crisp and crystal clear no matter the resolution of the device. That 115 KBs of SVGs will stay the same no matter what.

Compare this to the PNGs, where if I wanted to generated EVEN HIGHER resolution PNGs, the size of the file would only go up from there.

If you want to see some comparison shots, I showed off a 3 Before/After images of the original PDF scan + my LaTeX version of the book in this post:

https://www.mobileread.com/forums/sho...6&postcount=60

Converting the original scans to vector made the images infinitely easier/cleaner, and now I can generate PDFs/PNGs easy as pie, at any size, with ZERO loss.

Side Note: Take a look at that ZIP of the PNGs + SVGs. The SVGs got compressed down to ~15% their uncompressed size, while the PNGs only got compressed by a few KBs. SVGs won't add as much size to the final EPUB as the comparable PNGs. This really adds up when you have A TON of images in the book.

I also included the original PNGs I cropped out of the scan just so you could compare.

Originally Posted by Psymon

I think I'll just stick with plain ol' PNGs for this particular thing I've been working on.

Understandable. I came to the same conclusions for now. Inserting it in EPUBs as bitmap is the most compatible, but definitely keep generating clean vector files in mind. It makes it WAY easier to just generate higher resolution bitmap images in the future if needed, and will make it easy as pie to just plop in the vector files when vector support gets better/easier. Do the work properly NOW, and it will save you a bunch more work in the future.

[Psymon]

Originally Posted by Tex2002ans

Perhaps there are ways to strip the SVG down, similar to the "Save for Web" on JPGs/PNGs... in Inkscape, you are able to save vector files as "Plain SVG", which strips out a bunch of the extra cruft. Perhaps there is something similar in Illustrator.

The odd thing is that I went in the Illustrator help, and in there it talks about going into the "Save for Web & Devices" dialog box where there's supposed to be an SVG option -- well, I don't have a "Save for Web & Devices" option, there's only a "Save for Web" option, and there's no SVG option in there (just JPEG, GIF and PNG), which seems odd. I suspect that the help files must be geared for CS7 (or whatever it is now), not CS6, which I have. :/

While the bitmap images might look ok on the surface FOR NOW, they will look worse in the future. You can stave it off temporarily by generating much higher resolution bitmap images, but that is only pushing the ball down the road one step. What happens when the next-next higher resolution device comes out? Why spend more time generating a higher resolution PNG of course!

I agree, but if I can't get this stupid transparency thing figured out (and I've just spent the last hour or two searching all over -- again -- to find a way, and still can't seem to figure that out, at least not by using Illustrator) then I think for all those various reasons (including compatibility at this time, etc.) I might as well just stick with PNG.

Although you seem to be iBooks iBooks iBooks,

That's because that's the only device that I own myself! Other than ADE and Sony Reader on my PC, of course. All my family/friends seem to have iPads, too, though, I don't think I personally know anyone (in my "real" life) that has anything other than that. So I guess if I've put emphasis on the iPad/iBooks, it's both for myself and for them, too -- although I am trying to design in a way that things will work on other devices, too, of course (and hence why I think I'm better of sticking with PNGs for this, at least for now).

and hand-crafted, hand-crafted, hand-crafted.

If it's any consolation (for you and everyone putting up with me), I'm getting tired of trying to be fancy-schmancy with everything I do -- my first book was a total pain-in-the-butt to get it converted for Kindle, and I haven't even bothered with my second book (which is only on the iBooks store for now). I might be slow in learning the "KISS" caveat, but it's starting to sink in.

A lot of it is dependent on how exactly the vector image was created as well... was this scanned in, and then changed to paths? Or did you create this file from scratch?

I originally scanned the sheet music (many years ago), and still had the original PSD files for those. I cut those up into individual measures (music-wise) and then opened them in Illustrator and did an "image trace", from which I can then do a "save as" as SVG.

I just learned how to do all that (the Illustrator stuff) the other day -- never did it before. Seems to work great (as you can see with the resulting SVG images I had in the ebook I shared before), except for the lack of transparency issue, of course.

If you generated a vector file straight from a digital source (for example, the output from MuseCore or MusiXTeX), the vector music sheets generated from that would be MUCH smaller in size.... because a straight line would actually be a straight line (a simple draw a line from A to B as thickness X).

Yeah, I would imagine that would indeed be the case -- I know exactly what you mean -- except I'd then have to totally re-create the entire sheet music note-by-note (in software that I'm still rather unfamiliar with).

Like I indicated in a previous reply, this is turning into far more of an ordeal than I'd intended it to be! Heck, I just wanted to add a little sheet music to my book, it's not like I'm going to start publishing sheet music on a regular basis or anything and need to figure out "the perfect way" to do this for clients and stuff.

Apart from that, thanks for all the rest of your explanation(s), and for taking the time to include examples and stuff. I do understand what you mean with ALL your reasons for endeavouring to go with SVG, but as you concluded at the end of your message...

Understandable. I came to the same conclusions for now. Inserting it in EPUBs as bitmap is the most compatible, but definitely keep generating clean vector files in mind.

I think that's basically where I'm at, at least with this project, and at this time/stage in things. I did learn quite a bit in all this discussion, though -- including some handy things in Illustrator which could very well be of use in the future -- and as far as the music goes, instead of just single full-page images it looks like I'll be doing things "measure for measure" instead (to borrow Shakespeare's title), which I'm sure will be nicer for readers out there.

Thanks again for your input!

[Tex2002ans]

Originally Posted by Psymon

I just learned how to do all that (the Illustrator stuff) the other day -- never did it before. Seems to work great (as you can see with the resulting SVG images I had in the ebook I shared before), except for the lack of transparency issue, of course.

Maybe something here might help with the white background:

https://forums.adobe.com/thread/672373

Could be a little checkbox in the way you are importing the PSD?

Also, Inkscape has Bitmap Tracing, GrannyGrump made a tutorial a while back here:

https://www.mobileread.com/forums/sho...d.php?t=233131

Also, this is what I meant about the "wobbly" lines. I zoomed in on your PDF + one generated from MusiXTeX. As you can see, the bitmap -> vectorization, the lines look like a bunch of oddly shaped curves, you can really tell at the corners. (This adds all that bloat to the SVG I was mentioning before).

Originally Posted by Psymon

Yeah, I would imagine that would indeed be the case -- I know exactly what you mean -- except I'd then have to totally re-create the entire sheet music note-by-note (in software that I'm still rather unfamiliar with).

If I could read music again, I would do it. Sadly, I lost that power a while back, it looks like complete gibberish to me now, hahaha.

Heh, all this SVG talk made me look up the outline of my SVG Tutorial I was writing/researching... WOW, I can't believe it has almost been a year since I started it... insane.

Something that might also be helpful in the future, if you ever need any sort of flags, use the SVGs from the Wikipedia Commons:

https://commons.wikimedia.org/wiki/C...ags_by_country

Do not settle for low quality flags in your books, generate right from source! As you can see, most of these country flags are < 5KBs. Bitmap images don't have anything on that!

[Psymon]

Originally Posted by Tex2002ans

Maybe something here might help with the white background:

https://forums.adobe.com/thread/672373

Could be a little checkbox in the way you are importing the PSD?

I really just don't know! I went through the whole thread there, tried various things that were suggested, and still no luck getting things to work. However, you did inspire me to start my own thread on there!...

https://forums.adobe.com/message/6745057

...and hopefully this will bring a fruitful response. I basically asked about ALL the issues that I've been struggling with, that we've been talking about here -- although naturally there's not much that anyone can do with regard to SVG's compatibility in some devices. If only because of this latter issue (compatibility), I may still end up using PNG anyway, but nevertheless it would certainly be nice to get those other issues figured out!

Also, this is what I meant about the "wobbly" lines. I zoomed in on your PDF + one generated from MusiXTeX. As you can see, the bitmap -> vectorization, the lines look like a bunch of oddly shaped curves, you can really tell at the corners. (This adds all that bloat to the SVG I was mentioning before).

I'm assuming you meant when you zoomed in on my SVG (not PDF)? Don't forget, my sheet music was a scan from an old book, and so obviously the glyphs, etc. aren't going to come out perfectly clean and crisp to begin with, never mind that the Image Trace function in Illustrator isn't perfect either -- meanwhile your MusiXteX program (which I haven't use) no doubt is creating its SVG files from actual digital fonts (i.e. all the musical notation, etc. are fonts, not graphics), so it's no wonder that it creates SVG files that are virtually "perfect".

Nevertheless, I'm sure that even doing it the way that I did (using a scanned image, etc.) there surely must be a way to get the file size down to something more comparable to what you were able to do -- I guess I'll just have to wait and see what folks on that Adobe forum come up with for suggestions/solutions.

Thanks for your help -- even if the best part of it was to get me to post a query on the Adobe forums! Hopefully that'll result in something -- I guess you can follow it over there, if you're so inclined, but if/when I do get some "final" answer on how to go about things, I'll re-post the link to that page at that time.

[Psymon]

Ha! No thanks to the Illustrator forum (which didn't give me a single response to my query), I fiiiiiiiiinally managed to find out how to get the transparency saved in my SVG file, via this link...

http://graphicdesign.stackexchange.c...age-trace-help

I saved my SVG file, added it to my "test book", sent it over to the iPad and then changed my background to black ("night") mode, and indeed it comes out transparent (and looks great). ))

However, I still can't seem to get the file size down, and there's still the issue regarding compatibility in some devices -- maybe I can find somewhere that'll help explain how to resolve the former issue, but I guess there's not much I can do about the latter...

...and so I guess I'm still thinking that PNG is probably the way to go (at least for now). :/ But I'm so happy to have figured out the transparency issue, at least!

[dgatwood]

The entire notion of bitmap tracing for music in SVG is probably the wrong direction. When you generate a PDF with something like Finale, you aren't generating a bunch of lines. Your staff lines are lines, but everything else is just a placed font glyph, which means it's just a few bytes of text in SVG per musical symbol. That *should* be fairly efficient when compared with a PNG file, at least after you compress the book.

Of course, then you get the whole font licensing question—you'd have to contact the font vendor for details on that—but that's a separate issue.

[Psymon]

Originally Posted by dgatwood

Of course, then you get the whole font licensing question—you'd have to contact the font vendor for details on that—but that's a separate issue.

Well, that freeware music notatin program that was mentioned here, MuseScore, can save files as SVG, and with regard to saving -- and sharing -- files you make in that program the only thing I could find in the help files that seemed to relate in any way to possible copyright issues was this:

"Scalable Vector Graphics (SVG) can be opened by most web browsers
(except Internet Explorer before version 9) and most vector graphics
software. However, most SVG software don't support embedded fonts, so
the appropriate MuseScore fonts must be installed to view these files
correctly."

That seems to imply that they don't mind if you embed their fonts (which is easy enough to do with epub).

Nevertheless, even if it did all work out just fine going in that direction, there's still the compatibility issue with some devices (especially older ones), and so I'm still thinking that the best/safest bet is to just go with PNG instead -- and from my experiments you can't even really see any difference in them all that much (and even if you can, if you really were to zoom in, that difference is negligible and the PNGs are certainly more than good enough to do the job).

[Jellby]

Originally Posted by Psymon

However, most SVG software don't support embedded fonts, so
the appropriate MuseScore fonts must be installed to view these files
correctly.

Another option is converting the fonts to paths with an SVG editor that does support embedded fonts.

[mrmikel]

Once you did that you wouldn't need to embed fonts in the document, right? And for music searchability is not such an important criteria for the average reader. Darned if I know what you would search for.

[Psymon]

Originally Posted by mrmikel

Once you did that you wouldn't need to embed fonts in the document, right? And for music searchability is not such an important criteria for the average reader. Darned if I know what you would search for.

Well, I guess you could have the lyrics in there -- as I did (and do) in the music that I was working on here. You can see that in the examples I posted of my various experiments. However, as I think I mentioned before, too, I was going to include the entire lyrics as "plain text" right after the sheet music as well (which only has the first stanza), so I guess it doesn't really matter if the music itself was "searchable."