7 Replies Latest reply: Sep 21, 2014 10:53 PM by Psymon23 RSS

    Convert PSD to transparent SVG (for ebooks)?

    Psymon23

      Hi folks!

       

      I've been working on an ebook, in which I wanted to insert a couple of pages of sheet music that I'd scanned, and I split the music up into individual measures (i.e. "lines of music", if you're not familiar with music terminology) to make separate graphics from. On the MobileReads forum (for epublishers, etc.), it was suggested that the best way to go for something like this would be SVG format (as opposed to JPEG or PNG or GIF), but I've been having a heck of a time trying to get things to come out right. I'm using Photoshop/Illustrator CS6, by the way (and have the full Design Studio).

       

      There are a couple of issues that I've been struggling with...

       

      Firstly, for the life of me I can't seem to get my transparent PSD to come out as a transparent SVG -- indeed, I can't even get the PSD to retain it's transparency (not that I can "see", anyway) even just in opening it in Illustrator, never mind when I "save as" as an SVG. Although my original PSD is essentially a raster file (i.e. one layer of my scanned sheet music, with another layer of text), I did manage to figure out how to use the "Image Trace" function to convert it to vector (I used the "16 Colors" option), and then "saved as" SVG, but no matter what I try I just can't get it to be transparent (i.e. the sheet music and the text, but with no background)!

       

      Secondly, the file sizes seem inordinately high. If I create a simple PNG from my image (which I have no problem making transparent), it comes out as a mere 18k, but saving as SVG makes it almost 20x the file size, coming in at a whopping 325k! I've looked at all of the options in the "save as" (SVG) dialog box, but most of it is all meaningless to me -- surely there must be a way to keep the file size down to a minimum?

       

      Lastly, in searching all over the web for an answer to this, I saw reference to doing a "Save for Web and Devices" option, where supposedly SVG is one of the formats that one can choose in there -- neither in Photoshop nor in Illustrator do I have that, though, I only have "Save for Web", and SVG isn't an option in there. Did "Save for Web and Devices" only come out after CS6?

       

      Thanks so much for any suggestions on this -- I'd be happy to load up my original PSD file (and/or the resulting SVG/PNG versions that I ended up with) if that would help. I gather I just click on the "Insert Image" icon to do that?ain,

       

      Thanks again, in advance!

        • 1. Re: Convert PSD to transparent SVG (for ebooks)?
          Psymon23 Community Member

          I guess nobody can help me here.   However, I did find this tutorial elsewhere which resolves the transparency issue, at least...

           

          adobe photoshop - Transparency is lost in illustrator CS6 when I use image trace. Help! - Graphic Design Stack Exchange

           

          Guess I'll go searching ELSEWHERE for a solution to the file size issue now, too.

          • 2. Re: Convert PSD to transparent SVG (for ebooks)?
            tman69 Community Member

            if you are making an eBook--it would be better (since you have the full design studio) to use Indesign--I suggest placing your PSD file into illustrator--your Illustrator into Indesign and then follow the link below for making an eBook

             

            Adobe InDesign CS6 Tutorial – Ebooks and the EPUB Format | Infinite Skills Training Videos

             

            the second video shows how the images get converted 'when' you create the eBook

             

            there is also some useful information about images here:

             

            InDesign Help | Export content for EPUB | CS6

             

            Capture.JPG

            • 3. Re: Convert PSD to transparent SVG (for ebooks)?
              Psymon23 Community Member

              Thanks for the suggestion, but I would never InDesign or any other WYSIWYG editor to design my ebooks, I'm afraid! I started doing web design almost two decades ago, and got into ebooks a year or two ago, and do all my coding "by hand" -- I would never do it any other way. No offense to Adobe or any fans of ID, of course!

               

              As I mentioned in my last follow-up, I did manage to figure out (via a tutorial on another site) how to get my SVG to be transparent, but I still just can't seem to figure out how to get the file size down. I've tried saving with all different sorts of options selected, but even still I can't get my image (that I've been using just to try to figure things out) below ~280k -- whereas the same image as a transparent PNG is a mere 18k. Speaking with others on the MobileReads forum, this seems ridiculously large, and there should be some way of getting the file size down. I'm actually thinking of looking into third-party programs (freeware, probably!) which might provide a solution, i.e. where I can create/save an SVG in Illustrator, but then run it through some other proggie just to get rid of all the "crap" and bring the file size down to something reasonable.

               

              And my only other question (that's left over) is regarding that "Save for Web and Devices" option, of course -- I gather that's something that must have come out after CS6, though?

              • 4. Re: Convert PSD to transparent SVG (for ebooks)?
                Monika Gause CommunityMVP

                Psymon23 schrieb:

                 

                As I mentioned in my last follow-up, I did manage to figure out (via a tutorial on another site) how to get my SVG to be transparent, but I still just can't seem to figure out how to get the file size down. I've tried saving with all different sorts of options selected, but even still I can't get my image (that I've been using just to try to figure things out) below ~280k -- whereas the same image as a transparent PNG is a mere 18k.

                 

                Autotracing almost always produces substandard vector graphics. Consisting of too many elements with far too many anchors. This of course makes flie size rather large. PNGs can be compressedrather efficiently using limited color palettes, whereas vector graphics can't be compressed below a certain amount of data. The anchors' positions need to be stored somewhere.

                • 5. Re: Convert PSD to transparent SVG (for ebooks)?
                  Psymon23 Community Member

                  That could indeed be the issue -- my original raster image was a scan of some old sheet music, and so all the glyphs (musical notes and other symbols) weren't all nice and "clean", with nice bezier curves and stuff like a good font would have, but rather there were lots of defects in there because, well, the image was a scan to begin with (of music printed in an old book, and the texture of the old papers, etc. also only adds to all the defects).

                   

                  I do have a freeware musical notation program that can save what you do as SVG, and apparently the file sizes are quite small, so that might be the route to go -- but what a pain in the butt to have to re-write out the whole song in its entirety, note-for-note, in yet another program I'm not very familiar with!

                   

                  Oh well -- maybe I'll just scrap the whole SVG thing and just go with PNG instead -- at least it's more cross-compatible, too, with various devices.

                   

                  Thanks for your help, everybody! I guess that all pretty much answers my questions (with the assumption that I answered my own one re that missing "Save for Web and Devices" issue in CS6).

                  • 6. Re: Convert PSD to transparent SVG (for ebooks)?
                    Silkrooster Community Member

                    You could use a musical font and recreate the score. This should produce a nice svg file. (supposedly)

                    • 7. Re: Convert PSD to transparent SVG (for ebooks)?
                      Psymon23 Community Member

                      That's essentially what I said in my last reply -- I found a freeware music notation proggie (called "MuseScore") that I can recreate the music with, and apparently it puts out really nice, small SVG files. It's just suuuuuuuuch a pain to recreate the entire piece of music from scratch, note-for-note (compared to merely just scanning the pages)! I'm trying to save myself extra work, not create it.