Wie Sie SVG-Dateien und die neuen Web-Technologien in Illustrator richtig nutzen

Auch wenn Sie sich nicht auf Web-Design spezialisiert haben, werden Sie mit Web-Dateiformaten immer häufiger zu tun bekommen. Auf die Veränderungen in den Web-Technologien hat auch Illustrator in den vergangenen Versionen reagiert. Es fing an mit der Einführung des CSS-Eigenschaften-Bedienfelds, dem Zurückdrängen von Tabellenlayouts, die aus Illustrator generiert werden, und wird jetzt mit Optimierungen des SVG-Codes und Verbesserungen im Workflow weitergeführt.

Sehen wir uns zunächst die Workflowverbesserungen an. Die Für-Web-speichern-Funktion ist umständlich. Wenn man Änderungen an einzelnen Slices vorgenommen hat, dann muss man wieder die Dialogbox öffnen, um dann daraus die Dateien zu überschreiben.

Ausgewählte Slices speichern

In Illustrator CC 2015.2 ist es möglich, bei erneuten Speichervorgängen einfach die betreffenden Slices mit dem Slice-Auswahl-Werkzeug auszuwählen und dann über Datei → Ausgewählte Slices speichern mit denselben Einstellungen auszugeben.

Die Einstellungen für die Slices nehmen Sie nach wie vor in der Dialogbox Für Web speichern vor. Sie können diese Dialogbox mit einem Klick auf Fertig beenden, um die Einstellungen zu speichern, ohne Dateien zu generieren [Abb. 1].

Abb. 1: Einstellen der Speicheroptionen für Web-Dateiformate (hier: PNG-8)

 

Arbeiten mit SVG

Das Dateiformat SVG (Scalable Vector Graphics) ist zwar vor allem für den Einsatz im Web gedacht, es findet jedoch auch an anderen Stellen Verwendung, z. B. beim Austausch mit manchen Plottern. Illustrator war ein Vorreiter in Sachen SVG in Version 9, dann kam das Thema aber einige Jahre praktisch zum Erliegen, dafür wurde Flash vorangetrieben.

Zusammen mit HTML5 oder mit bestimmten Formaten für elektronische Bücher gewann SVG wieder erheblich an Bedeutung und insofern gab es in letzter Zeit auch wieder Bewegung in Illustrators SVG-Export.

In Illustrator CC 2015.2 wurde nun das Exportmodul überarbeitet, sodass es in der Lage ist, für das Web besser geeignete SVG zu erstellen, denn wenn Sie ein SVG speichern, dann speichern Sie nicht nur eine Grafik, sondern Sie schreiben Code.

Je nachdem, wofür Ihre Grafik gedacht ist – zum bloßen Einbinden eines auflösungsunabhängigen Logos oder zum Erstellen von Animationen oder Interaktionen –, kann man es dem weiterverarbeitenden Kollegen einfach oder sehr schwierig machen.

Das hat unter anderem Einfluss auf den Preis, den Sie für die Leistung bezahlen müssen. Es ist also sinnvoll, sich ein wenig mit den Optionen zu beschäftigen, damit Sie mit den Kollegen die entsprechenden Absprachen treffen können. Und das sollten Sie auch unbedingt tun.

Bevor wir uns den Exportvorgang selbst anschauen, sehen wir uns daher einmal das Erstellen einer entsprechenden Datei an.

Formate und Maßeinheiten

Wenn Sie Ihre Dateien für den Austausch mit Plottern erstellen, arbeiten Sie in den gewohnten Maßeinheiten wie »mm«. Wenn Sie Dateien für den Einsatz im Web erstellen, arbeiten Sie in der Einheit »px« und erstellen die Dokumentgröße in ganzen Pixeln. Den Nullpunkt setzen Sie oben links, falls er dort nicht automatisch gesetzt wurde.

Wenn Sie rechteckige Formen erstellen, setzen Sie sie auf ganze Pixel. Es trägt (ein wenig) zur Reduzierung der Dateigröße bei und verbessert die Darstellung auf niedriger aufgelösten Geräten [Abb. 2].

Abb. 2: Exakt an Pixeln ausgerichtete Rechtecke sehen sauberer aus (oben: oranges Objekt) und sparen Speicherplatz (unten).

 

An Pixelraster ausrichten

In Web- und einigen anderen RGB-Dokumentprofilen ist automatisch die Option Neue Objekte an Pixelraster ausrichten aktiv. Sie bewirkt, dass senkrechte und waagerechte Linien und Konturen immer auf ganzen Pixeln liegen. Sie verändert Objekte, verhindert das Ausführen verschiedener Funktionen und kann sehr irritierend wirken. Lediglich für interaktive Formen ist diese Option nicht aktiv. Die Option ist gleichzeitig praktisch und zerstörerisch.

Deswegen kann es sinnvoll sein, sie zu deaktivieren. Entweder beim Erstellen des neuen Dokuments oder nachträglich im Menü des Transformieren-Bedienfelds. Für einzelne Objekte finden Sie die Option im Transformieren-Bedienfeld, wenn Sie Optionen einblenden aufrufen.

openpanel-ca50.png

Inhaltsverzeichnis

  • SVG-Dateien in Illustrator nutzen
    • Ausgewählte Slices speichern
    • Arbeiten mit SVG
      • Formate und Maßeinheiten
      • RGB und Hintergrund
      • Geometrische Grundformen
      • Wenige Punkte
      • Zusammenfügen von Pfaden
      • SVG-Effekte
      • Groups, Layers, IDs: Hierarchien
      • Verwendung von Text
      • Konturen und Pinsel
      • Füllmethoden
      • Anpassen der Zeichenfläche
      • Ausgeblendete Objekte, Ebenen. Symbole
    • Als SVG exportieren
      • Fonts
      • Stile bzw. CSS-Eigenschaften
      • Platzierte Bilder
      • Genauigkeit und Objekt-IDs
      • Interaktiv bzw. Responsive und Minifizieren
      • Weitere Optionen

Arbeitsdateien

  • CA05-IL-02-svg.zip

Beitragsinfo

Um den kompletten Beitrag zu lesen, melden Sie sich bitte nachfolgend an.

Sie haben Ihr Passwort vergessen? Klicken Sie hier, um sich ein neues zusenden zu lassen!