What is KnotenSVG?
KnotenSVG is a free, web-based vector editor created to bridge the gap between simple drawing programs and complex desktop CAD software. Traditional vector applications like Adobe Illustrator or Inkscape can be overwhelming for students and beginners who just want to layout, dimension, and cut projects on a laser engraver or vinyl plotter.
KnotenSVG is engineered for simplicity. Users work directly in physical units (millimeters) with predefined workspace laser beds (e.g. 900x600 mm Mira 9, 250x250 mm Brother Scan'N'Cut). It snaps to full 1.0 mm increments by default to make element placement effortless for learners, while offering 0.1 mm precision for detailed projects.
Behind the Project
I work as an educator (pædagog) at a public school in Denmark, where I teach kids basic makerspace tech and laser cutting.
Getting kids started with vector design has always been a pain. Full desktop tools like Inkscape or Illustrator are way too cluttered for beginners (and don't run on cheap school Chromebooks anyway). On the flip side, most web tools require student logins, cloud storage, or paid accounts—which doesn't fly with strict Danish and EU school privacy rules.
Since I'm an educator rather than a professional developer, I started building my own lightweight alternative with the help of AI coding tools.
Work-in-Progress & Bug Reporting
KnotenSVG is fully usable and ready for real laser cutting and plotting projects, but it is also an active work-in-progress. Occasional quirks, layout edge cases, or browser nuances are to be expected as new features and optimizations are continuously added.
To help improve the editor, there is a built-in Bug Tracker directly in the app. Look for the Bug icon with the WIP badge ( WIP) in the top header of the editor. You can report unexpected behaviors, attach screenshots, track bug fixes, or suggest new features with a single click.
Privacy & 100% Local Processing
KnotenSVG is built from the ground up with a strict privacy-first architecture to protect user and student data:
- 100% Local Processing & Storage: All user-created projects, vector calculations, geometry edits, custom font loads, and SVG exports are processed and stored locally directly inside your browser. No private project data is ever sent to external cloud servers.
- KnotenSVG Classroom (Non-GDPR File Exchange): The optional Classroom portal allows students and teachers to exchange design files and anonymous project submissions without creating student accounts. To maintain strict data hygiene, all classroom files and inactive classes are automatically deleted after 30 days of inactivity.
- No Third Parties & Zero Cookie Tracking: No data is ever shared or sold to third parties. KnotenSVG uses no tracking cookies, no marketing scripts, and no external telemetry.
Core Features & Capabilities
Explore the powerful tools engineered directly into KnotenSVG:
Advanced Node & Bézier Editor
Manipulate vector path nodes, adjust curve control handles, convert sharp angles to smooth curves, and delete unwanted vertices seamlessly.
Typography & Text Along Path
Access Google Fonts, upload custom TTF files, tune letter spacing, and instantly flow text along any open curve or line.
Smart Shapes & Fillet Offsets
Edit rounded rectangle corner radii non-destructively, convert primitive shapes into editable paths, and generate offset paths for laser kerf compensation.
Layer Manager & Color Operations
Organize vector elements into layers with custom stroke colors (red for vector cut, black for engrave) matched to laser cutting software presets.
Inkscape-Matched Controls
Hold Shift or Ctrl while dragging handles to lock aspect ratio, scale symmetrically around center, or snap drawing lines to 15-degree increments.
Shared Community Gallery
Publish templates to the public community showcase, search templates by popularity, and track project download metrics.
Classroom & Teacher Workflows
KnotenSVG is optimized for schools, FabLabs, and STEAM workshops. Teachers can manage student submissions without needing student login accounts or complex file server setups.
File Compatibility & Formats
KnotenSVG supports industry-standard formats for seamless workflow integration with machine controllers:
Clean SVG Export (`.svg`)
Generates clean, laser-ready SVG vector code with embedded project metadata compatible with LightBurn, RDWorks, LaserCut, Cricut Design Space, and Inkscape.
Project Files (`.json` & `.svg`)
Save and reload complete project states including layer structures, custom font settings, node geometry, and history steps.
Behind the Name & Logo
I have always enjoyed untying knots and solving complex challenges—this project is one of many. To "cut through" the knot of complicated CAD software, scissors felt like the perfect symbol. Scissors were also the best available icon in Aula (the Danish school communication system), where scissors are used to represent our school makerspace.
Coming from Sydslesvig (the Danish minority region in Northern Germany), I wanted to weave some German heritage into the project identity. That is how the name KnotenSVG came to life (Knoten meaning knot in German).
Open Source Credits & Resources
KnotenSVG is made possible thanks to fantastic open-source projects, vector libraries, and public asset repositories. We gratefully acknowledge and credit these core resources:
Paper.js
Vector EngineThe vector graphics scripting framework powering KnotenSVG's 2D canvas, curve mathematics, Bézier node segment editing, and Boolean path operations (unite, intersect, subtract, exclude).
opentype.js
Font GeometryJavaScript parser for OpenType and TrueType font files. Used to extract native vector glyph path outlines, power typography along curves, and convert text into editable laser paths.
ImageTracer.js
Bitmap TracingA raster-to-vector image tracing library by András Jankovics. Enables KnotenSVG's image trace plugins, webcam drawing capture, and automatic raster-to-SVG path outline conversion.
Lucide Icons
UI IconographyA beautiful, consistent open-source icon set. Provides all clear vector iconography across the KnotenSVG workspace header, toolbar tools, modal dialogs, and property panels.
SVG Silh
Vector ClipartAn extensive public domain (CC0) collection of free vector silhouettes and clipart icons. Powers the built-in Silhouette plugin library for classroom project templates.
Google Fonts
TypographyOpen-source font collection providing clean, laser-friendly typefaces for education and crafting, fully localized and bundled for offline and in-browser execution.
Inkscape
Control ReferenceRenowned professional open-source vector graphics editor. Served as our core control and keyboard shortcut reference (Shift/Ctrl modifier conventions, Bézier node editing) to teach students transferable vector skills that ease the transition to professional desktop CAD tools.
Tinkercad
UX InspirationAutodesk's popular browser-based 3D modeling environment for education. Inspired KnotenSVG's intuitive on-canvas dimension handles, visual bounding box controls, and the iterative "Smart Duplicate" workflow.
Google Antigravity
AI DevelopmentGoogle DeepMind's advanced agentic coding environment. Used to architect, develop, debug, and maintain the KnotenSVG codebase and interactive vector algorithms.