Skip to main content
June 12, 2013

The treachery of images: Top 10 tips for SVGs

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?