When we want to display text, images, and icons on the web we normally reach for HTML and CSS. These get parsed by your browser and the content gets rendered with the arrangement and styling we defined. So could I use HTML+CSS to draw the graphic I need? Can I render it out to an image to display on the Kindle?

Well HTML is designed for laying out web content, not actual graphics work. Every so often you do see someone make something pretty with HTML+CSS hacks, but this doesn’t prove its suitability for the job; in fact it proves the opposite. People do these things precisely because it’s hard; it’s impressive to recreate R2D2 without the help of a real graphics language.

Even assuming I can easily make the graphic I need, HTML is rendered in a web browser and this presents a problem. Browsers are big environments that run code, load resources, and will update their content over time. You can actually run browsers on servers, they’re called ‘headless browsers’ and we use them for automating tests on web projects. They’re usually outdated and always bloated, but they work ok.

Rendering this way would mean booting up WebKit, loading the page, waiting until it’s all probably rendered, and then capturing a screenshot of the virtual screen it’s rendering on. There’s a good chance this would work, but it’s inefficient and it’s a hack. There must be a better way to render an image.

Scalable Vector Graphics (SVG) is an image format used to represent complex shapes. We already use SVG extensively here at Made by Many; an SVG file can be shown at any size on any screen, and still use less data than a raster equivalent. It works in modern browsers and is really easy to convert to a PNG.

And here’s the thing; SVG isn’t just an image format, it’s a language. Actually, it’s an XML language that looks a lot like HTML. Someone familiar with HTML can open an SVG file in a text editor, change some of its code, and see their results reflected in the image. With a little research and a few useful libraries you can even write an SVG yourself. And this is why SVG is interesting.

SVG is a very powerful language that lets us define an image in code. You might write that code from scratch, or manipulate an SVG designed in a tool like Sketch. As the dashboard image is quite simple, I’m going to write it from scratch. I know that React can be used to work with SVG, so that’s the marriage I want to explore in the next post (coming soon).

[1] Quite a few people have used a Kindle as a dashboard, but Matthew Petroff’s Kindle Weather Display was the first to take this approach.