SSVG
Scalable Scalable Vector Graphics
Effortlessly convert SVG data visualizations to performant canvas renderings.
Huge Performance Gains
SVG is slow, especially for rendering many data points. SSVG can increase performance by up to 5X.
Nothing New to Learn
Create performant canvas rendered visualizations from existing D3 SVG code that you know and love.
Easy to Use
Just drop a few lines of code into your visualization to get SSVG working. Configuration is minimal.
Get Started
Using SSVG to convert your D3 SVG data visualization into a performant canvas visualization couldn’t be easier.
For the simplest use cases, consider using the Automatic Version
Include the following code snippet above your D3 code to initialize SSVG with the default options:
<script src="https://ssvg.io/ssvg-auto.js"></script>
That's all that's necessary. SSVG should work automatically!
For more control over how SSVG works, use the Standard Version
Step 1: Include SSVG in Your Project
You can download the latest version of SSVG from GitHub or use a SSVG CDN.
A simple way to install SSVG is to add a script tag to your HTML page that links to the SSVG CDN:
<script src="https://ssvg.io/ssvg.js"></script>
Step 2: Initialize SSVG
Include the following code snippet above your D3 code to initialize SSVG with the default options:
<script>
new SSVG();
</script>
Or you can pass an options object to the SSVG constructor. Information about the options object can be found in the options section of the documentation.
Note:
Currently, SSVG must be included & initialized: After D3 has been included, After the opening <body> tag, and Before the visualization code.
Featured Examples
Windmap
Compare rendering performance with and without SSVG.
Donut
Compare rendering performance with and without SSVG.
VIS Author Node Link
Compare rendering performance with and without SSVG.