SVG Grafiken erzeugen mit chatGPT

Kann chatGPT guten SVG-Code erzeugen? Nein, nicht direkt. Trotzdem ist chatGPT beim Einstieg in SVG eine Hilfe. Was SVG ist und wie sich chatGPT bei der SVG-Erstellung schlägt, beleuchtet dieser Beitrag SVG Grafiken erzeugen mit chatGPT.

06.01.2023

Was ist SVG?

SVG steht für „Scalable Vector Graphics“, zu Deutsch „skalierbare Vektorgrafiken“. Das ist eine Art, Bilder im Computer darzustellen. Bilder im PNG oder JPG Format bestehen aus einzelnen Bildpunkten (Pixeln),  Bilder im SVG Format betehen aus Anweisungen, wie sie zu zeichnen sind. Das Zeichnen (Rendern) übernimmt dann eine Software wie der Browser oder Inkscape.

Gut daran ist, dass SVG-Bilder nicht an Qualität verlieren, wenn man sie größer oder kleiner macht – es bleibt scharf. SVG wird oft für Icons, Logos und andere Grafiken im Web verwendet, weil es flexibel und gut an verschiedene Bildschirmgrößen anpassbar ist. Formal ist SVG ein XML-Derivat so wie HTML (Hypertext Markup Language) oder GPX für Navigationsgeräte.

Wozu ist SVG nützlich?

Alle Bilder, die sich gut „beschreiben“ lassen und aus geometrischen Grundelementen bestehen, lasen sich einfach und effizient mit SVG erstellen. Bei Informationsgrafiken kann die Dateigröße bei SVG viel kleiner sein als die entsprechende Grüße als z.B. PNG. SVG-Dateien lassen sich leicht aus Programmen heraus erzeugen, ohne dass Fremdbibliotheken genutz werden.

Ein Anwendungskontext ist die Erstellung von Informationsgrafiken mit ETL-Prozessen. Aus Datenbeständen können mit z.B. Python-Programmen oder Programmen in der Dot-Net-Umgebung leicht ansprechende Datenvisualisierungen erzeugt werden.

Wie kann man einfach SVG-Bilder erzeugen?

Eigentlich braucht man nur einen Texteditor – das ist etwas unbequem, funktioniert aber leicht. Um zum Beispiel ein Rechteck zu zeichnen, tippt man den Befehl

<rect width="100%" height="100%" fill="#f0f0f0" />

ein.

Der Prozess wird im Folgenden erläutert und durch chatGPT unterstützt.

Ein einfacher SVG Code

Eine einfacher SVG Code, der ein Rechteck und einen Kreis zeichnet, sieht zum Beispiel wie folgt aus:
<svg width="600" height="300" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg">
<!-- Hintergrund als Rechteck -->
<rect width="600" height="300" fill="#ff0aff" />
<!-- Ein Rechteck -->
<rect x="30" y="30" width="240" height="240" fill="#ffff00" />
<!-- Ein Kreis -->
<circle cx="450" cy="150" r="120" fill="#00ffff" />
<!-- Verbindungslinie -->
<line x1="270" y1="150" x2="330" y2="150" stroke="#0a0a0a" stroke-width="6" />
<!-- Textbeschriftungen -->
<text x="300" y="20" fill="#000000" font-size="20" text-anchor="middle">Rechteck und Kreis</text>
</svg>
Listing 1: Eine einfache grafische Darstellung mit SVG farbigen Elementen

Abb. 1: grafische Repräsentation des Quelltextes aus Listing 1 z.B. im Browser Chrome

Im Wurzelknoten <svg …> </svg> ist der SVG Quelltext eingebunden. width=“600″ height=“300″ sagt, dass die Grafik bevorzugt mit 600 Pixeln Breite und 300 Pixeln Höhe dargestellt wird. viewBox=“0 0 600 300″ legt die linke obere (0 0) und die rechte untere (600 300) Ecke fest. Das muss nicht mit Höhe und Breite übereinstimmen, macht aber das Ausrechnen der Koordinaten grafikinterner Komponenten einfacher. Die Parameter für Rechtecke <rect …>, Kreise <circle …> und weiteren Elementen liest man bei Bedarf in einem Einsteigertutorial nach (siehe Quellen weiter hinten)

SVG Grafiken erzeugen mit chatGPT

Der Dialog

Mit dem folgenden Dialog wurde chatGPT aufgefordert, eine einfache Liniengrafik zu erstellen. Das Vorgehen, zweistufig vorzugehen und zunächst das Thema mit einer allgemeinen Frage zu beginnen und dann zu verfeinern, führt oft zu brauchbaren Ergebnissen.

