Working With SVGs, and New Books
TROUBLE WITH SVGs
Nantucket E-Books are meant for the browser, and they’ll work on smartphones, tablets, laptops, and desktops. They also use reader-respecting free software. This makes the SVG format great for images in my e-books: they will scale to any device’s resolution, and it’s as open a format as you can find online. Their small file size is a further advantage.
I have been creating many of the book covers on this platform in SVG. There is one problem with SVGs, though, and that’s text. SVGs are just a list of elements for the browser to draw: mostly lines, circles, rectangles, and text. When it comes to text, the browser will display text using its default fonts. For example, if you write for the SVG file to display a serif font, it will do so with the browser’s default serif font. The problem is that different default fonts come in different sizes, and what fit in one image might appear oversized elsewhere.
ABOVE: Prior vector-art cover for McTeague. In some browsers, the subtitle A Story of San Francisco will appear too big.
Readers of this site have pointed this out to me. For example, the cover for McTeague had text that rendered too big in some browsers.
There are a few solutions, each of which result in specifying which font the browser will load, giving readers a consistent experience.
Before I discuss these solutions, I should explain my workflow. I don’t use a vector-editing program like Inkscape or Adobde Illustrator to create my images, instead I write them in Vim. While Vim is not known as an image-editor, I try to keep my covers simple, simple enough to open in a text editor and understand what’s going on. I use Vim for almost all of my writing (writing in Vim right now), so using it to create images is working for now. For bitmap editing, I use GIMP.
The first solution for consistent cross-browser text in an SVG is to directly link to a font’s files, using a format called WOFF2. This is the easiest solution, but would require including the font files used in the SVG with the e-books assets. I’m not opposed to this idea, but I’m not going to pursue it yet.
The second solution is to convert the text to “paths”, which means specifying every last little arc, dip and curve of each character. This would work, and I believe it’s what some vector-editing programs like Inkscape would do. I’m not going with this one because I worry it would make the files hard to debug. Any change to the text would require converting to paths again.
The third solution is to embed the font file inside the SVG, by converting the WOFF2 file to Base64. If you’re unfamiliar with Base64, it’s a file in the form of a long string of letters and numbers. For example, since email is text-based, any time you send an image as an attachement in an email, it gets converted to Base64 before being sent out.
I use Base64 in some areas of my e-books already, namely the favicon and Apple Touch Icons. When it comes to saving on a couple GET requests to the server, embedding tiny images as Base64 strings makes sense. A WOFF2 file is a little bigger, around 50 to 60 kilobytes. This makes for a long string in an SVG file, but if I keep it up at the top it doesn’t get in the way, and I can still debug the file.
Also, this means that any additional fonts are another 50K-60K, so two fonts would create an SVG as large as a small, compressed JPG file. At that point, it’s not saving bandwidth. That said, this disadvantage applies to the other two solutions.
Another disadvantage that’s worth considering when using Base64: this bypasses the wants of customers who might have disabled image-loading or custom fonts in their browser.
I’m going with the WOFF2-to-Base64 approach, since it offers the more consistent reading experience, while still easy to debug, and it saves on GET requests. It would be nice if browsers loaded text in a more uniform way, but apparently that didn’t get settled in the Browser Wars. Until then, if you’re going to use SVG images in your website, play it safe, and embed the fonts directly into the SVG file.
ABOVE: Current vector-art cover for McTeague. This file uses embedded fonts, so the text should render more consistently across different browsers.
NEW BOOKS
Two new e-books to share: the children’s novel A Little Princess, and the brilliant domestic drama The Good Soldier. A Little Princess includes several full-color illustrations, and a built-in Librivox audiobook from the one-and-only Elizabeth Klett.
LEAVE A COMMENT
What’s been your experience with SVGs? Leave a comment and share, it always provokes a good discussion.
SHOW/HIDE COMMENTS
WANT TO COMMENT?
SEND AN E-MAIL TO NJB@NANTUCKETEBOOKS.COM WITH THIS SUBJECT LINE: