Parse SVG markup into GPU-ready geometry and render it in the browser with WebGPU.
Website · Playground · Guide · API reference · GitHub
npm install svg2gpu
<div id="preview" style="width: 640px; height: 480px"></div>
<script src="https://cdn.jsdelivr.net/npm/svg2gpu@1.0.7/lib/svg2gpu.min.js"></script>
<script>
const { Svg2GPU } = window.svg2gpu;
const renderer = new Svg2GPU("preview", {
svg: `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2e9dfe" />
</svg>`,
fit: "contain",
antialias: true,
});
renderer.ready.catch(console.error);
</script>
import { Svg2GPU } from "svg2gpu";
const renderer = new Svg2GPU("preview", {
svg,
antialias: true,
background: [1, 1, 1, 0],
fit: "contain",
flattenTolerance: 0.25,
});
await renderer.ready;
Use renderer.update(svg) when the SVG changes, renderer.resize() after its container changes size, and renderer.destroy() during cleanup.
To build geometry without creating a WebGPU renderer:
const scene = Svg2GPU.compile(svg);
console.log(scene.stats);
Rendering requires a browser with WebGPU support. CommonJS, ES module, and TypeScript declaration files are included.
See the complete guide for React and vanilla JavaScript setup, option descriptions, and lifecycle examples. Browse the Svg2GPU API for exact signatures.