Erste Frage

erkläre mit einfachen Worten, was SVG ist

chatGPT antwortet

SVG steht für „Scalable Vector Graphics“, zu Deutsch „skalierbare Vektorgrafiken“. Das ist eine Art, Bilder im Computer darzustellen. Aber anders als normale Bilder, die aus Pixeln bestehen, verwendet SVG Vektoren.

Vektoren sind wie mathematische Anweisungen für den Computer, um Linien, Formen und Farben zu erstellen. Das coole daran ist, dass SVG-Bilder nicht an Qualität verlieren, wenn man sie größer oder kleiner macht. Du kannst also ein SVG-Bild ganz klein auf einem Handy anzeigen lassen oder es riesig auf einem großen Bildschirm – und es bleibt scharf.

SVG wird oft für Icons, Logos und andere Grafiken im Web verwendet, weil es flexibel und gut an verschiedene Bildschirmgrößen anpassbar ist.

zweite Frage

schreibe den SVG-Quelltext für eine eingfache Liniengrafik, die den Temperaturverlauf über zwei Tage darstellt.

chatGPT antwortet

Natürlich kann ich dir helfen, den SVG-Quelltext für eine einfache Liniengrafik zur Darstellung des Temperaturverlaufs über zwei Tage zu erstellen. Hier ist ein einfaches Beispiel:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Hintergrund -->
<rect width="100%" height="100%" fill="#f0f0f0" />
<!-- X-Achse -->
<line x1="50" y1="150" x2="350" y2="150" stroke="#333" stroke-width="2" />
<!-- Y-Achse -->
<line x1="50" y1="50" x2="50" y2="150" stroke="#333" stroke-width="2" />
<!-- Temperaturdatenpunkte -->
<circle cx="100" cy="120" r="5" fill="#ff0000" />
<circle cx="200" cy="80" r="5" fill="#ff0000" />
<!-- Verbindungslinie -->
<line x1="100" y1="120" x2="200" y2="80" stroke="#0066cc" stroke-width="2" />
<!-- Textbeschriftungen -->
<text x="100" y="170" fill="#333" font-size="12" text-anchor="middle">Tag 1</text>
<text x="200" y="170" fill="#333" font-size="12" text-anchor="middle">Tag 2</text>
<text x="30" y="120" fill="#333" font-size="12" text-anchor="end">30°C</text>
<text x="30" y="80" fill="#333" font-size="12" text-anchor="end">10°C</text>
<!-- Diagrammtitel -->
<text x="200" y="30" fill="#333" font-size="16" text-anchor="middle">Temperaturverlauf</text>
</svg>

Listing 2: Von chatGPT erzeugter SVG-Quellcode für eine Liniengrafik

dritte Frage

Die Temperaturen sollen der folgenden CSV-Liste entnommen werden. Der jeweils erste Wert ist die Uhrzeit, der jeweils zweite Wert ist die Temperatur in °C. Feldtrenner ist ein „;“, jede Zeile ist ein Datensatz.
Benutze diese Daten für die grafische Visualisierung als SVG.
Zeit;Temperatur
08:00;15.1
09:00;16.4
10:00;17.0
11:00;17.6
12:00;18.0
13:00;18.0
14:00;17.9
15:00;17.7
16:00;17.3

chatGPT antwortet

Natürlich, ich kann den SVG-Quelltext basierend auf den bereitgestellten Daten erstellen. Hier ist der angepasste Code:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Hintergrund -->
<rect width="100%" height="100%" fill="#f0f0f0" />
<!-- X-Achse -->
<line x1="50" y1="150" x2="350" y2="150" stroke="#333" stroke-width="2" />
<!-- Y-Achse -->
<line x1="50" y1="50" x2="50" y2="150" stroke="#333" stroke-width="2" />
<!-- Temperaturdatenpunkte -->
<circle cx="100" cy="120" r="5" fill="#ff0000" />
<circle cx="150" cy="110" r="5" fill="#ff0000" />
<circle cx="200" cy="100" r="5" fill="#ff0000" />
<circle cx="250" cy="90" r="5" fill="#ff0000" />
<circle cx="300" cy="80" r="5" fill="#ff0000" />
<!-- Verbindungslinien -->
<line x1="100" y1="120" x2="150" y2="110" stroke="#0066cc" stroke-width="2" />
<line x1="150" y1="110" x2="200" y2="100" stroke="#0066cc" stroke-width="2" />
<line x1="200" y1="100" x2="250" y2="90" stroke="#0066cc" stroke-width="2" />
<line x1="250" y1="90" x2="300" y2="80" stroke="#0066cc" stroke-width="2" />
<!-- Textbeschriftungen -->
<text x="100" y="170" fill="#333" font-size="12" text-anchor="middle">08:00</text>
<text x="150" y="170" fill="#333" font-size="12" text-anchor="middle">09:00</text>
<text x="200" y="170" fill="#333" font-size="12" text-anchor="middle">10:00</text>
<text x="250" y="170" fill="#333" font-size="12" text-anchor="middle">11:00</text>
<text x="300" y="170" fill="#333" font-size="12" text-anchor="middle">12:00</text>
<text x="30" y="120" fill="#333" font-size="12" text-anchor="end">18°C</text>
<text x="30" y="80" fill="#333" font-size="12" text-anchor="end">15°C</text>
<!-- Diagrammtitel -->
<text x="200" y="30" fill="#333" font-size="16" text-anchor="middle">Temperaturverlauf</text>
</svg>

