Was ist SVG?

SVG ist eine XML-Markup-Sprache zur Beschreibung zweidimensionaler Bilder. SVG-Dateien bieten auflösungsunabhängige HiDPI-Grafiken für das Web, für den Druck und für Mobilgeräte in einem kompakten Format. Sie können SVG mit CSS gestalten. Durch die Unterstützung von Skripterstellung und Animation ist SVG ein zentraler Bestandteil der Web-Plattform.

Einige häufige Bildformate für das Web, wie GIF, JPEG und PNG, sind sehr groß und verfügen häufig nur über eine geringe Auflösung. Das SVG-Format bietet deutlichen Mehrwert, da Sie Bilder anhand von Vektorformen, Text und Filtereffekten beschreiben können. SVG-Dateien sind kompakt und bieten qualitativ hochwertige Grafiken im Web und auch auf Handheld-Geräten mit beschränkten Ressourcen. 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 Bühne erstellt wurden. Das SVG-Format basiert vollständig auf XML und bietet Entwicklern und anderen Besuchern der Website eine Reihe von Vorteilen.

Hinweis:

Sie können jetzt SVG-Dateien ohne unerwünschte Definitionen und dabei erstellten IDs aus Animate exportieren. Die Zusammensetzung in SVG wurde in Animate 19.1 verbessert. Diese Exportoption verbessert die Qualität der SVG-Dateien, die in Character Animator importiert werden.

Der Arbeitsablauf „SVG exportieren“ in Animate CC

Animate CC bietet Ihnen die Möglichkeit, ins SVG-Format, Version 1.1 zu exportieren. Sie können mit den leistungsstarken Design-Werkzeugen in Animate optisch ansprechende Grafiken erstellen und dann ins SVG-Format exportieren.

In Animate CC können Sie ausgewählte Frames und Keyframes einer Animation exportieren. Und da es sich bei der exportierten Grafik um einen Vektor handelt, ist die Auflösung des Bildes auch dann hoch, wenn es auf eine andere Größe skaliert wird.

Die Funktion „SVG exportieren“ ersetzt den ehemaligen FXG-Export (seit Animate CC (Juni 2013) nicht mehr verfügbar). Sie werden feststellen, dass die Leistungsfähigkeit der SVG-Exportfunktion und die Qualität der Ausgabe deutlich besser sind. Außerdem ist der Inhaltsverlust im Vergleich zu FXG in SVG minimal.

Grafik mit Filtereffekten

Bei SVG werden Filtereffekte unter Umständen nicht exakt so angezeigt wie in Animate, da es keine 1-zu-1-Zuordnung zwischen den in Animate und SVG verfügbaren Filtern gibt. Allerdings nutzt Animate Kombinationen aus verschiedenen primitiven Filtern, die in SVG verfügbar sind, um einen ähnlichen Effekt zu simulieren.

Verwalten mehrerer Symbole

Der SVG-Export verwaltet mehrere Symbole nahtlos, ohne dass dabei Inhalt verlorengeht. Die Ausgabe ähnelt dem Bildmaterial auf der Bühne in Animate stark.

