Last year, I started to use Excalidraw as a diagram tool. However, the SVG images didn’t display the font correctly. In this post, I’d like to explain the problem and offer a solution. Let’s create a sample drawing with Excalidraw. If you open the link, it should look something like this: However, in a browser, it looks like this: The code is straightforward: <img src='/path/to/sample.svg'> The font doesn’t display correctly.

A couple of months ago, I wanted to design a custom logo. The goal was to create 4 different variations for a single logo: horizontal, vertical, 'condensed', and square. All have to display the same bevel-like effect. I’m a developer, and not a web designer For this reason, I chose to use an existing point-and-click web application to create a SVG. It did the job. But I’m curious, and checked the generated XML: I was disappointed.