From SVG to Canvas – part 1: making Felt faster

Felt transitioned from using SVGs with React to Canvas for rendering interactive maps to address performance challenges associated with rendering thousands of elements simultaneously. The move was driven by the need to improve speed and smoothness, particularly when handling complex maps with tasks like zooming and panning. SVGs required React to frequently create and update elements, which led to delays and visual artifacts. Canvas, on the other hand, redraws everything from scratch each frame, providing a stable frame rate and resolving many performance issues. Felt employed several optimizations, such as caching projected shapes and rendering lower-detail versions of elements at low zoom levels, to enhance Canvas performance. This transition was supported by comprehensive end-to-end testing, feature flags, and performance benchmarks, ensuring a seamless switch that resulted in faster and more responsive maps, especially on lower-end devices and mobile platforms.