Wissenswertes zu SVG

Bei Bitmap-Formaten für das Web, beispielsweise GIF, JPEG, WBMP und PNG, werden die Bilder mithilfe eines Pixelgitters beschrieben. Die dabei entstehenden Dateien sind häufig recht groß, haben nur eine einzige (oft niedrige) Auflösung und benötigen eine große Bandbreite im Web. Das SVG-Format ist dagegen ein Vektorformat, das Bilder als Formen, Pfade, Text und Filtereffekte beschreibt. Die resultierenden Dateien sind kompakt und liefern professionelle Grafiken für Web und Druck und sogar für Handhelds, deren Ressourcen beschränkt sind. SVG-Bilder können ohne Schärfe- oder Detailverluste auf dem Bildschirm vergrößert werden. Außerdem bietet SVG hervorragende Unterstützung für Text und Farben, wodurch sichergestellt wird, dass die Bilder auch beim Besucher der Website genau so angezeigt werden, wie sie auf der Illustrator-Zeichenfläche erstellt wurden.

Das SVG-Format basiert vollständig auf XML und bietet Entwicklern und Besuchern der Website eine Reihe von Vorteilen. SVG ermöglicht die Nutzung von XML und JavaScript zur Erstellung von Webgrafiken, die auf Benutzeraktionen mit komplexen Effekten wie Hervorhebung, QuickInfos, Audiowiedergabe und Animation reagieren.

Zum Speichern von Bildmaterial im SVG-Format können Sie die Befehle „Speichern“, „Speichern unter“, „Kopie speichern“ und „Für Web und Geräte speichern“ verwenden. Sie können auf alle SVG-Exportoptionen zugreifen, indem Sie die Befehle „Speichern“, „Speichern unter“ und „Kopie speichern“ verwenden. Über den Befehl „Für Web und Geräte speichern“ können Sie auf eine Untergruppe der SVG-Exportoptionen zugreifen, die sich für die weborientierte Arbeit eignet.

Ein Video zum Erstellen von Inhalten für Mobilgeräte in Illustrator finden Sie unter www.adobe.com/go/vid0207_de.

Das Aussehen der endgültigen SVG-Datei hängt davon ab, wie Sie Ihr Bildmaterial in Illustrator einrichten. Dabei ist Folgendes zu beachten:

  • Verwenden Sie Ebenen, um der SVG-Datei Struktur zu verleihen. Wenn Sie Bildmaterial im SVG-Format speichern, wird jede Ebene in ein Gruppenelement (<g>) umgewandelt. (Aus einer Ebene namens „Schaltfläche1“ wird in der SVG-Datei beispielsweise <g id="Schaltfläche1_ver3.0">.) Verschachtelte Ebenen werden in SVG zu verschachtelten Gruppen und ausgeblendete Ebenen werden mit der SVG-Stileigenschaft „display="none"“ erhalten.

  • Wenn Sie möchten, dass Objekte auf unterschiedlichen Ebenen transparent erscheinen, ändern Sie die Deckkraft der einzelnen Objekte, nicht die der einzelnen Ebenen. Wenn Sie die Deckkraft der Ebenen ändern, erscheint die Transparenz in der SVG-Datei nicht so wie in Illustrator.

  • Rasterdaten sind im SVG Viewer nicht skalierbar und lassen sich nicht wie andere SVG-Elemente bearbeiten. Vermeiden Sie es daher möglichst, Bildmaterial zu erstellen, das in der SVG-Datei in ein Pixelbild umgewandelt wird. Verlaufsgitter und Objekte, bei denen die Effekte „In Pixelbild umwandeln“, „Kunstfilter“, „Malfilter“, „Scharfzeichnungsfilter“, „Stilisierungsfilter“, „Strukturierungsfilter“, „Vergröberungsfilter“, „Verzerrungsfilter“, „Videofilter“, „Weichzeichnungsfilter“ und „Zeichenfilter“ zum Einsatz kommen, werden beim Speichern im SVG-Format in Pixelbilder umgewandelt. Bei Grafikstilen, die diese Effekte umfassen, kommt es ebenfalls zu einer Umwandlung in Pixelbilder. Verwenden Sie SVG-Effekte, um Grafikeffekte hinzuzufügen, ohne die Grafik dabei in ein Pixelbild umzuwandeln.

  • Verwenden Sie Symbole und vereinfachen Sie die Pfade im Bildmaterial, um die SVG-Datei zu optimieren. Wenn die Arbeitsgeschwindigkeit eine große Rolle spielt, sollten Sie Pinsel vermeiden, die viele Pfaddaten erstellen. Dazu gehören z. B. die Pinselarten „Kohle“, „Asche“ und „Federkiel“.

  • Verwenden Sie zum Einfügen von Web-Links in eine SVG-Datei Slices, Imagemaps und Skripten.

  • Skriptsprachen, wie z. B. JavaScript, ermöglichen eine unbegrenzte Funktionsvielfalt in SVG-Dateien. Mit dem Mauszeiger und der Auswahl einer Taste auf der Tastatur können Skriptfunktionen, wie z. B. Rollover-Effekte, ausgelöst werden. Skripten können darüber hinaus über das DOM (Document Object Model) auf die SVG-Datei zugreifen und diese ändern, indem sie beispielsweise SVG-Elemente hinzufügen oder löschen.

