Benutzerhandbuch Abbrechen

SVG

Erfahren Sie mehr über die Arbeit mit SVG, um XML und JavaScript zur Erstellung von Webgrafiken zu nutzen, die auf Benutzeraktionen mit komplexen Effekten wie Hervorhebung, QuickInfos, Audiowiedergabe und Animation reagieren.

Adobe Illustrator deeplink

In der Applikation ausprobieren
Wende SVG-Filter in wenigen einfachen Schritten an.

Wissenswertes zu 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

Verwende SVG-Effekte (Filter), um dein Bildmaterial mit Eigenschaften wie „Schlagschatten“ zu versehen. Im Gegensatz zu Bitmap-Effekten basieren SVG-Effekte auf XML und sind auflösungsunabhängig. Ein SVG-Effekt ist 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. Du kannst einen Standardeffekt direkt anwenden oder seinen XML-Code durch Bearbeitung anpassen. Du kannst auch neue SVG-Effekte erstellen.

Hinweis:

Bearbeite die Datei „Adobe SVG Filters.svg“ in einem Texteditor, um die Standard-SVG-Filter von Illustrator zu ändern. Die Datei befindet sich an folgendem Speicherort:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <Version>/<Gebietsschema>
  • Windows: C:\Benutzer\<Benutzername>\AppData\Roaming\Adobe\Adobe Illustrator <Version> Settings\<Gebietsschema>\x64

Du kannst bestehende Filterdefinitionen ändern oder löschen und neue Filterdefinitionen hinzufügen.

Anwenden eines Standardeffekts

  1. Wähle ein Objekt oder eine Gruppe aus (oder wähle im Ebenenbedienfeld eine Ebene aus).

  2. Navigiere zu Effekt > SVG-Filter > SVG-Filter anwenden.

Anwenden eines benutzerdefinierten Effekts

  1. Wähle ein Objekt oder eine Gruppe aus (oder wähle im Ebenenbedienfeld eine Ebene aus).

  2. Navigiere zu Effekt > SVG-Filter > SVG-Filter anwenden.

  3. Wähle im Dialogfeld einen Effekt und anschließend SVG-Filter bearbeiten aus. Bearbeite den Standardcode und wähle OK aus.

Neuen Effekt erstellen und anwenden

  1. Wähle ein Objekt oder eine Gruppe aus (oder wähle im Ebenenbedienfeld eine Ebene aus).

  2. Navigiere zu Effekt > SVG-Filter > SVG-Filter anwenden.

  3. Wähle im Dialogfeld das Symbol Neuer SVG-Filter  aus. Geben Sie den neuen Code ein, und wählen Sie OK.

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.

Hinweis:

Wenn ein Objekt mehrere Effekte nutzt, muss der SVG-Effekt der letzte Effekt sein. Es muss also am unteren Rand des Bedienfelds Aussehen (direkt über dem Eintrag Transparenz) angezeigt werden. Folgen dem SVG-Effekt noch weitere Effekte, wird in der SVG-Ausgabe ein Pixelbildobjekt ausgegeben.

Importieren von Effekten aus einer SVG-Datei

  1. Wähle Effekt > SVG-Filter > SVG-Filter importieren aus.

  2. Wählen Sie die SVG-Datei aus, aus der Sie Effekte importieren möchten, und wählen Sie Öffnen.

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.

So löschen Sie ein Ereignis

  • Wählen Sie das Ereignis aus, und wählen Sie Ausgewählten Eintrag entfernen.

So löschen Sie alle Ereignisse

  • Wählen Sie im Menü des Bedienfelds die Option 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

  1. Wählen Sie im SVG-Interaktivitäts-Bedienfeld ein Ereignis aus. (Siehe SVG-Ereignisse.)

  2. Geben Sie das entsprechende 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 wegbewegt 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.

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. (Beispiel: Eine Ebene namens „Button1“ wird in der SVG-Datei zu „<g id="Button1_ver3.0">“). Verschachtelte Ebenen werden zu verschachtelten SVG-Gruppen und ausgeblendete Ebenen werden mit der SVG-Stileigenschaft „display="none"“ festgelegt.

  • 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 Workflow können Sie standardisierte, web-optimierte SVG-Dateien für Web- und Bildschirmdesign-Projekte erstellen. Weitere Informationen finden Sie unter SVG-Export-Optionen.

Ähnliche Themen

Noch eine Frage oder Idee?

Fragen an die Community

Wenn du noch Fragen hast oder eigene Ideen weitergeben möchtest, beteilige dich an unserer Adobe Illustrator-Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?