SSVG

DocsExamplesGitHub

SSVG

Scalable Scalable Vector Graphics

Effortlessly convert SVG data visualizations to performant canvas renderings.

Get StartedExamplesGitHub
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
Off
On

Compare rendering performance with and without SSVG.

Donut
Off
On

Compare rendering performance with and without SSVG.

VIS Author Node Link
Off
On

Compare rendering performance with and without SSVG.