VectorGen AI Studio

A next-generation, high-performance SVG editor and generator powered by Google Gemini 2.5. This application combines a professional vector editing suite with state-of-the-art generative AI to allow users to create, edit, and export high-quality SVG graphics directly in the browser.

---

🇺🇸 English Documentation

Overview

VectorGen Studio is designed for designers and developers who need a quick, powerful tool to generate vector assets. It features a "dark glass" aesthetic UI, mobile-responsive design, and deep integration with the Gemini API for text-to-svg generation and refinement.

Key Features

• AI-Powered Generation: Create complex SVGs from simple text prompts using Gemini 2.5 Flash.
• Smart Refinement: Select existing elements and use AI to modify them (e.g., "Change color to neon blue", "Make edges rounder").
• Professional Editor: Full suite of tools including Rectangle, Circle, Path (Pen tool), and Text.
• Mobile Optimized: A responsive layout that transforms from a desktop workspace to a mobile app experience.
• Properties Panel: Detailed control over fill (solid/gradient), stroke, opacity, filters (blur/shadow), and transformations.
• Internationalization: Fully localized in English and German.

Installation

1. Clone the repository.
2. Install dependencies: npm install
3. Set up your API Key in .env: API_KEY=your_google_gemini_key
4. Run the development server: npm run dev

Usage

• Toolbar: Located on the left (desktop) or bottom (mobile). Select tools to draw on the canvas.
• AI Panel: Click the "Sparkles" icon. Enter a prompt to generate a new graphic.
• Properties: Select any element on the canvas to open the properties panel on the right.
• Shortcuts:
  • Delete: Remove selected element.
  • Ctrl+Z: Undo.
  • Ctrl+Y: Redo.

---

🇩🇪 Deutsche Dokumentation

Übersicht

VectorGen Studio ist ein SVG-Editor der nächsten Generation, der für Designer und Entwickler entwickelt wurde. Er kombiniert eine professionelle Vektor-Suite mit modernster generativer KI (Google Gemini 2.5), um hochwertige SVG-Grafiken direkt im Browser zu erstellen und zu bearbeiten.

Hauptfunktionen

• KI-Generierung: Erstellen Sie komplexe SVGs aus einfachen Textbeschreibungen mit Gemini 2.5 Flash.
• Intelligente Verfeinerung: Wählen Sie Elemente aus und lassen Sie diese durch KI ändern (z.B. "Farbe in Neonblau ändern").
• Professioneller Editor: Werkzeuge für Rechtecke, Kreise, Pfade (Stift-Werkzeug) und Text.
• Mobile Optimierung: Ein responsives Layout, das sich nahtlos von Desktop zu Mobile anpasst.
• Eigenschaften-Panel: Detaillierte Kontrolle über Füllung (Vollton/Verlauf), Kontur, Deckkraft, Effekte (Weichzeichner/Schatten) und Transformationen.
• Mehrsprachigkeit: Vollständig lokalisiert in Deutsch und Englisch.

Installation

1. Repository klonen.
2. Abhängigkeiten installieren: npm install
3. API Key in .env setzen: API_KEY=dein_google_gemini_key
4. Entwicklungsserver starten: npm run dev

Bedienung

• Werkzeugleiste: Links (Desktop) oder unten (Mobil). Wählen Sie Werkzeuge zum Zeichnen.
• KI-Panel: Klicken Sie auf das "Funken"-Symbol. Geben Sie einen Prompt ein, um eine Grafik zu generieren.
• Eigenschaften: Klicken Sie auf ein Element auf der Leinwand, um das Panel rechts zu öffnen.
• Tastenkürzel:
  • Entf: Element löschen.
  • Strg+Z: Rückgängig.
  • Strg+Y: Wiederholen.

---

© 2025 VectorGen AI Studio