Deterministic In-Browser Vectorization & Scalable Vector Graphics Synthesis Engine
Launch C2Vector Studio • Algorithm Workflow • About & FAQ
C2Vector is a high-precision, client-side vector synthesis application and Progressive Web App (PWA). It converts raster images (PNG, JPEG, WebP, AVIF), logos, camera photographs, and monograms into mathematically rigorous, infinitely scalable W3C SVG 1.1 vectors and master print-ready vector PDF suites—executing 100% inside your browser's native Web Workers.
Most online vectorizers suffer from one of three fatal flaws:
- Predatory Cloud Paywalls: Forcing subscriptions or holding your high-resolution exports hostage.
- Cloud Privacy Leaks: Uploading private company logos, sensitive intellectual property, or personal photos to opaque remote servers.
- Generative AI Hallucinations: Wrapping uncalibrated diffusion or machine-learning models that distort straight lines into wavy noodles, smudge sharp corners, and invent phantom contours.
C2Vector guarantees 0% Generative AI and 100% Mathematical Determinism. Every vector curve, color plate, and boundary is calculated using peer-reviewed computer vision algorithms running entirely in local device memory.
- All processing occurs in dedicated browser Web Workers (
worker.js). - Images never travel across the network to any server, bucket, or third-party API.
- All in-memory buffers and ImageData representations are immediately reclaimed when the browser tab is closed.
- 90-Degree Corner Preservation: Tightened straight-line tolerance (
optTolerance: 0.08) and aggressive corner retention (alphaMax: 0.15) ensure crisp right angles on lettering, sharp brackets, and tiny punctuation marks like the dot on an 'i'. - Bypass Bilateral Blurring: Skips Gaussian pre-smoothing to prevent softening of crisp corporate vectors.
- Adaptive Natural Spot Color Discovery: Clusters anti-aliased transition pixels into dominant spot colors with a safety ceiling of up to 32 colors without artificial color clipping.
- 1-Click Transparent Background Knockout: Instantly isolates logos against pure white or checkerboard transparent backdrops.
Decomposes input graphics into production-ready manufacturing layers:
- 1-bit Otsu Monochrome Silhouette: Variance minimization for pure high-contrast vinyl cutting.
- 4-Tone & 8-Tone Tonal Plates: Progressive density plates calibrated via Tone Match Index (TMI).
- Inverted Plates: Negative print suites optimized for dark apparel printing and laser engraving.
- Bridge-Connected Cut Stencils: Structural bridges preventing "island fallout" during physical cutting.
- In-browser compilation using
jsPDFandsvg2pdf.js. - Exports all active artboards into a single multi-page PDF document (
master_vector_suite.pdf). - 100% Pure Vector Bézier Streams: Infinite print scalability with strictly 0 raster compression artifacts.
- Stateful 360° Pan-Zoom: Smooth hardware-accelerated pan, touch-drag, and wheel zoom from 1x up to 8x magnification with negative space overflow protection.
- 12 Specialized Artboards: Rapid switching between Faithful Master, Vibrant Print, Chromatic Glaze, Tonal Plates, and 100% Pixel Matrices with strictly 0.00px Layout Shift (CLS).
- Dynamic Swatch Palette: Real-time hex color swatches with one-click clipboard copying and toast feedback.
- Caches all runtime assets via Service Worker (
sw.js). - Installable as a standalone app on macOS, Windows, Linux, Android, and iOS.
- Multi-aspect ratio OpenGraph card suite (<100KB) and Google Search Central multiple-of-48px favicons.
graph TD
A["Raw Input Image (PNG/JPEG/WebP/AVIF)"] --> B["Step 1: Bicubic Resampling & Bilateral Filter"]
B --> C["Step 2: Tonal Decomposition & Otsu Thresholding"]
B --> D["Step 3: Sub-Pixel Canny Edge Gradient Filter"]
B --> E["Step 4: CIELAB Color Space Quantization"]
C & D & E --> F["Step 5: Potrace Continuous Bézier Spline Fitting"]
F --> G["Step 6: Translucent Chromatic Glaze (70-80% Opacity)"]
G --> H["Master Scalable SVG Vectors"]
G --> I["Master Vector PDF Compilation (Pure Bézier)"]
- Step 1 — Resampling & Bilateral Edge-Preserving Smoothing: High-order bicubic Hermite interpolation upscales input images to 4x resolution. A bilateral filter applies Gaussian spatial and photometric domain weighting: $$\text{BF}[I]p = \frac{1}{W_p} \sum{q \in S} G_{\sigma_s}(|p - q|) , G_{\sigma_r}(|I_p - I_q|) , I_q$$
-
Step 2 — Tonal Studies & TMI Calibration:
Decomposes lightness into discrete tonal thresholds using Otsu's variance minimization and checks Tone Match Index (
$TMI \ge 0.88$ ) for monotonic luminosity grading. -
Step 3 — Sub-Pixel Canny Edge Gradients:
Calculates horizontal and vertical Sobel gradients (
$G_x, G_y$ ), detects local intensity maxima along gradient directions, and applies hysteresis thresholding ($T_{\text{low}}, T_{\text{high}}$ ) to generate 1-pixel hairline boundary contours. - Step 4 — CIELAB Quantization: Maps RGB pixels into perceptually uniform CIE $L^a^b^$ color space. Computes Delta E differences ($\Delta E_{ab}^$) to group anti-aliased transition pixels into distinct tonal plates without chromatic muddying.
-
Step 5 — Schneider-Ramer-Peucker & Potrace Curve Tracing:
Traces boundary polygons, determines optimal knot vectors, and fits continuous cubic Bézier splines maintaining
$G^1$ geometric continuity:$$\mathbf{B}(t) = (1-t)^3 \mathbf{P}_0 + 3(1-t)^2 t \mathbf{P}_1 + 3(1-t) t^2 \mathbf{P}_2 + t^3 \mathbf{P}_3, \quad t \in [0, 1]$$ - Step 6 — Multi-Page Vector PDF Export: Compiles SVG vector streams into PDF drawing commands via Skia/PDF geometry primitives in local client memory.
c2vector/
├── public/ # Static unbundled assets copied directly to dist/
│ ├── favicon.ico # Standard root favicon
│ ├── manifest.webmanifest # Progressive Web App manifest
│ ├── sw.js # Offline Service Worker cache (c2vector-v7)
│ ├── robots.txt # Search crawler directives
│ ├── sitemap.xml # Canonical clean XML sitemap
│ ├── .nojekyll # GitHub Pages static asset bypass
│ ├── assets/
│ │ ├── icons/ # Favicon suite (48, 96, 192, 512, apple-touch)
│ │ ├── og/ # Multi-aspect OpenGraph cards (<100KB, Golden & B&W)
│ │ ├── sample_logo.png # Built-in demo logo graphic
│ │ └── sample_photo.png # Built-in demo photography artwork
│ └── vendor/
│ ├── jspdf.umd.min.js # Client-side PDF generator
│ └── svg2pdf.umd.min.js # SVG-to-PDF geometry converter
├── src/
│ ├── css/
│ │ └── style.css # Universal design system (Amber/Obsidian theme)
│ ├── js/
│ │ ├── app.js # Application coordinator, UI events, pan-zoom engine
│ │ └── engine/
│ │ ├── bezier-tracer.js # Continuous cubic Bézier curve tracing
│ │ ├── edge-depth.js # Canny edge detection & focus depth mapping
│ │ ├── image-ops.js # Bicubic Hermite resampling & bilateral smoothing
│ │ ├── logo-engine.js # Dedicated 90° corner & spot color optimizer
│ │ ├── pipeline.js # Systematic 6-step vector orchestration
│ │ ├── potrace.js # Client-side Potrace curve fitting port
│ │ ├── quantizer.js # CIELAB Delta E color quantization
│ │ ├── tonal-studies.js # Otsu monochrome, 4-tone/8-tone, bridge stencils
│ │ └── worker.js # Background Web Worker sandbox
│ └── vendor/ # Bundled engine vendor modules
├── index.html # Primary Studio Workbench application
├── about/
│ └── index.html # Clean URL directory endpoint (/about/)
├── workflow/
│ └── index.html # Clean URL directory endpoint (/workflow/)
├── vite.config.js # Vite multi-page build configuration
├── package.json # Project manifest & npm scripts
├── README.md # Repository documentation
├── LICENSE # Official MIT License
└── SECURITY.md # Security and vulnerability policy
git clone https://github.com/deekshithvodela/c2vector.git
cd c2vectornpm install
npm run devOpen your browser at http://localhost:5173/c2vector/.
npm run build
npm run preview# Run the complete automated test & verification suite:
npm test
# (or: node scripts/suite.mjs)
# Generate luxury OpenGraph social preview card suite:
npm run generate:og
# (or: node scripts/suite.mjs --og)To deploy the production-ready Progressive Web App to GitHub Pages (https://deekshithvodela.github.io/c2vector/):
-
Dedicated Repository (Recommended):
cd c2vector git init git add . git commit -m "feat: release c2vector production suite" git branch -M main git remote add origin https://github.com/deekshithvodela/c2vector.git git push -u origin main
- In GitHub repository Settings
$\to$ Pages, set:-
Source:
Deploy from a branch -
Branch:
main// (root)
-
Source:
- The site will be instantly live at
https://deekshithvodela.github.io/c2vector/.
- Functional Correctness: 98 / 98 automated Playwright and AST tests passing.
-
Accessibility (WCAG 2.2 Level AA): High-contrast ratios (
$\ge 4.5:1$ ), complete keyboard navigation, explicit button types,aria-hiddendecorative SVGs. - Performance: Sub-second First Contentful Paint (FCP), hoisted early font preconnects, Web Worker offloaded CPU tasks.
-
Security: Zero DOM XSS vectors, explicit HTTPS protocols,
rel="noopener noreferrer"on all external links, character entity encoded contact emails. -
Clean URLs: Universal directory routing (
/,/about/,/workflow/) without.htmlextensions.
Designed and engineered with mathematical determinism by Deekshith Vodela.
- Website: https://deekshithvodela.github.io/c2vector/
- LinkedIn: Deekshith Vodela
- Newsletter: Substack
- GitHub: @deekshithvodela
This project is licensed under the MIT License. See the LICENSE file for details.
Copyright (c) 2026 Deekshith Vodela