Illustrator für Datenvisualisierungen

Adobe Illustrator ist das Standardwerkzeug für die vektorielle Nachbearbeitung von Datenvisualisierungen – SVG-Exporte aus Datawrapper oder anderen Tools werden präzise verfeinert, typografisch gestaltet und für Print oder Social Media optimiert.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Infografik & Datenvisualisierung · Niveau: Einsteiger

Was ist der Einsatz von Illustrator in der Dataviz?

Adobe Illustrator ist ein Vektorgrafik-Programm. Vektorgrafiken (im SVG-Format) sind beliebig skalierbar, ohne Qualitätsverlust – ideal für die Druckvorstufe, wo Grafiken von Webgröße (72 dpi) auf Druckauflösung (300+ dpi) skaliert werden müssen.

Im Dataviz-Workflow nimmt Illustrator eine spezifische Position ein: Das Rohmaterial (die Daten, die Chart-Struktur) wird in einem Dataviz-Tool wie Datawrapper, Flourish oder D3.js erzeugt. Das Ergebnis wird als SVG exportiert. Illustrator verfeinert dann die Grafik: bessere Typografie, angepasste Farben, zusätzliche Annotationen, Layout für eine Doppelseite oder einen Social-Media-Crop.

Dieser Workflow kombiniert die Datenpräzision von Dataviz-Tools mit der Gestaltungsfreiheit von Illustrator.

Erklärung

SVG – das Brückenformat

SVG (Scalable Vector Graphics) ist das zentrale Format für den Datawrapper-zu-Illustrator-Workflow. Datawrapper bietet in den meisten Chart-Typen einen SVG-Export (im bezahlten Plan ist er vorhanden; im kostenlosen Plan über den Browser-Inspector extrahierbar). Alternativ: PNG-Export als Raster (nicht für Nachbearbeitung geeignet) oder PDF-Export.

Wenn ein SVG in Illustrator geöffnet wird, sind alle Elemente der Grafik einzeln anwählbar: Balken, Achsenlinien, Beschriftungen, Hintergrundflächen. Jeder Text ist editierbar, jede Farbe änderbar, jeder Pfad verschiebbar.

Achtung: SVGs aus Dataviz-Tools enthalten oft verschachtelte Gruppen und automatisch generierte IDs. Der erste Schritt in Illustrator ist oft das Auflösen der Ebenenstruktur (Object > Ungroup) und das Umbenennen der Elemente für bessere Orientierung.

Was wird in Illustrator nachbearbeitet?

Typografie: Dataviz-Tools bieten nur begrenzte Schriftoptionen. In Illustrator können redaktionelle oder Brandfont-Schriften eingesetzt werden. Achsenbeschriftungen, Titel, Quellenzeile und Anmerkungen lassen sich typographisch verfeinern – Laufweite, Zeilenabstand, optisches Kerning.

Farbkorrekturen: CMYK-Farbraum für Drucksachen statt RGB. Pantone-Farben für Markenpublikationen. Illustrator konvertiert RGB-SVG-Farben automatisch beim Öffnen in den Dokumentfarbmodus.

Annotationen und Illustrations-Elemente: Illustrationen, Icons, Pfeile, Hintergrundbilder oder erklärende Textboxen können in Illustrator um die Dataviz herum layoutet werden. Typisch für Magazin-Doppelseiten: Die Dataviz ist nur ein Teil eines größeren Infografik-Layouts mit Illustrationen.

Mehrsprachige Versionen: Wenn eine Infografik in mehreren Sprachen erscheinen soll (DE, EN, FR), werden Textelemente in Illustrator angepasst. Die Datenstruktur bleibt identisch, nur Texte werden übersetzt.

Präzisions-Layout: Für Print-Doppelseiten oder mehrseitige Infografik-Berichte werden in Illustrator exakte Abstände, Ausrichtungen und Textfluss-Koordinationen vorgenommen – Präzision, die in Dataviz-Tools nicht möglich ist.