Anwenden von SVG-Effekten

Verwenden Sie SVG-Effekte, um Ihr Bildmaterial mit Eigenschaften wie beispielsweise Schlagschatten zu versehen. Im Gegensatz zu Bitmap-Effekten basieren SVG-Effekte auf XML und sind auflösungsunabhängig. Ein SVG-Effekt ist praktisch nichts anderes als eine Reihe von XML-Eigenschaften, die verschiedene mathematische Vorgänge beschreiben. Der sich ergebende Effekt wird statt auf die Ausgangsgrafik auf das Zielobjekt angewendet.

Illustrator bietet Ihnen eine Standardauswahl an SVG-Effekten. Sie können diese Effekte mit ihren Standardeigenschaften nutzen, durch Bearbeiten des XML-Codes eigene Effekte erstellen oder neue SVG-Effekte programmieren.

Hinweis:

Wenn Sie die SVG-Standardfilter von Illustrator ändern möchten, bearbeiten Sie die Datei „Adobe SVG Filters.svg“ in einem Texteditor. Die Datei befindet sich im Ordner „Dokumente und Einstellungen/<Benutzerverzeichnis>/ Anwendungsdaten/Adobe/Adobe Illustrator CS5 Settings/<Speicherort>“. Sie können die vorhandenen Filterdefinitionen bearbeiten, Filterdefinitionen löschen oder neue Filterdefinitionen hinzufügen.

  1. Wählen Sie das Objekt oder die Gruppe aus (oder wählen Sie im Ebenenbedienfeld eine Ebene als Ziel aus).
  2. Führen Sie einen der folgenden Schritte durch:
    • Soll ein Effekt mit seinen Standardeinstellungen angewendet werden, wählen Sie den Effekt im unteren Bereich des Untermenüs „Effekt“ > „SVG-Filter“ aus.

    • Soll ein Effekt mit benutzerdefinierten Einstellungen angewendet werden, wählen Sie „Effekt“ > „SVG-Filter“ > „SVG-Filter anwenden“. Wählen Sie im daraufhin angezeigten Dialogfeld den Effekt aus und klicken Sie auf die Schaltfläche „SVG-Filter bearbeiten“ . Bearbeiten Sie den Standardcode und klicken Sie auf „OK“.

    • Soll ein neuer Effekt erstellt und angewendet werden, wählen Sie „Effekt“ > „SVG-Filter“ > „SVG-Filter anwenden“. Klicken Sie im Dialogfeld auf die Schaltfläche „Neuer SVG-Filter“ , geben Sie den neuen Code ein und klicken Sie auf „OK“.

      Wenn Sie einen SVG-Filtereffekt anwenden, zeigt Illustrator auf der Zeichenfläche eine Pixelbildversion des Effekts an. Sie können die Auflösung dieses Vorschaubildes steuern, indem Sie die Einstellung für die Pixelbildauflösung des Dokuments ändern.

      Hinweis: Wenn einem Objekt mehrere Effekte zugewiesen sind, muss der SVG-Effekt der letzte Effekt sein. Er muss also am unteren Ende des Aussehenbedienfelds (direkt über dem Eintrag „Transparenz“) stehen. Folgen dem SVG-Effekt noch weitere Effekte, wird in der SVG-Ausgabe ein Pixelbildobjekt ausgegeben.

