Operation Manual

SVG
Nach oben
Nach oben
Wissenswertes zu SVG
Anwenden von SVG-Effekten
Importieren von Effekten aus einer SVG-Datei
SVG-Interaktivität-Bedienfeld – Übersicht
Einfügen von SVG-Interaktivität in Bildmaterial
SVG-Ereignisse
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-