Scalable Scalable Vector Graphics: Automatic Translation of Interactive SVGs to a Multithread VDOM for Fast Rendering

Area of Science:

• Computer Science
• Data Visualization
• Human-Computer Interaction

Background:

• Scalable Vector Graphics (SVG) is a dominant web visualization language, valued for its accessibility and customizability.
• However, slow SVG rendering performance limits the complexity and smoothness of visualizations.
• Existing alternatives like Canvas and WebGL are less flexible and harder to learn.

Purpose of the Study:

• To introduce Scalable Scalable Vector Graphics (SSVG) as a solution to improve SVG rendering performance.
• To enable the creation of complex and smooth visualizations using SVG without sacrificing flexibility.
• To provide a drop-in JavaScript library for enhanced visualization performance.

Main Methods:

• SSVG translates interactive SVG visualizations into a dynamic virtual DOM (VDOM).
• It bypasses the browser's default rendering by intercepting JavaScript calls.
• Visualizations are rendered using Canvas or WebGL on a web worker, freeing the main thread.

Main Results:

• SSVG improves rendering performance by 3-9 times.
• It requires only a single line of code to implement.
• Demonstrated applicability on multiple example visualizations, including published research.

Conclusions:

• SSVG effectively addresses the performance limitations of traditional SVG.
• The de-coupling of SVG specification from rendering offers flexibility for visualization research.
• SSVG provides a practical and efficient method for creating high-performance web visualizations.