{"id":4061,"date":"2024-01-06T10:00:57","date_gmt":"2024-01-06T09:00:57","guid":{"rendered":"https:\/\/cbrell.de\/blog\/?p=4061"},"modified":"2024-02-01T08:38:56","modified_gmt":"2024-02-01T07:38:56","slug":"svg-grafiken-erzeugen-mit-chatgpt","status":"publish","type":"post","link":"https:\/\/cbrell.de\/blog\/svg-grafiken-erzeugen-mit-chatgpt\/","title":{"rendered":"SVG Grafiken erzeugen mit chatGPT"},"content":{"rendered":"

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\u00e4gt, beleuchtet dieser Beitrag SVG Grafiken erzeugen mit chatGPT.<\/em><\/p>\n

06.01.2023<\/p>\n

Was ist SVG?<\/h2>\n

SVG steht f\u00fcr „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),\u00a0 Bilder im SVG Format betehen aus Anweisungen, wie sie zu zeichnen sind. Das Zeichnen (Rendern) \u00fcbernimmt dann eine Software wie der Browser oder Inkscape.<\/p>\n

Gut daran ist, dass SVG-Bilder nicht an Qualit\u00e4t verlieren, wenn man sie gr\u00f6\u00dfer oder kleiner macht – es bleibt scharf. SVG wird oft f\u00fcr Icons, Logos und andere Grafiken im Web verwendet, weil es flexibel und gut an verschiedene Bildschirmgr\u00f6\u00dfen anpassbar ist. Formal ist SVG ein XML-Derivat so wie HTML (Hypertext Markup Language) oder GPX f\u00fcr Navigationsger\u00e4te.<\/p>\n

Wozu ist SVG n\u00fctzlich?<\/h2>\n

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\u00f6\u00dfe bei SVG viel kleiner sein als die entsprechende Gr\u00fc\u00dfe als z.B. PNG. SVG-Dateien lassen sich leicht aus Programmen heraus erzeugen, ohne dass Fremdbibliotheken genutz werden.<\/p>\n

Ein Anwendungskontext ist die Erstellung von Informationsgrafiken mit ETL-Prozessen. Aus Datenbest\u00e4nden k\u00f6nnen mit z.B. Python-Programmen oder Programmen in der Dot-Net-Umgebung leicht ansprechende Datenvisualisierungen erzeugt werden.<\/p>\n

Wie kann man einfach SVG-Bilder erzeugen?<\/h2>\n

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

<rect width=\"100%\" height=\"100%\" fill=\"#f0f0f0\" \/><\/pre>\n
ein.<\/p>\n
Der Prozess wird im Folgenden erl\u00e4utert und durch chatGPT unterst\u00fctzt.<\/p>\n
Ein einfacher SVG Code<\/h2>\n
Eine einfacher SVG Code, der ein Rechteck und einen Kreis zeichnet, sieht zum Beispiel wie folgt aus:
\n<svg width=\"600\" height=\"300\" viewBox=\"0 0 600 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">
\n<!-- Hintergrund als Rechteck -->
\n<rect width=\"600\" height=\"300\" fill=\"#ff0aff\" \/>
\n<!-- Ein Rechteck -->
\n<rect x=\"30\" y=\"30\" width=\"240\" height=\"240\" fill=\"#ffff00\" \/>
\n<!-- Ein Kreis -->
\n<circle cx=\"450\" cy=\"150\" r=\"120\" fill=\"#00ffff\" \/>
\n<!-- Verbindungslinie -->
\n<line x1=\"270\" y1=\"150\" x2=\"330\" y2=\"150\" stroke=\"#0a0a0a\" stroke-width=\"6\" \/>
\n<!-- Textbeschriftungen -->
\n<text x=\"300\" y=\"20\" fill=\"#000000\" font-size=\"20\" text-anchor=\"middle\">Rechteck und Kreis<\/text>
\n<\/svg><\/code>
\nListing 1: Eine einfache grafische Darstellung mit SVG farbigen Elementen<\/em><\/p>\n
\"Das<\/a><\/p>\n
Abb. 1: grafische Repr\u00e4sentation des Quelltextes aus Listing 1 z.B. im Browser Chrome<\/em><\/p>\n
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\u00f6he 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\u00f6he und Breite \u00fcbereinstimmen, macht aber das Ausrechnen der Koordinaten grafikinterner Komponenten einfacher. Die Parameter f\u00fcr Rechtecke <rect …>, Kreise <circle …> und weiteren Elementen liest man bei Bedarf in einem Einsteigertutorial nach (siehe Quellen weiter hinten)<\/p>\n
SVG Grafiken erzeugen mit chatGPT<\/h2>\n
Der Dialog<\/h3>\n
Mit dem folgenden Dialog wurde chatGPT aufgefordert, eine einfache Liniengrafik zu erstellen. Das Vorgehen, zweistufig vorzugehen und zun\u00e4chst das Thema mit einer allgemeinen Frage zu beginnen und dann zu verfeinern, f\u00fchrt oft zu brauchbaren Ergebnissen.<\/p>\n
Erste Frage<\/strong><\/p>\n
erkl\u00e4re mit einfachen Worten, was SVG ist<\/p>\n
chatGPT antwortet<\/strong><\/p>\n
SVG steht f\u00fcr „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.<\/p>\n
Vektoren sind wie mathematische Anweisungen f\u00fcr den Computer, um Linien, Formen und Farben zu erstellen. Das coole daran ist, dass SVG-Bilder nicht an Qualit\u00e4t verlieren, wenn man sie gr\u00f6\u00dfer oder kleiner macht. Du kannst also ein SVG-Bild ganz klein auf einem Handy anzeigen lassen oder es riesig auf einem gro\u00dfen Bildschirm \u2013 und es bleibt scharf.<\/p>\n
SVG wird oft f\u00fcr Icons, Logos und andere Grafiken im Web verwendet, weil es flexibel und gut an verschiedene Bildschirmgr\u00f6\u00dfen anpassbar ist.<\/p>\n
zweite Frage<\/strong><\/p>\n
schreibe den SVG-Quelltext f\u00fcr eine eingfache Liniengrafik, die den Temperaturverlauf \u00fcber zwei Tage darstellt.<\/p>\n
chatGPT antwortet<\/strong><\/p>\n
Nat\u00fcrlich kann ich dir helfen, den SVG-Quelltext f\u00fcr eine einfache Liniengrafik zur Darstellung des Temperaturverlaufs \u00fcber zwei Tage zu erstellen. Hier ist ein einfaches Beispiel:<\/p>\n
<svg width=\"400\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<!-- Hintergrund -->\r\n<rect width=\"100%\" height=\"100%\" fill=\"#f0f0f0\" \/>\r\n<!-- X-Achse -->\r\n<line x1=\"50\" y1=\"150\" x2=\"350\" y2=\"150\" stroke=\"#333\" stroke-width=\"2\" \/>\r\n<!-- Y-Achse -->\r\n<line x1=\"50\" y1=\"50\" x2=\"50\" y2=\"150\" stroke=\"#333\" stroke-width=\"2\" \/>\r\n<!-- Temperaturdatenpunkte -->\r\n<circle cx=\"100\" cy=\"120\" r=\"5\" fill=\"#ff0000\" \/>\r\n<circle cx=\"200\" cy=\"80\" r=\"5\" fill=\"#ff0000\" \/>\r\n<!-- Verbindungslinie -->\r\n<line x1=\"100\" y1=\"120\" x2=\"200\" y2=\"80\" stroke=\"#0066cc\" stroke-width=\"2\" \/>\r\n<!-- Textbeschriftungen -->\r\n<text x=\"100\" y=\"170\" fill=\"#333\" font-size=\"12\" text-anchor=\"middle\">Tag 1<\/text>\r\n<text x=\"200\" y=\"170\" fill=\"#333\" font-size=\"12\" text-anchor=\"middle\">Tag 2<\/text>\r\n<text x=\"30\" y=\"120\" fill=\"#333\" font-size=\"12\" text-anchor=\"end\">30\u00b0C<\/text>\r\n<text x=\"30\" y=\"80\" fill=\"#333\" font-size=\"12\" text-anchor=\"end\">10\u00b0C<\/text>\r\n<!-- Diagrammtitel -->\r\n<text x=\"200\" y=\"30\" fill=\"#333\" font-size=\"16\" text-anchor=\"middle\">Temperaturverlauf<\/text>\r\n<\/svg><\/pre>\n
Listing 2: Von chatGPT erzeugter SVG-Quellcode f\u00fcr eine Liniengrafik<\/em><\/p>\n
dritte Frage<\/strong><\/p>\n
Die Temperaturen sollen der folgenden CSV-Liste entnommen werden. Der jeweils erste Wert ist die Uhrzeit, der jeweils zweite Wert ist die Temperatur in \u00b0C. Feldtrenner ist ein „;“, jede Zeile ist ein Datensatz.
\nBenutze diese Daten f\u00fcr die grafische Visualisierung als SVG.
\nZeit;Temperatur
\n08:00;15.1
\n09:00;16.4
\n10:00;17.0
\n11:00;17.6
\n12:00;18.0
\n13:00;18.0
\n14:00;17.9
\n15:00;17.7
\n16:00;17.3<\/p>\n
chatGPT antwortet<\/strong><\/p>\n
Nat\u00fcrlich, ich kann den SVG-Quelltext basierend auf den bereitgestellten Daten erstellen. Hier ist der angepasste Code:<\/p>\n
<svg width=\"400\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<!-- Hintergrund -->\r\n<rect width=\"100%\" height=\"100%\" fill=\"#f0f0f0\" \/>\r\n<!-- X-Achse -->\r\n<line x1=\"50\" y1=\"150\" x2=\"350\" y2=\"150\" stroke=\"#333\" stroke-width=\"2\" \/>\r\n<!-- Y-Achse -->\r\n<line x1=\"50\" y1=\"50\" x2=\"50\" y2=\"150\" stroke=\"#333\" stroke-width=\"2\" \/>\r\n<!-- Temperaturdatenpunkte -->\r\n<circle cx=\"100\" cy=\"120\" r=\"5\" fill=\"#ff0000\" \/>\r\n<circle cx=\"150\" cy=\"110\" r=\"5\" fill=\"#ff0000\" \/>\r\n<circle cx=\"200\" cy=\"100\" r=\"5\" fill=\"#ff0000\" \/>\r\n<circle cx=\"250\" cy=\"90\" r=\"5\" fill=\"#ff0000\" \/>\r\n<circle cx=\"300\" cy=\"80\" r=\"5\" fill=\"#ff0000\" \/>\r\n<!-- Verbindungslinien -->\r\n<line x1=\"100\" y1=\"120\" x2=\"150\" y2=\"110\" stroke=\"#0066cc\" stroke-width=\"2\" \/>\r\n<line x1=\"150\" y1=\"110\" x2=\"200\" y2=\"100\" stroke=\"#0066cc\" stroke-width=\"2\" \/>\r\n<line x1=\"200\" y1=\"100\" x2=\"250\" y2=\"90\" stroke=\"#0066cc\" stroke-width=\"2\" \/>\r\n<line x1=\"250\" y1=\"90\" x2=\"300\" y2=\"80\" stroke=\"#0066cc\" stroke-width=\"2\" \/>\r\n<!-- Textbeschriftungen -->\r\n<text x=\"100\" y=\"170\" fill=\"#333\" font-size=\"12\" text-anchor=\"middle\">08:00<\/text>\r\n<text x=\"150\" y=\"170\" fill=\"#333\" font-size=\"12\" text-anchor=\"middle\">09:00<\/text>\r\n<text x=\"200\" y=\"170\" fill=\"#333\" font-size=\"12\" text-anchor=\"middle\">10:00<\/text>\r\n<text x=\"250\" y=\"170\" fill=\"#333\" font-size=\"12\" text-anchor=\"middle\">11:00<\/text>\r\n<text x=\"300\" y=\"170\" fill=\"#333\" font-size=\"12\" text-anchor=\"middle\">12:00<\/text>\r\n<text x=\"30\" y=\"120\" fill=\"#333\" font-size=\"12\" text-anchor=\"end\">18\u00b0C<\/text>\r\n<text x=\"30\" y=\"80\" fill=\"#333\" font-size=\"12\" text-anchor=\"end\">15\u00b0C<\/text>\r\n<!-- Diagrammtitel -->\r\n<text x=\"200\" y=\"30\" fill=\"#333\" font-size=\"16\" text-anchor=\"middle\">Temperaturverlauf<\/text>\r\n<\/svg><\/pre>\n
Listing 3: von chatGPT erzeugter SVG-Quellcode f\u00fcr eine Liniengrafik mit konkreten Werten<\/em><\/p>\n
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\u00f6chtest.<\/p>\n
Das Ergebnis<\/h3>\n
Abb.2 zeigt, wie der von chatGPT erzeugte SVG-Quellcode im Browser aussieht.<\/p>\n
\"Das<\/a><\/p>\n
Abb. 2; Eine formal richtige, aber inhaltlich sinnlose Liniengrafik gem. Listing 3<\/em><\/p>\n
Fazit<\/h3>\n
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\u00e4ndnis f\u00fcr den Inhalt und den Anwendungskontext einer Visualisierung zu entwickeln. Damit \u00e4hneln die von chatGPT erzeugten Artefakte erstaunlich den Dialogverl\u00e4ufen mit Menschen mit Demenz.<\/p>\n
Anhang<\/h2>\n
Quellen<\/h3>\n
chatGPT<\/p>\n
https:\/\/chat.openai.com\/<\/a><\/p>\n
Weiter Beitr\u00e4ge mit chatGPT, nicht nur zur Programmierung<\/p>\n
Kartoffelkanone bauen mit chatGPT<\/a><\/p>\n
Mit chatGPT programmieren in HTML und PHP<\/a><\/p>\n
Vom Warp-Antrieb zum Imker-Aktivit\u00e4tenkalender \u2013 ein Brainstorming mit chatGPT<\/a><\/p>\n
chatGPT und die Literatur zu Imkerei und Honigbienen<\/a><\/p>\n
SVG Tutorials<\/p>\n
\u00dcbersicht von Tutorials auf selfhtml: https:\/\/wiki.selfhtml.org\/wiki\/SVG\/Tutorials<\/a><\/p>\n
Ein HTML-Seminar, das SVG beleuchtet: https:\/\/www.html-seminar.de\/svg-in-websites-nutzen.htm<\/a><\/p>\n
Glossar<\/h3>\n
chatGPT<\/h4>\n
ChatGPT ist ein computergesteuertes Programm, das entwickelt wurde, um Konversationen zu f\u00fchren, die wirken, als w\u00fcrde ein Mensch sie f\u00fchren. Es basiert auf k\u00fcnstlicher Intelligenz und wurde von OpenAI erstellt. GPT steht f\u00fcr „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\u00fcrliche 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\u00e4tzen – 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\u00e4ndnis f\u00fcr den Dialog. Daher ist das „Prompt Engineering“ wichtig, um chatGPT brauchbare Ergebnisse zu entlocken.<\/p>\n
Datenvisualisierung<\/h4>\n
Datenvisualisierung ist ein Prozess, bei dem Daten in grafische Formen wie Diagramme, Grafiken oder Tabellen umgewandelt werden, um komplexe Informationen auf eine leicht verst\u00e4ndliche Weise darzustellen.\u00a0 Datenvisualisierungen bieten mehrere Vorteile:<\/p>\n
    \n
  1. Klarheit und Verst\u00e4ndlichkeit: Durch die Verwendung von Diagrammen und Grafiken k\u00f6nnen komplexe Datenmengen in leicht verst\u00e4ndliche visuelle Darstellungen umgewandelt werden. Dies erleichtert z.B. das Verst\u00e4ndnis komplexer betriebswirtschaftlicher Zusammenh\u00e4nge.<\/li>\n
  2. Schnelle Analyse: Visuelle Darstellungen erm\u00f6glichen es, Daten schnell zu analysieren und Muster, Trends oder Ausrei\u00dfer leichter zu erkennen. Dies ist besonders n\u00fctzlich bei der Betrachtung von Finanzdaten, Markttrends oder Leistungsindikatoren.<\/li>\n
  3. Entscheidungsunterst\u00fctzung: Datenvisualisierung bietet eine effektive M\u00f6glichkeit, Entscheidungstr\u00e4ger bei der Interpretation von Daten zu unterst\u00fctzen. Mit klaren Grafiken k\u00f6nnen Studierende schneller und besser informierte Entscheidungen treffen.<\/li>\n
  4. Kommunikation: In der Gesch\u00e4ftswelt ist die effektive Kommunikation von Daten von entscheidender Bedeutung. Datenvisualisierungen machen es einfach, komplexe Informationen auf eine Weise zu teilen, die leicht verst\u00e4ndlich ist, sowohl innerhalb des Unternehmens als auch gegen\u00fcber externen Partnern oder Kunden.<\/li>\n
  5. Identifikation von Chancen und Herausforderungen: Menschen k\u00f6nnen durch Datenvisualisierung besser verstehen, wo im Unternehmen Chancen liegen oder wo m\u00f6glicherweise Herausforderungen auftreten k\u00f6nnten. Dies unterst\u00fctzt die strategische Planung und das Risikomanagement.<\/li>\n<\/ol>\n
    Insgesamt hilft Datenvisualisierung also dabei, (betriebswirtschaftliche) Daten effektiver zu nutzen, um bessere Entscheidungen zu treffen, und erm\u00f6glicht eine klare Kommunikation innerhalb und au\u00dferhalb eines Unternehmens.<\/p>\n
    XML<\/h4>\n
    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\u00e4ngig von der Plattform oder Programmiersprache. Einige Anwendungsformen sind:<\/p>\n