SVG

Das SVG-Format ist ein Vektorformat, das Bilder mittels Formen, Pfaden, Text und Filtereffekten beschreibt. Die sich so ergebenden Dateien sind kompakt und ergeben professionelle Grafiken für Web und Druck und sogar für Handhelds, deren Ressourcen beschränkt sind – anders als Grafiken im GIF-, JPEG-, WBMP oder PNG-Format, die bedeutend größer sind. SVG-Bilder können ohne Schärfe- oder Detailverlust auf dem Bildschirm vergrößert werden. Außerdem bietet SVG hervorragende Unterstützung für Text und Farben, wodurch sichergestellt wird, dass die Bilder 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 wie auch Besuchern der Website eine Reihe von Vorteilen. 

Mit den Befehlen Speichern, Speichern unter, Kopie speichern und Für Web und Geräte speichern können Sie Bildmaterial im SVG-Format speichern. Die Befehle Speichern, Speichern unter und Kopie speichern ermöglichen den Zugriff auf sämtliche SVG-Export-Optionen. Der Befehl Für Web und Geräte speichern bietet eine Teilmenge der SVG-Export-Optionen, die für die weborientierte Arbeit von Relevanz sind.

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.

Wenn Sie einen SVG-Filter-Effekt 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.

Importieren von Effekten aus einer SVG-Datei

SVG-Interaktivitäts-Bedienfeld – Übersicht

Mit dem SVG-Interaktivitäts-Bedienfeld können Sie alle zur aktuellen Datei gehörenden Ereignisse und JavaScript-Dateien anzeigen.
Mit dem SVG-Interaktivitäts-Bedienfeld (Fenster > SVG-Interaktivität) können Sie Ihr Bildmaterial um interaktive Funktionen erweitern, 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 mit dem Mauszeiger auf ein Objekt zeigt).

Ereignisse aus dem SVG-Interaktivitäts-Bedienfeld löschen

Mit dem SVG-Interaktivitäts-Bedienfeld können Sie ein oder alle Ereignisse löschen.

Mit einer Datei verknüpfte Ereignisse auflisten, hinzufügen oder entfernen

Wählen Sie JavaScript-Dateien verknüpfen und dann Hinzufügen, um zusätzliche JavaScript-Dateien hinzuzufügen, oder Entfernen, um den ausgewählten JavaScript-Eintrag zu entfernen.

SVG-Interaktivität zu Bildmaterial hinzufügen

SVG-Ereignisse

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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.

Tipps für das Erstellen von SVG-Dateien

• Verwenden Sie Ebenen, um einer 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.

• 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. Verwenden Sie SVG-Effekte, um Grafikeffekte hinzuzufügen, ohne das Bildmaterial dabei in ein Pixelbild umzuwandeln.

• Verwenden Sie Symbole, und vereinfachen Sie die Pfade im Bildmaterial, um die SVG-Datei zu optimieren. Wenn die Arbeitsgeschwindigkeit von Bedeutung ist, 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. Bewegungen der Maus und Tastatureingaben können Skriptfunktionen (z. B. Rollover-Effekte) ausgelöst werden.

Web-optimierte SVG-Export-Optionen

Eine neue SVG-Export-Option (Datei > Exportieren > Exportieren als > 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. Weitere Informationen finden Sie unter SVG-Export-Optionen.

Verwandte Ressourcen

Kontaktaufnahme