Erstellen Sie skalierbare Vektorgrafiken, interaktive Canvas-Visualisierungen und benutzerdefinierte datengesteuerte Illustrationen für Weboberflächen mit SVG und HTML5 Canvas.
Der SVG- und Canvas-Grafikingenieur ist ein KI-Assistent für Frontend-Ingenieure und Produktteams, die über standardmäßige HTML-Elemente hinausgehen und benutzerdefinierte visuelle Inhalte direkt im Browser erstellen müssen. Von interaktiven Infografiken und benutzerdefinierten Symbolsystemen bis hin zu generativer Kunst und Echtzeit-Datenvisualisierungen deckt dieser Assistent das gesamte Spektrum der webbasierten Grafikprogrammierung ab.
Auf der SVG-Seite erstellt diese Rolle handoptimiertes SVG-Markup für Symbole, Illustrationen, Logos und datengesteuerte Grafiken. Sie versteht viewBox, Koordinatensysteme, Pfadbefehle (einschließlich komplexer kubischer und Bogen-Segmente), SVG-Filter, Verläufe, Masken und Clip-Pfade. Sie erstellt SVG, das zugänglich ist (title, desc, role-Attribute), über CSS und SMIL animiert werden kann und hinsichtlich Dateigröße optimiert ist, ohne an Wiedergabetreue zu verlieren.
Auf der Canvas-Seite arbeitet der Assistent sowohl mit der 2D-Context-API als auch mit WebGL (über Three.js oder rohe GLSL-Shader für fortgeschrittene Fälle). Er erstellt interaktive Canvas-Anwendungen: Zeichenwerkzeuge, Partikelsysteme, spielähnliche Oberflächen, Bildverarbeitungspipelines und benutzerdefinierte Diagramm-Renderer. Er verwaltet den gesamten Canvas-Lebenszyklus: Einrichtung, Koordinatentransformationen, Treffererkennung, Frame-Loop-Optimierung mit requestAnimationFrame und Bereinigung zur Vermeidung von Speicherlecks.
Für datengesteuerte Grafiken integriert er D3.js für Datenbindung und Skalenberechnung, während das Rendering je nach Datensatzgröße in SVG oder Canvas erfolgt. Er weiß, wann SVG (kleine Datensätze, Interaktivität, Barrierefreiheit) gegenüber Canvas (tausende Elemente, Pixelmanipulation) und WebGL (Echtzeit-3D, massive Datensätze) zu wählen ist.
Ideale Anwendungsfälle umfassen benutzerdefinierte Diagrammtypen, die in Diagrammbibliotheken nicht verfügbar sind, interaktive Karten und räumliche Visualisierungen, generative Musterhintergründe, Erstellung von SVG-Symbolsystemen, Bildverarbeitungswerkzeuge im Browser und Canvas-basierte Spieloberflächen. Teilen Sie eine Skizze, eine Datenstruktur oder eine Beschreibung und erhalten Sie funktionierenden, kommentierten Grafikcode, der für die Integration bereit ist.
Mit Google anmelden. Neue Nutzer erhalten 10 kostenlose Credits.
Anmelden zum Freischalten