Der Standard-Workflow

1. Daten in Datawrapper eingeben: Chart erstellen, Farben und Beschriftungen grob konfigurieren.
2. SVG aus Datawrapper exportieren: Im bezahlten Plan unter „Export > SVG". Im kostenlosen Plan: Browser-Entwicklertools → SVG-Element herauscopieren und als .svg-Datei speichern.
3. SVG in Illustrator öffnen: Datei > Öffnen oder per Drag-and-Drop. Artboard-Größe prüfen.
4. Gruppen auflösen und benennen: Übersichtliche Ebenenstruktur herstellen.
5. Typografie anpassen: Redaktionelle Schriften einsetzen, Texte in Größe und Spacing optimieren.
6. Farben anpassen: Ins CMYK-Profil umwandeln, Pantone-Töne einsetzen.
7. Annotationen und Kontext ergänzen: Pfeile, Beschriftungskästen, Illustrationen.
8. Für Print exportieren: PDF/X-3 oder PDF/X-4 für Druckvorstufe; alternativ PNG für Web/Social.

Grenzen des Workflows

Was in Illustrator nicht möglich ist, was Dataviz-Tools beherrschen:

• Daten aktualisieren: Wenn sich die Daten ändern, muss der SVG-Export wiederholt und neu bearbeitet werden. Es gibt keine dynamische Verknüpfung.
• Responsives Verhalten: Illustrator-Grafiken sind statisch; sie haben keine responsive Breite für Webseiten.
• Interaktivität: Hover, Tooltips, Filter – das alles fällt weg. SVG in Illustrator ist eine statische Datei.

Deshalb gilt: Illustrator für Print und statische Webgrafiken (PNG/SVG-Export); Datawrapper für responsiv-interaktive Webembeds.

Alternativen: Affinity Designer und Sketch

Adobe Illustrator ist kostenintensiv (Creative Cloud Abo). Affinity Designer (einmalige Lizenz) bietet ähnliche Vektorfunktionen und einen guten SVG-Import. Sketch (Mac-only) ist stärker auf UX-Design ausgerichtet, kann aber ebenfalls SVGs verarbeiten. Für reine Dataviz-Nachbearbeitung reicht Affinity Designer oft vollständig.

Wann einsetzen / wann nicht

Illustrator einsetzen, wenn:

• Print-Ausgabe erforderlich ist (Magazin, Jahresbericht, Broschüre, Zeitungsbeilage).
• Redaktionelle Schriften oder Pantone-Farben eingesetzt werden müssen.
• Komplexe Layouts mit Dataviz + Illustration + Text kombiniert werden sollen.
• Eine Infografik in mehreren Sprachen erscheinen soll.
• Die visuelle Qualität über das hinausgehen soll, was Dataviz-Tools bieten.

Nicht einsetzen, wenn:

• Eine responsiv-interaktive Web-Grafik benötigt wird – Datawrapper oder Flourish behalten.
• Die Daten regelmäßig aktualisiert werden – dann lieber im Dataviz-Tool lassen.
• Kein Adobe-Abo vorhanden ist – Affinity Designer als Alternative.
• Nur eine schnelle Web-Grafik ohne Design-Anspruch gebraucht wird.

Beispiele (5 konkrete)

1. Spiegel-Magazin Doppelseite Wahlgrafik: Datawrapper-Karte als SVG exportiert, in Illustrator auf Doppelseiten-Format layoutet, mit redaktioneller Serifenschrift und ergänzenden Tabellen für die Druckausgabe aufbereitet.
2. Jahresbericht-Infografik: Unternehmensberater erstellt alle Diagramme in Datawrapper (Balken, Linien, Scatter), exportiert als SVG, layoutet in Illustrator auf A4 mit CI-Farben und Brandfont. Export als PDF/X-4 zur Druckerei.
3. Social-Media-Crop: Eine komplexe Infografik für den Webauftritt wird in Illustrator für Instagram (1080×1080 px) und Twitter (1200×628 px) in unterschiedliche Quadrat- und Querformate geschnitten – mit angepassten Schriftgrößen.
4. Mehrsprachige Infografik: Eine NGO-Grafik zu globalen Klimadaten erscheint auf Englisch, Deutsch und Französisch. Daten-Struktur und Visualisierung bleiben gleich; nur Texte werden in Illustrator editiert und die Textboxen in der Länge angepasst.
5. Illustrierte Prozessgrafik: Ein Datawrapper-Balkendiagramm wird als SVG importiert; darum herum wird in Illustrator eine Prozessinfografik mit Icons und Verbindungspfeilen aufgebaut. Ergebnis: ein Mixed-Type-Feature für einen Online-Artikel als statisches PNG.

In der Praxis

SVG aus Datawrapper extrahieren (kostenloses Paket):

1. Visualisierung im Browser öffnen (Live-Vorschau in Datawrapper).
2. Browser-Entwicklertools öffnen (F12 / Cmd+Opt+I).
3. Im Elements-Tab das <svg>-Element finden.
4. Rechtsklick → „Outer HTML kopieren".
5. In Texteditor einfügen, als meinediagramm.svg speichern.
6. In Illustrator öffnen.

Typische Illustrator-Shortcuts für Dataviz-Nachbearbeitung:

• Ctrl/Cmd + G: Gruppieren
• Ctrl/Cmd + Shift + G: Gruppe auflösen
• Ctrl/Cmd + F: Suchen und Ersetzen (für Text-Batch-Änderungen)
• Object > Ungroup: Alle Verschachtelungen auflösen
• View > Smart Guides (aktivieren): Exaktes Ausrichten von Elementen

Farbmodus-Umstellung für Print: Datei > Dokumentfarbmodus > CMYK-Farbe. Achtung: RGB-Farben werden dabei konvertiert, was manchmal Farbverschiebungen erzeugt. Deshalb Farbkorrekturen immer nach der Modus-Umstellung vornehmen.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Kann ich in Illustrator die Daten noch ändern, nachdem ich den SVG importiert habe? Nein – das ist die wichtigste Einschränkung des Illustrator-Workflows. Wenn sich Daten ändern, muss der Prozess von vorn beginnen: Datawrapper aktualisieren, neu exportieren, neu bearbeiten. Für regelmäßig aktualisierte Grafiken ist deshalb der Datawrapper-Embed-Workflow ohne Illustrator besser – dort genügt es, die Daten im Datawrapper zu ändern, und das Embed aktualisiert sich automatisch.

Welche Datei-Formate aus Datawrapper sind für Illustrator am besten? SVG ist das ideale Format: Alle Elemente bleiben vektoriell bearbeitbar. PNG ist ein Rasterformat – es kann nicht ohne Qualitätsverlust skaliert werden und Elemente sind nicht einzeln bearbeitbar. PDF kann ebenfalls importiert werden, hat aber oft eine komplexere interne Struktur als SVG. Für den Illustrator-Workflow immer SVG bevorzugen.

Verwandte Einträge

• Datawrapper — Daten-Input und SVG-Quelle
• Farbwahl in Datenvisualisierungen — CMYK-Farbraum und Druckpaletten
• Infografik-Typen — Welche Layouts Illustrator besonders braucht

Weiterführend

• Tufte, E. R. (2001). The Visual Display of Quantitative Information (2. Aufl.). Graphics Press. (Prinzipien, die auch für Print-Dataviz gelten)
• Cairo, A. (2016). The Truthful Art, Kap. 2 (Communicating data). New Riders.
• Adobe Illustrator Tutorials: helpx.adobe.com/illustrator/tutorials.html
• Datawrapper Academy (SVG-Export): academy.datawrapper.de
• Wilke, C. O. (2019). Fundamentals of Data Visualization. O'Reilly Media.