SVG Toolbelt – Interactive Demo

Why SVG Toolbelt?

Built with real-world needs in mind, from GitLab’s documentation platform to enterprise applications.

🔍

Smooth Zoom & Pan

Mouse wheel zoom with cursor precision, click-drag panning, and smooth animations.

📱

Mobile-First

Optimized touch gestures, pinch-to-zoom, and responsive UI for all devices.

♿

Accessibility Champion

WCAG 2.1 AA compliant with full keyboard navigation and screen-reader support.

🧩

Modular Architecture

Feature-based design – use only what you need. Tree-shakeable and extensible.

🪶

Zero Dependencies

Lightweight ~3KB bundle with no external libraries. Built with modern TypeScript.

🎨

Framework Agnostic

Works with React, Vue, Angular, or vanilla JS. Complete TypeScript definitions.

Interactive Demos

Try out features with real diagrams and visualizations. Works with Mermaid diagrams, custom SVGs, and any vector graphics. Use mouse wheel, drag, keyboard shortcuts (+, –, 0, arrows), or touch gestures.

Loading SVG Toolbelt v0.7.0 from CDN…

Live Configuration

Customize behavior in real time and see changes instantly.

Zoom Step (0.1)

Max Scale (10)

Controls Position

Show Controls Enable Touch Show Zoom Level

flowchart TD A[Start Process] --> B{Check Requirements} B -->|Missing| C[Gather Requirements] B -->|Complete| D[Design Phase] C --> E[Validate Requirements] E --> F{Requirements OK?} F -->|No| C F -->|Yes| D D --> G[Create Prototype] G --> H[User Testing] H --> I{Feedback Positive?} I -->|No| J[Refine Design] J --> G I -->|Yes| K[Development] K --> L[Unit Testing] L --> M[Integration Testing] M --> N{Tests Pass?} N -->|No| O[Fix Issues] O --> L N -->|Yes| P[Deployment] P --> Q[Monitor] Q --> R{Performance OK?} R -->|No| S[Optimize] S --> P R -->|Yes| T[Success!] style A fill:#e1f5fe style T fill:#e8f5e8 style O fill:#ffebee style S fill:#fff3e0 classDef processStyle fill:#bbdefb,stroke:#1976d2,stroke-width:2px classDef decisionStyle fill:#fff3e0,stroke:#f57c00,stroke-width:2px classDef successStyle fill:#c8e6c9,stroke:#388e3c,stroke-width:2px classDef errorStyle fill:#ffcdd2,stroke:#d32f2f,stroke-width:2px class G,K,L,M,P,Q processStyle class B,F,I,N,R decisionStyle class T successStyle class O,S errorStyle

Project Timeline

Large Gantt charts with zoom and pan for better project visibility.

gantt title SVG Toolbelt Development Plan dateFormat YYYY-MM-DD axisFormat %Y/%m/%d section Phase 1: Foundation & Core Features Market Research & Analysis :crit, done, p1_res, 2024-01-01, 30d Technical Design Document :crit, done, p1_tdd, after p1_res, 20d Core Architecture Setup :crit, done, p1_arch, after p1_tdd, 25d Basic Zoom/Pan Implementation :crit, done, p1_zoom, after p1_arch, 35d Unit & Integration Tests :crit, done, p1_test, after p1_zoom, 20d section Phase 2: Advanced Features & Accessibility Touch Gesture Support :crit, active, p2_touch, after p1_test, 30d Keyboard Navigation :crit, active, p2_keys, after p1_test, 25d UI Controls Implementation :crit, p2_ui, after p2_touch, 20d Accessibility (WCAG) Audit :crit, p2_a11y, after p2_keys, 15d Initial Documentation :p2_docs, after p2_ui, 20d section Phase 3: Polish & Release Demo Page Development :active, p3_demo, after p2_docs, 25d Cross-Browser Testing :p3_cbt, after p3_demo, 15d Performance Optimization :p3_perf, after p3_cbt, 10d Beta Release & Feedback :p3_beta, after p3_perf, 20d Final Release :milestone, p3_final, after p3_beta, 5d

System Architecture

Framework-agnostic SVG enhancement - works with any SVG, not just Mermaid diagrams.

Sales Analytics Dashboard

Interactive data visualization - zoom into specific time periods and data points.

Quick Start Guide

Get started with SVG Toolbelt in just a few lines of code.

# Installation

npm install svg-toolbelt

# Or with yarn

yarn add svg-toolbelt

// Basic Usage

import { initializeSvgZoom } from 'svg-toolbelt';

import 'svg-toolbelt/dist/svg-toolbelt.css';

// Enhance all .mermaid containers

initializeSvgZoom('.mermaid');

// Advanced Configuration

import { SvgZoom } from 'svg-toolbelt';

const container = document.querySelector('#my-diagram');

const enhancer = new SvgZoom(container, {

minScale: 0.2,

maxScale: 8,

controlsPosition: 'bottom-right',

enableKeyboard: true

});

enhancer.init();

Ready to Enhance Your SVGs?

Join developers making their diagrams more accessible and user-friendly.

View on GitHub Install from NPM