Listing 3: von chatGPT erzeugter SVG-Quellcode für eine Liniengrafik mit konkreten Werten

In diesem Beispiel sind die Datenpunkte und Verbindungslinien entsprechend den Uhrzeiten und Temperaturen in deiner CSV-Liste positioniert. Du kannst die Positionen weiter anpassen oder das Skript automatisieren, wenn du eine dynamische Generierung basierend auf den Daten möchtest.

Das Ergebnis

Abb.2 zeigt, wie der von chatGPT erzeugte SVG-Quellcode im Browser aussieht.

Abb. 2; Eine formal richtige, aber inhaltlich sinnlose Liniengrafik gem. Listing 3

Fazit

Um einen formal richtigen SVG-Rohling in SVG zu erhalten, der dann weiterbearbeitet wird, ist die Zuhilfenahme von chatGPT hilfreich. Allerdings plappert chatGPT nur SVG-Code nach, ohne ein Verständnis für den Inhalt und den Anwendungskontext einer Visualisierung zu entwickeln. Damit ähneln die von chatGPT erzeugten Artefakte erstaunlich den Dialogverläufen mit Menschen mit Demenz.

Anhang

Quellen

chatGPT

https://chat.openai.com/

Weiter Beiträge mit chatGPT, nicht nur zur Programmierung

Kartoffelkanone bauen mit chatGPT

Mit chatGPT programmieren in HTML und PHP

Vom Warp-Antrieb zum Imker-Aktivitätenkalender – ein Brainstorming mit chatGPT

chatGPT und die Literatur zu Imkerei und Honigbienen

SVG Tutorials

Übersicht von Tutorials auf selfhtml: https://wiki.selfhtml.org/wiki/SVG/Tutorials

Ein HTML-Seminar, das SVG beleuchtet: https://www.html-seminar.de/svg-in-websites-nutzen.htm

Glossar

chatGPT

ChatGPT ist ein computergesteuertes Programm, das entwickelt wurde, um Konversationen zu führen, die wirken, als würde ein Mensch sie führen. Es basiert auf künstlicher Intelligenz und wurde von OpenAI erstellt. GPT steht für „Generative Pre-trained Transformer“, was auf die Technologie hinweist, die verwendet wird, um Texte zu analysieren und darauf zu antworten. ChatGPT wurde darauf trainiert, mit Menschen auf natürliche Weise zu chatten. chatGPT kann auf Fragen antworten, Anweisungen verstehen und Informationen bereitstellen. Dabei verwendet chatGPT vorab trainierte Modelle, um die Bedeutung von Texten – in Ansätzen – zu verstehen und sinnvoll klingende Antworten zu generieren. Es ist wichtig zu beachten, dass ChatGPT keine eigenen Gedanken oder Emotionen hat, sondern nur auf Basis seiner Programmierung agiert. Ebenso entwickelt chatGPT kein eigentliches Verständnis für den Dialog. Daher ist das „Prompt Engineering“ wichtig, um chatGPT brauchbare Ergebnisse zu entlocken.

Datenvisualisierung

Datenvisualisierung ist ein Prozess, bei dem Daten in grafische Formen wie Diagramme, Grafiken oder Tabellen umgewandelt werden, um komplexe Informationen auf eine leicht verständliche Weise darzustellen.  Datenvisualisierungen bieten mehrere Vorteile:

