Business Card

26 Jul 2014

I made a business card! Or rather, I coded a business card:

This wasn’t made using an image editor — it’s a 100% hand-written SVG file containing only CSS and SVG elements (along with references to external font files). It was remarkably straightforward, and the whole process took only about 45 minutes from start to finish, including the time needed to read SVG documentation. The image above is a rasterized version of the SVG, as rendered by Chrome. I did not link to the original SVG because I do not want to release the source, at least for now.

As a programmer, it felt great writing code to achieve something that is usually done using an image editing program. The only tough part was exporting the SVG to a format appropriate for printing.

I tried a couple different tools, but none of them worked quite right. Apparently, having custom fonts greatly complicated matters. Originally, I had linked to external font files (and Chrome would handle that just fine). I tried embedding my TTF fonts as base64 encoded data directly into my SVG file, but that did not give correct results either.

Chrome was rendering my SVG just fine, but there was no built-in option to export a rasterized image. I ended up finding a hack to get Chrome to save my SVG as a PNG file. In the same directory as my card.svg file, I created the following export.html document:

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="3500" height="2000"></canvas>
<script>

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

var image = new Image;
image.src = "card.svg";
image.onload = function() {
    context.drawImage(image, 0, 0);
    var a = document.createElement("a");
    a.download = "card.png";
    a.href = canvas.toDataURL("image/png");
    a.click();
};

</script>

Serving the script with python3 -m http.server and opening it in my browser, I was finally able to get a PNG image:

The result didn’t look quite right. The fonts were still broken! Even though they were embedded into the SVG and Chrome displayed them just fine when opening the SVG directly, it didn’t work properly when using the script.

I was tempted to give up and just take a screenshot of the image. I could have zoomed in to get Chrome to render it at a fairly high resolution, so the results would not have been too bad… However, this solution felt so impure that I kept looking for other ones.

Finally, as a last resort, I tried converting the TTF fonts to SVG fonts and embedding those directly into the <defs>...</defs> section of the original SVG image. Miraculously, the embedded SVG fonts worked! Using the script, I was able to get Chrome to save flawless, ready-to-print versions of my business card.