The treachery of images: Top 10 tips for SVGs

Simon Bate / Opinion1 Comment

Every image format has its promises, foibles, and shortcomings. We make up for those foibles and shortcomings by understanding how best to work with each format.

For a long time, Encapsulated PostScript (EPS) has been the standard vector format, but it doesn’t work in web browsers and doesn’t play well with XSL-FO (and let’s not talk about the tragic TIFF preview).

We are seeing increased use of Scalable Vector Graphic (SVG) images, particularly by clients implementing DITA. The SVG image format uses XML to describe the elements that make up a graphic. Thus, SVG images can be displayed by most “modern” browsers and also work very well in PDFs generated from XSL-FO.

To share some of our experience, I present Scriptorium’s top 10 tips for working with SVG images.

  1. Get Inkscape, a free SVG editor. It’s not the prettiest of tools, but certainly does the job. (Did we say that it’s free? We like free.)
  2. The SVGs exported from Adobe Illustrator are seriously overweight. Use Inkscape to optimize SVG output from Illustrator (“Save as optimised SVG”).
  3. Don’t wrap a single bitmap image in an SVG. If you’re using SVG to add callouts to a screen shot, that’s OK; what’s silly is an SVG full of Illustrator overhead that contains a single bitmap icon. The whole idea behind SVG is that vectors can be resized infinitely. Create the icon using vectors.
    Ceci n'est pas un SVG (original image, flickr: daryl_mitchell)

    Ceci n’est pas un SVG (original image, flickr: daryl_mitchell)

  4. Ensure your image goes from edge to edge of the SVG’s bounding box. You don’t need a nice margin. Nice margins consume space in your output and cause problems when you try to fit images. The Inkscape Properties dialog allows you to “resize page to content.” Use it.
  5. If you’re creating PDFs from DITA sources, SVGs are great for images. SVGs are more flexible than EPS images, and are better supported in XSL-FO processors.
  6. If you’re creating EPUBs, don’t count on being able to use SVGs; use a bitmap image format (such as PNG). The EPUB 3.0 standard calls for SVG support, but that spec is useless until e-readers uniformly support SVG. Support in readers for EPUB 2.0 is decidedly spotty.
  7. If you’re using a single source and generating both PDF and EPUB output, expect that you’ll have to include references to both SVG and bitmap images. Then use conditions to include or exclude the appropriate ones.
  8. Put your localized strings inside your SVG, rather than creating separate SVGs for each localization.
  9. Make sure your fonts are embedded. If your SVG uses non-standard fonts, embed those fonts in the image.
  10. Don’t forget that it’s possible to create SVGs programmatically. If you have access to the data and that data is best shown in an image, SVGs can be quite powerful. This is particularly true where the data changes frequently or where the data isn’t frozen until the last minute.

What are your favorite SVG tips?

About the Author

Simon Bate

Twitter

Involved in TechComm all my working life (since the time of vacuum tubes, core memory, punch cards, and bone implements). I've worked as a writer, a manager, and—for the past score of years—building software tools for TechComm. My motto is "Let the computer do the work." Outside of work, I balance the calories I create and consume in the kitchen with weight-training sessions at the gym. I also sing Tenor in various choirs and choruses.

One Comment on “The treachery of images: Top 10 tips for SVGs”

  1. First useful stuff I read about svg’s since I started trying to figure out how to use them… At long last someone who shares his experience rather than (badly) rewording the manual.

    Two great tips in particular:

    (1) when using Inkscape don’t forget to resize the page to the object’s dimensions before saving, and

    (2) forget about using svg’s in epub’s for now: they will render OK in calibre but they will usually end up a total mess in your e-reader.

    Wish I’d read this article four hours ago. Apart from the time I wasted it would have saved me a lot of aggravation.

    Thanks..!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.