1. Klarheit und Verständlichkeit: Durch die Verwendung von Diagrammen und Grafiken können komplexe Datenmengen in leicht verständliche visuelle Darstellungen umgewandelt werden. Dies erleichtert z.B. das Verständnis komplexer betriebswirtschaftlicher Zusammenhänge.
2. Schnelle Analyse: Visuelle Darstellungen ermöglichen es, Daten schnell zu analysieren und Muster, Trends oder Ausreißer leichter zu erkennen. Dies ist besonders nützlich bei der Betrachtung von Finanzdaten, Markttrends oder Leistungsindikatoren.
3. Entscheidungsunterstützung: Datenvisualisierung bietet eine effektive Möglichkeit, Entscheidungsträger bei der Interpretation von Daten zu unterstützen. Mit klaren Grafiken können Studierende schneller und besser informierte Entscheidungen treffen.
4. Kommunikation: In der Geschäftswelt ist die effektive Kommunikation von Daten von entscheidender Bedeutung. Datenvisualisierungen machen es einfach, komplexe Informationen auf eine Weise zu teilen, die leicht verständlich ist, sowohl innerhalb des Unternehmens als auch gegenüber externen Partnern oder Kunden.
5. Identifikation von Chancen und Herausforderungen: Menschen können durch Datenvisualisierung besser verstehen, wo im Unternehmen Chancen liegen oder wo möglicherweise Herausforderungen auftreten könnten. Dies unterstützt die strategische Planung und das Risikomanagement.

Insgesamt hilft Datenvisualisierung also dabei, (betriebswirtschaftliche) Daten effektiver zu nutzen, um bessere Entscheidungen zu treffen, und ermöglicht eine klare Kommunikation innerhalb und außerhalb eines Unternehmens.

XML

XML (Extensible Markup Language) ist eine Auszeichnungssprache, die dazu dient, strukturierte Daten in einem formatierten Text zu speichern und zu transportieren. Im Wesentlichen handelt es sich um eine universelle Syntax, die verwendet wird, um Daten zwischen verschiedenen Systemen auszutauschen, unabhängig von der Plattform oder Programmiersprache. Einige Anwendungsformen sind:

• Datenstrukturierung: XML ermöglicht die Definition von benutzerdefinierten Tags, Attributen und Hierarchien, um strukturierte Daten zu repräsentieren. Dies macht es besonders nützlich für die Organisation und den Austausch von unterschiedlich strukturierten Informationen.
• Maschinenkommunikation (Machine-to-Machine): XML wird häufig in der Machine-to-Machine-Kommunikation verwendet, bei der Systeme automatisch Daten austauschen, ohne menschliche Intervention. Diese Art der Kommunikation ist wichtig in verschiedenen Anwendungen wie Webdiensten, IoT (Internet of Things) und anderen vernetzten Umgebungen.
• GPX (GPS Exchange Format): GPX ist ein XML-basiertes Datenformat, das speziell für den Austausch von GPS-Daten entwickelt wurde. Es wird oft verwendet, um Informationen über geografische Positionen, Wegpunkte, Tracks und Routen zu speichern und auszutauschen. GPX-Dateien werden in Anwendungen wie GPS-Geräten, Sport- und Outdoor-Anwendungen genutzt.
• SVG (Scalable Vector Graphics): SVG ist ein XML-basiertes Format für die Beschreibung von zweidimensionalen Vektorgrafiken. Im Gegensatz zu Rastergrafiken (wie JPG oder PNG) bleiben SVG-Grafiken skalierbar, ohne an Qualität zu verlieren. SVG wird in Webanwendungen, insbesondere für Grafiken und Diagramme, sowie für die Gestaltung von interaktiven Benutzeroberflächen verwendet.

XML ist eine flexible und erweiterbare Auszeichnungssprache, die für die Strukturierung und den Austausch von Daten in verschiedenen Anwendungen geeignet ist. Die Derivate GPX und SVG zeigen, wie XML auf spezielle Anforderungen angepasst werden kann, sei es für den Austausch von GPS-Daten oder die Darstellung skalierbarer Vektorgrafiken.

Autor und Lizenz

Autor: Prof. Dr. rer. nat. Claus Brell, aktuelle Projekte: Biene40, AI4Bee
Lizenz: CC BY

Inhalte des Beitrages können Sie entsprechen der Lizenz verwenden. Unter dieser Lizenz veröffentlichte Werke darf jedermann für private, gewerbliche und sonstige Zwecke nutzen verändern und auch neu ohne CC-Lizenz vermarkten. Als Urheber mache ich keine Rechte geltend.