SVG whiteboard implementation with TypeScript and SVG.js

The task In a recent project cliizii.com, a client wanted to have a drawing board in a browser where multiple users could interact. They already had a working whiteboard that we would have to redesign and improve according to their needs. The problem When we looked at the whiteboard’s code, we immediately realized that it wouldn’t work in the long term. The library version being used was outdated, and a lot of the source code could be improved, since new patterns had appeared in that area. The update to the newest version wasn’t possible without digging into the version history. The solution After talking with the client, we got approval to start over from scratch. But that raised a few questions – Canvas or SVG? Are there ready-to-go implementations? If not, what libraries could we use for our own implementation? Canvas or SVG? The first question we addressed was whether to use Canvas or SVG. We dug into Google to search for ways that Canvas and SVG were being used and the differences between them. Then we decided which was the best for our needs. We found this article that summarizes our research well. Here are the relevant things for our drawing board that we discovered:

• Canvas is resolution-dependent, so drawings don’t scale cleanly. Supporting mobile screens would have been harder to implement.

• SVG elements allow us to interact with them (different DOM events, CSS styles, etc.).
• Because SVG is an XML format, it makes saving to a database pretty easy. This also helps us create PDFs from the drawing board.

After all our research, SVG became the obvious choice, and the finished whiteboard went live on cliizii.com. Ready-to-go or custom implementation? Because we didn’t find any ready-to-go libraries, we had to implement one ourselves. The next thing we searched for were libraries that make SVG interactions easy for developers. The big three were Raphaël, Snap.svg and SVG.js . Raphaël We almost immediately discarded this library because it was rarely maintained and had several open issues on GitHub. We also didn’t like the documentation. This was the library that was used in the client’s existing whiteboard. Snap.svg Snap.svg was our initial library of choice. It was updated regularly and had more stars on GitHub than SVG.js. It had decent documentation and nice examples, and overall everybody on our team was optimistic about using it. So, we went with Snap.svg and overlooked SVG.js completely, as it was just beginning to gain popularity. With Snap.svg, we had a working example with WebSockets in no time, and implementation went pretty smoothly. At least, that’s what we thought at the time. When our QA started testing our drawing board, we discovered several issues. Firstly, the calculations weren’t 100% accurate when we wanted to resize or rotate the shapes, so we had to recheck the math. This was our fault. Secondly, it wasn’t running the same way on all browsers. On Firefox, it was using a lot of memory and the browser was lagging. On IE, it wasn’t working at all. After that, we decided to give SVG.js a try. SVG.js After giving SVG.js another chance, we found out that it is modular and you can add already made modules easily. It turned out that all the main features we needed were already made – draw, select, resize, drag. All we had to do was link them together, add our history control system (undo/redo), add permissions to actions and make it work with WebSockets. We were feeling dumb for overlooking this library.

Result

Users could try the whiteboard with a free trial at cliizii.com. That site is no longer online. Thank you! Update (October 2026): This 2017 project used SVG.js 2 and its draw, select, resize and drag plugins. SVG.js 3, released in December 2018, moved to the npm package @svgdotjs/svg.js, split the library into ES modules and changed parts of the API (for example, SVG.Doc became SVG.Svg). The 3.x line and its plugins are still maintained under the @svgdotjs scope (see the SVG.js installation guide).