Importieren von Effekten aus einer SVG-Datei

  1. Wählen Sie „Effekt“ > „SVG-Filter“ > „SVG-Filter importieren“.
  2. Wählen Sie die SVG-Datei, aus der Sie Effekte importieren möchten, und klicken Sie auf „Öffnen“.

SVG-Interaktivität-Bedienfeld – Übersicht

Mit dem SVG-Interaktivität-Bedienfeld („Fenster“ > „SVG-Interaktivität“) können Sie interaktive Funktionen in Bildmaterial einfügen, wenn dieses für die Anzeige in einem Webbrowser exportiert wird. So können Sie beispielsweise durch Erstellen eines Ereignisses, das einen JavaScript-Befehl auslöst, leicht dafür sorgen, dass auf der Webseite eine Reaktion zu sehen ist, sobald der Besucher Ihrer Website eine bestimmte Aktion ausführt (beispielsweise wenn er mit dem Mauszeiger auf ein Objekt zeigt). Mit dem SVG-Interaktivität-Bedienfeld können Sie außerdem alle zur aktuellen Datei gehörenden Ereignisse und JavaScript-Dateien anzeigen.

Löschen eines Ereignisses aus dem SVG-Interaktivität-Bedienfeld

  • Soll ein Ereignis gelöscht werden, wählen Sie es aus und klicken Sie auf die Schaltfläche „Löschen“ oder wählen Sie im Bedienfeldmenü den Befehl „Ereignis löschen“.
  • Sollen alle Ereignisse gelöscht werden, wählen Sie im Bedienfeldmenü den Befehl „Ereignisse löschen“.

Auflisten, Hinzufügen oder Entfernen von Ereignissen, die mit einer Datei verknüpft sind

  1. Klicken Sie auf die Schaltfläche „JavaScript-Dateien verknüpfen“ .
  2. Wählen Sie im Dialogfeld „JavaScript-Dateien“ einen JavaScript-Eintrag aus und führen Sie einen der folgenden Schritte durch:
    • Klicken Sie auf „Hinzufügen“, um weitere JavaScript-Dateien zu suchen.

    • Klicken Sie auf „Entfernen“, um den ausgewählten JavaScript-Eintrag zu löschen.

Einfügen von SVG-Interaktivität in Bildmaterial

  1. Wählen Sie im SVG-Interaktivität-Bedienfeld ein Ereignis aus. (Siehe SVG-Ereignisse.)
  2. Geben Sie das jeweilige JavaScript-Skript ein und drücken Sie die Eingabetaste.

SVG-Ereignisse

onfocusin

Löst eine Aktion aus, sobald der Fokus auf dem Element liegt (beispielsweise durch Auswahl mit dem Mauszeiger).

onfocusout

Löst eine Aktion aus, sobald der Fokus nicht mehr auf dem Element liegt (weil beispielsweise ein anderes Element den Fokus erhält).

onactivate

Löst eine Aktion per Mausklick oder Tastendruck (je nach SVG-Element) aus.

onmousedown

Löst eine Aktion aus, wenn die Maustaste über einem Element gedrückt wird.

onmouseup

Löst eine Aktion aus, wenn die Maustaste über einem Element losgelassen wird.

onclick

Löst eine Aktion aus, wenn über einem Element auf die Maustaste geklickt wird.

onmouseover

