@ripl/svg

SVG rendering context for Ripl: a unified API for 2D graphics rendering in the browser.

Installation

npm install @ripl/svg

Overview

This package provides an SVG implementation of Ripl's Context interface. Swap a single import to switch your entire rendering pipeline from Canvas to SVG; all elements, scenes, animations, and events work identically.

Usage

import {
    createContext,
} from '@ripl/svg';

import {
    createCircle,
} from '@ripl/web';

const context = createContext('.mount-element');

const circle = createCircle({
    fill: 'rgb(30, 105, 120)',
    cx: context.width / 2,
    cy: context.height / 2,
    radius: 50,
});

circle.render(context);

Features

• Drop-in replacement: Replace @ripl/web's createContext with @ripl/svg's and everything just works
• Efficient DOM updates: Virtual DOM reconciler minimizes DOM mutations each frame
• Full API parity: Paths, text, images, gradients, transforms, clipping, and hit testing
• Gradient support: Linear and radial gradients rendered as native SVG gradient elements

Documentation

Full documentation and interactive demos are available at ripl.run.

License

MIT