Skip to content

🌐 Browser-based SVG editor for designers & developers β€” ⚑ live code + preview, 🎨 gradients & styling, πŸ“Έ export, and πŸ€– auto compound-path separation with ID mapping.

License

Notifications You must be signed in to change notification settings

OracleMythix/VectorFusion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

VectorFusion Logo

VectorFusion

A simple, free, and open-source SVG studio for designers and developers.

Live code editing β€’ Styling & gradients β€’ Auto path separation β€’ ViewBox cropping β€’ Image export

License: MIT React TypeScript Tailwind CSS

Privacy First Offline Ready No Tracking


πŸš€ Introduction

VectorFusion is a lightweight SVG editor focused on modifying existing vector graphics β€” not drawing them from scratch.

You can:

  • View and modify SVG code in real time
  • Edit fill, stroke, gradients, opacity, and attributes
  • Delete paths and elements
  • Separate compound paths and automatically assign IDs
  • Crop the ViewBox without losing quality
  • Export to raster formats at high resolution

You cannot draw new shapes or edit vector nodes/curves. VectorFusion is designed for editing and cleaning SVGs quickly and visually β€” not illustration.

VectorFusion is 100% client-side β€” it works fully offline, and while you can upload and export files, all processing stays in your browser. Nothing is ever sent to a server.


✨ Key Features

  • ⚑ Live Code ↔ Preview β€” Monaco editor synced with an interactive SVG canvas
  • 🎨 Styling Tools β€” Fill, stroke, width, opacity, and gradient editing
  • 🧠 Auto Analyzer β€” Split compound paths and assign IDs to disconnected shapes
  • πŸ–±οΈ Click-to-Code Linking β€” Select an element in the preview to jump to its source
  • πŸ”² ViewBox Cropper β€” Resize non-destructively with drag handles or numeric inputs
  • πŸ“Έ High-Resolution Export β€” PNG / JPEG / WEBP up to 4K+ (and Beyond)
  • πŸ”’ Privacy-First β€” 100% local and offline-capable. No servers, no tracking, no telemetry.

πŸ“¦ Modules

πŸ›  Code Studio

  • Intelligent path separation + Auto-ID assignment
  • Gradient editor (linear + radial)
  • Click-to-edit inside the preview
  • Output React JSX, React Native, Data URI

βœ‚οΈ Cropper

  • Adjust X/Y coordinates, width, height
  • Drag handles for quick cropping
  • Keep-Selection/Cut-Out modes

πŸ–Ό Exporter

  • PNG / JPEG / WEBP output
  • Custom Resolution
  • Aspect ratio lock

⚑ Getting Started

git clone https://github.com/OracleMythix/VectorFusion.git
cd VectorFusion
npm install
npm run dev

πŸ›  Tech Stack

Category Tools
Framework React 19
Build Vite
Language TypeScript
Styling Tailwind CSS
Editor Monaco
Icons Lucide React

πŸ™‹ Contributing

VectorFusion is a solo project and is not accepting external pull requests at this time.
Bug reports and feature ideas are welcome via Issues.


πŸ“ License

Distributed under the MIT License.
See LICENSE for details.

Created by OracleMythix

About

🌐 Browser-based SVG editor for designers & developers β€” ⚑ live code + preview, 🎨 gradients & styling, πŸ“Έ export, and πŸ€– auto compound-path separation with ID mapping.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published