Parsect is an SVG-to-Canvas converter focused on clarity, performance, and control.
It parses raw SVG markup and converts shapes, styles, and transforms into structured JSON that can be drawn using the Canvas Path2D API.
Built to serve developers who want clean, direct rendering without bloated libraries or black-box behavior.
Most SVGs are bloated. Most renderers are too generic.
Parsect focuses on canvas-first SVG rendering, optimized for games, apps, or visual tools where performance and predictability matter.
It converts only what you need—shapes, paths, styles—and gives you full control over how they render.
- Converts SVG into structured JSON (shapes + styles)
- Outputs Canvas
Path2Dinstructions - Supports:
path,rect,circle,ellipse,line,polygon,polylinefill,stroke,opacity, transforms- Linear gradients
- Skips unnecessary nodes for cleaner output
- Web-based visual tool: parsect.zyrab.dev
Coming soon: NPM package
For now, clone or copy the repo:
git clone https://github.com/Zyrab/Parsect.git🚀 Usage
import { parseSVG, toPath2D, drawShape } from "./parsect/index.js";
// Your raw SVG string
const raw = `<svg viewBox="...">...</svg>`;
// Step 1: Parse it
const { paths } = parseSVG(raw);
// Step 2: convert and cache paths and stylings
const { dims, shapes } = toPath2D(path);
// shapes dimenstions that is very usfull with transformation and scaling
const width = dims.w;
const heigth = dims.h;
// step 3: in canvas u can draw using
drawShape(ctx, shape);/parsect
├── parser/ # → SVG -> JSON
├── renderer/ # → JSON -> Path2D
├── utils/ # → Gradient/style helpers
├── debug/ # → Shape isolators
└── index.js # → Main exportChek to do file for to see where we are now
→ Here
- Vanilla JS
- Canvas API
- Lots of SVG specs
- Curiosity & obsession with clean visual pipelines
Hi, I’m Zyrab.
I build tools, engines, and educational stuff—sometimes for kids, sometimes for devs like you. This project is part of a larger effort to build SVecter: a 2D canvas game engine with SVG editing support.
Pull requests are welcome! If you're into optimization, graphics tooling, or just curious about SVG internals, feel free to help.
→ Read the Contributing Guide.