How to Add Scalable Vector Graphics (SVG) Images to iBooks Author

» 05 September 2013 » In Ed Tech, Guest post, How To, Publishing »

iBA SVG enlargedHere's another great iBooks Author (iBA) "how to" - cross posted from Dr. Frank Lowney (Projects Coordinator, Digital Innovation Group @ Georgia College). See Frank's original post a watch his demo video here. Frank writes:

The primary advantage of Scalable Vector Graphics (SVG) files is that a very small file can be scaled up to yield large images without the aliasing (jaggies) that appears when a bitmapped graphic is scaled up. SVG files are resolution independent, usually non-photographic and carry the suffix *.svg. There are lots of free SVG files available on the Internet and there are many applications for creating SVG files such as the free, open source Inkscape. For an excellent primer on vector graphics, see this Wikipedia article.

However, it is not possible to use SVG images directly in iBooks Author. If you attempt to drag and drop an SVG file onto an iBooks Author project, nothing will happen. You'll get no error messages or feedback of any kind. Similarly, apps in the iWork suite (Pages, Keynote and Numbers) will also refuse to accept SVG files. Since it is important to keep the size of iBooks Author output low for easy downloading and to avoid the 2 GB limit in the iBookstore, we need to pursue this further.

The iBooks Author application has its own Text, Shapes and Graphs menus with which a number of vector graphics can be created. Another option is to use the vector graphics created by Keynote, Numbers and Pages. These can be copied and pasted directly into an iBooks Author project. Graphics created in iBooks Author or any of the iWorks suite applications are vector graphics in PDF containers, not SVG files. PDF files can contain text, bit-mapped graphics and vector graphics. [The $99 OmniGraffle application is a considerably more sophisticated graphics toolset and is capable of exporting both SVG vector drawings and PDF vector images. The latter are compatible with iWork suite and iBooks Author.]

That's useful but there is an Internet full of already drawn SVG images that are in the public domain or CC licensed. It would be a shame not to have access to that vast library of free vector images. The trick is to use this free on-line conversion service to convert SVG to PDF and then drag and drop that PDF directly into an iBooks Author project or into one of the iWork apps or OmniGraffle for further manipulation.

Download an *.ibooks file here that shows how vector graphics created in iBooks Author compare with vector graphics converted from SVG files.

Tags: , , , ,

Trackback URL

3 Comments on "How to Add Scalable Vector Graphics (SVG) Images to iBooks Author"

  1. peter
    Alex
    29/11/2013 at 9:10 am Permalink

    Hello Peter,

    thank you for your tutorial!

    I have some trouble with the PDFs created from SVGs as you showed above. The integration in my iBooks author file works perfectly. However, when I export the book as PDF (rather than iBooks file) and then open it in either the Kindle app or the iBooks app on my iPhone the formerly SVG (now PDF) image inside the book has strange (neon-based) colors. All other images (JPG) display perfectly.

    Do you know what I can do to avoid this problem?

    Thank you in advance for your help!
    Alex

  2. peter
    Peter Pappas
    29/11/2013 at 9:52 am Permalink

    Hi Alex,
    I’m going to send your query off to Frank to see if he has any ideas on this.
    Cheers, Peter

  3. peter
    Peter Pappas
    29/11/2013 at 11:57 am Permalink

    Hi Alex,

    I heard back from Frank and it doesn’t look like we are any closer to an answer. Unfortunately I don’t have much to add to Frank’s comment. He writes:

    “Peter,

    I think that I may have a non-answer. I took the IBA file used to create my demo *.ibooks file and exported it to PDF using Image Quality: Best
    Looking at the resulting file in IBooks on MacOS X, iBooks on 5g iPod (retina) and iBooks on iPad 2, the images all look great.
    I then tried the lowest quality PDF export but saw no difference on any device. Without being able to replicate the problem, there’s not much that can be said.”

    ~ Frank Lowney

Hi Stranger, leave a comment:

ALLOWED XHTML TAGS:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to Comments