Löst eine Aktion aus, wenn der Mauszeiger auf ein Element verschoben wird.

onmousemove

Löst eine Aktion aus, während sich der Mauszeiger über einem Element befindet.

onmouseout

Löst eine Aktion aus, wenn der Mauszeiger von einem Element weg bewegt wird.

onkeydown

Löst eine Aktion aus, wenn eine Taste gedrückt wird.

onkeypress

Löst eine Aktion aus, während eine Taste gedrückt wird.

onkeyup

Löst eine Aktion aus, wenn eine Taste losgelassen wird.

onload

Löst eine Aktion aus, nachdem das SVG-Dokument vom Browser vollständig analysiert wurde. Verwenden Sie dieses Ereignis zum Aufruf von nur einmalig stattfindenden Initialisierungsfunktionen.

onerror

Löst eine Aktion aus, wenn ein Element nicht ordnungsgemäß geladen wird oder ein anderer Fehler auftritt.

onabort

Löst eine Aktion aus, wenn das Laden der Seite gestoppt wird, bevor das Element vollständig geladen ist.

onunload

Löst eine Aktion aus, wenn das SVG-Dokument aus einem Fenster oder Frame entfernt wird.

onzoom

Löst eine Aktion aus, wenn der Zoomfaktor für das Dokument geändert wird.

onresize

Löst eine Aktion aus, wenn die Größe des Dokuments geändert wird.

onscroll

Löst eine Aktion aus, wenn der Besucher der Website die Bildlaufleisten am rechten oder unteren Rand des Fensters verwendet, um durch das Dokument zu blättern.

Web-optimierte SVG-Exportoptionen

Eine neue SVG-Exportoption („Datei“ > „Exportieren“ > „SVG“) steht nun zur Verfügung. Mit dem neuen Arbeitsablauf können Sie standardisierte, Web-optimierte SVG-Dateien für Web- und Bildschirmdesign-Projekte erstellen.

Folgende Optionen stehen zur Verfügung:

  • Stil. Wählen Sie aus, wie der resultierende Code in die SVG-Datei geschrieben werden soll. Wählen Sie zwischen dem internen CSS-, Inline-, oder Präsentationsattribute-Format aus.
  • Schriftart. Wählen Sie aus, wie Schriftarten in der SVG-Datei dargestellt werden. Konturen behalten die Pfaddefinition bei und sind am besten kompatibel.
  • Bilder: Wählen Sie diese Option, wenn die Bilder als im Dokument eingebettet oder als verknüpfte Dateien außerhalb des Dokuments gespeichert werden sollen.
  • Objekt-IDs: Wählen Sie aus, wie ID-Typen (Namen) Objekten in der SVG-Datei zugewiesen werden. Wählen Sie zwischen Ebenennamen, Minimal oder Individuell aus. Diese Option legt fest, wie doppelte Namen von Objekten bearbeitet werden und wie die Objekte im exportierten CSS-Code benannt werden.
  • Dezimal: Wählen Sie, wie viele Informationen über die Genauigkeit der Objektspeicherorte Sie beibehalten möchten. Durch einen höheren Dezimalwert werden Objekte genauer angeordnet. Dies erhöht die visuelle Genauigkeit der gerenderten SVGs. Wenn Sie einen Dezimalwert erhöhen, erhöht sich auch die Dateigröße der daraus resultierenden exportierten SVG-Datei.
  • Herabsetzen: Optimiert die Dateigröße der SVGs durch Entfernen von leeren Gruppen und Leerstellen. Bei Auswahl dieser Option verringert sich auch die Lesbarkeit des resultierenden SVG-Codes.
  • Interaktiv. Wenn Sie diese Option wählen, wird sichergestellt, dass die erstellte SVG in einem Browser skaliert wird. Keine absoluten Größenwerte werden gespeichert.
  • Code anzeigen: Öffnet den exportierten Inhalt im Standard-Texteditor.
  • Im Browser anzeigen (Symbol): Zeigt das Bild im Standard-Webbrowser an.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™ und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie