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.