Exportieren von Bildmaterial im SVG-Format

  1. Bewegen Sie in Animate CC den Abspielkopf auf den entsprechenden Frame.
  2. Wählen Sie „Datei“ > „Exportieren“ > „Bild exportieren“ oder wählen Sie „Datei“ > „Veröffentlichungseinstellungen“ (wählen Sie die Option „SVG-Bild“ im Abschnitt „Andere Formate“).
  3. Geben Sie das Verzeichnis ein bzw. wechseln Sie zu dem Verzeichnis, in dem die SVG-Datei gespeichert werden soll. Stellen Sie sicher, dass Sie als Dateityp beim Speichern „SVG“ auswählen.
  4. Klicken Sie auf „OK“.
  5. Wählen Sie im Dialogfeld „SVG exportieren“ die Option zum Einbetten oder zum Verknüpfen mit der SVG-Datei.
    • Ausgeblendete Ebenen einschließen Exportiert alle ausgeblendeten Ebenen im Animate-Dokument. Wenn Sie die Option „Ausgeblendete Ebenen exportieren“ deaktivieren, wird keine der ausgeblendeten Ebenen (einschließlich der in Filmen verschachtelten Ebenen), die als ausgeblendet markiert ist, in die SVG-Datei exportiert. Auf diese Weise können Sie problemlos Versionen von Animate-Dokumenten testen, indem Sie Ebenen ausblenden.
    • Einbetten: Bettet ein Bitmap in die SVG-Datei ein. Verwenden Sie diese Option, wenn Sie Bitmaps direkt in die SVG-Datei einbetten möchten.
    • Hyperlink: Gibt einen Hyperlink zum Pfad der Bitmapdateien an. Verwenden Sie diese Option, wenn Sie Bitmaps nicht einbetten, sondern in der SVG-Datei einen Link zu den Bitmaps verwenden möchten. Wenn Sie die Option Bilder in Ordner kopieren wählen, werden die Bitmaps im Ordner Bilder gespeichert, der in dem Verzeichnis erstellt wird, in das die SVG-Datei exportiert wird. Wenn Sie die Option Bilder in Ordner kopieren nicht auswählen, werden die Bitmaps in der SVG-Datei mit ihrem Originalpfad referenziert. Wenn das Bitmap-Quellverzeichnis nicht verfügbar ist, wird es in die SVG-Datei eingebettet.
    • Bilder nach /Images kopieren: Ermöglicht Ihnen das Kopieren der Bitmap in den Ordner /Images. Der Ordner /Imageswird, falls er noch nicht vorhanden ist, im Exportspeicherort der SVG-Datei erstellt.
export-to-svg
  1. Klicken Sie auf OK.

Hinweis:

Einige Funktionen von Animate werden vom SVG-Format nicht unterstützt. Mit diesen Funktionen erstellter Inhalt wird entweder gelöscht und beim Export standardmäßig in eine unterstützte Funktion geändert. Weitere Informationen entnehmen Sie bitte diesem Artikel.

Alternativ können Sie das Dialogfeld „Einstellungen für Veröffentlichungen“ dazu verwenden, SVG-Dateien aus Animate CC zu exportieren (Datei > Einstellungen für Veröffentlichungen). Wählen Sie im Bereich „Andere Formate“ die Option SVG, um SVG-Dateien zu exportieren.

Hinweis:

Wir empfehlen, SVG-Dateien nur in modernen Browsern anzuzeigen, für die die aktuellsten Updates installiert wurden. Dies liegt daran, dass einige Grafikfilter und Farbeffekte in älteren Browserversionen wie Internet Explorer 9 unter Umständen nicht korrekt wiedergegeben werden.

Austauschen von SVG-Dateien mit Adobe Illustrator

Animate CC ermöglicht den Austausch von Inhalten mit Adobe Illustrator. Dieser Arbeitsablauf ersetzt die FXG-Exportfunktion, die ab Animate CC (13.0) nicht mehr angeboten wird. Sie können SVG-Dateien aus Animate exportieren und sie dann in Adobe Illustrator importieren. Weitere Informationen zur Verwendung von SVG-Dateien in Adobe Illustrator finden Sie im folgenden Hilfethema.

Verwenden Sie diesen Arbeitsablauf, wenn Sie Ihr Bildmaterial differenziert bearbeiten und reichhaltig Details hinzufügen möchten. Sie können Illustrator auch nutzen, um dem Bildmaterial Effekte wie Schlagschatten hinzuzufügen.

Um SVG-Dateien in Adobe Illustrator zu bearbeiten und den bearbeiteten Inhalt in Animate zu verwenden, gehen Sie wie folgt vor:

  1. Exportieren Sie die Datei in Animate CC zu SVG.
  2. Bearbeiten Sie das Bildmaterial, indem Sie die SVG-Datei mit Adobe Illustrator öffnen.
  3. Speichern Sie die SVG-Datei als .ai-Datei und importieren Sie sie in Animate. Weitere Informationen zur Verwendung von Illustrator-Dateien in Animate.
Print

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