Benutzerhandbuch Abbrechen

Exportieren von SVG-Dateien

  1. Adobe Animate-Benutzerhandbuch
  2. Einführung in Animate
    1. Neue Funktionen in Animate
    2. Visuelles Glossar
    3. Systemanforderungen für Animate
    4. Tastaturbefehle für Animate
    5. Mit verschiedenen Dateitypen in Animate arbeiten
  3. Animation
    1. Grundlagen von Animationen in Animate
    2. So verwenden Sie Bilder und Schlüsselbilder in Animate
    3. Einzelbildanimation in Animate
    4. So arbeiten Sie in Animate mit klassischen Tween-Animationen
    5. Pinselwerkzeug
    6. Bewegungsführung
    7. Bewegungs-Tweens und ActionScript 3.0
    8. Bewegungs-Tween-Animationen
    9. Bewegungs-Tween-Animationen
    10. Erstellen von Bewegungs-Tween-Animationen
    11. Verwenden von Eigenschaftenschlüsselbildern
    12. Animieren der Position mithilfe eines Tweens
    13. So bearbeiten Sie Bewegungs-Tweens mit dem Bewegungs-Editor
    14. Bearbeiten des Bewegungspfades einer Tween-Animation
    15. Manipulieren von Bewegungs-Tweens
    16. Hinzufügen von benutzerdefinierten Beschleunigungen
    17. Erstellen und Anwenden von Bewegungsvoreinstellungen
    18. Einrichten von Animations-Tween-Bereichen
    19. Arbeiten mit als XML-Dateien gespeicherten Bewegungs-Tweens
    20. Vergleich von Bewegungs-Tweens und klassischen Tweens
    21. Form-Tweening
    22. Verwenden von Animation mit dem Bone-Werkzeug in Animate
    23. Arbeiten mit Figuren-Rigging in Animate
    24. So verwenden Sie Maskenebenen in Adobe Animate
    25. So arbeiten Sie in Animate mit Szenen
  4. Interaktivität
    1. So erstellen Sie in Animate Schaltflächen
    2. Konvertieren von Animate-Projekten in andere Dokumenttypen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Interaktivität mit Codefragmenten in Animate hinzufügen
    5. Erstellen benutzerdefinierter HTML5-Komponenten
    6. Verwenden von Komponenten in HTML5 Canvas
    7. Erstellen von benutzerdefinierten Komponenten: Beispiele
    8. Codefragmente für benutzerdefinierte Komponenten
    9. Empfohlene Verfahren – Anzeigen mit Animate
    10. Authoring und Veröffentlichen für VR
  5. Arbeitsbereich und Arbeitsablauf
    1. Erstellen und Verwalten von Pinseln
    2. Verwenden von Google Fonts in HTML5 Canvas-Dokumenten
    3. Verwenden von Creative Cloud Libraries in Adobe Animate
    4. Bühne und Bedienfeld „Werkzeuge“ in Animate verwenden
    5. Arbeitsablauf und Arbeitsbereich in Animate
    6. Verwenden von Webschriftarten in HTML5 Canvas-Dokumenten
    7. Zeitleisten und ActionScript
    8. Arbeiten mit mehreren Zeitleisten
    9. Festlegen von Voreinstellungen
    10. Verwenden der Animate-Authoring-Bedienfelder
    11. Zeitleisten-Ebenen in Animate erstellen
    12. Exportieren von Animationen für Apps und Game-Engines
    13. Verschieben und Kopieren von Objekten
    14. Vorlagen
    15. Suchen und Ersetzen in Animate
    16. Rückgängigmachen, Wiederholen und das Bedienfeld „Protokoll“
    17. Tastaturbefehle
    18. So verwenden Sie die Zeitleiste in Animate
    19. Erstellen von HTML-Erweiterungen
    20. Optimierungsoptionen für Bilder und animierte GIF-Dateien
    21. Exporteinstellungen für Bilder und GIF-Dateien
    22. Bedienfeld „Elemente“ in Animate
  6. Multimedia und Video
    1. Transformieren und Kombinieren von Grafikobjekten in Animate
    2. Erstellen von und Arbeiten mit Symbolinstanzen in Animate
    3. Bildnachzeichner
    4. So verwenden Sie Sound in Adobe Animate
    5. Exportieren von SVG-Dateien
    6. Erstellen von Videodateien zur Verwendung in Animate
    7. So fügen Sie in Animate ein Video hinzu
    8. Arbeiten mit Video-Cue-Points
    9. Objekte in Animate zeichnen und erstellen
    10. Umformen von Linien und Formen
    11. Striche, Füllungen und Farbverläufe in Animate CC
    12. Adobe Premiere Pro und After Effects
    13. Farb-Bedienfelder in Animate CC
    14. Öffnen von Flash CS6-Dateien mit Animate
    15. In Animate mit klassischem Text arbeiten
    16. Platzieren von Bildern in Animate
    17. Importierte Bitmaps in Animate
    18. 3D-Grafiken
    19. Arbeiten mit Symbolen in Animate
    20. Zeichnen von Linien und Formen mit Adobe Animate
    21. Mit Bibliotheken in Animate arbeiten
    22. Exportieren von Sounds
    23. Auswählen von Objekten in Animate CC
    24. Arbeiten mit Adobe Illustrator AI-Dateien in Animate
    25. Anwenden von Mustern mit dem Sprühen-Werkzeug
    26. Anwenden von Mischmodi
    27. Anordnen von Objekten
    28. Automatisieren von Aufgaben mit dem Menü „Befehle“
    29. Mehrsprachiger Text
    30. Verwenden der Kamera in Animate
    31. Verwenden von Animate mit Adobe Scout
    32. Arbeiten mit Fireworks-Dateien
    33. Grafikfilter
    34. Sounds und ActionScript
    35. Zeichnungsvoreinstellungen
    36. Zeichnen mit dem Stiftwerkzeug
  7. Plattformen
    1. Konvertieren von Animate-Projekten in andere Dokumenttypen
    2. Unterstützung benutzerdefinierter Plattformen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Erstellen und Veröffentlichen eines WebGL-Dokuments
    5. So packen Sie Apps für AIR for iOS:
    6. Veröffentlichen von Apps für AIR for Android
    7. Veröffentlichen für Adobe AIR für den Desktop
    8. ActionScript-Veröffentlichungseinstellungen
    9. Empfohlene Verfahren – Organisieren von ActionScript in einer Anwendung
    10. So verwenden Sie ActionScript mit Animate
    11. Empfohlene Verfahren – Richtlinien für Eingabehilfen
    12. Eingabehilfen für den Animate-Arbeitsbereich
    13. Schreiben und Verwalten von Skripts
    14. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
    15. Unterstützung benutzerdefinierter Plattformen – Übersicht
    16. Erstellen barrierefreier Inhalte
    17. Arbeiten mit Plug-ins zur Unterstützung benutzerdefinierter Plattformen
    18. Debuggen von ActionScript 3.0
    19. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
  8. Exportieren und Veröffentlichen
    1. So exportieren Sie Dateien aus Animate CC
    2. OAM-Veröffentlichung
    3. Exportieren von SVG-Dateien
    4. Exportieren von Grafiken und Videos mit Animate
    5. Veröffentlichen von AS3-Dokumenten
    6. Exportieren von Animationen für Apps und Game-Engines
    7. Exportieren von Sounds
    8. Exportieren von QuickTime-Videodateien
    9. Steuern der Wiedergabe von externen Videos mithilfe von ActionScript
    10. Empfohlene Verfahren – Tipps zum Erstellen von Inhalten für mobile Geräte
    11. Empfohlene Verfahren – Videokonventionen
    12. Empfohlene Verfahren – Authoring-Richtlinien für SWF-Anwendungen
    13. Empfohlene Verfahren – Strukturierung von FLA-Dateien
    14. Empfohlene Verfahren für die Optimierung von FLA-Dateien für Animate
    15. ActionScript-Veröffentlichungseinstellungen
    16. Veröffentlichungseinstellungen für Animate festlegen
    17. Exportieren von Projektor-Dateien
    18. Exportieren von Bildern und animierten GIF-Dateien
    19. HTML-Veröffentlichungsvorlagen
    20. Adobe Premiere Pro und After Effects
    21. Schnelles Teilen und Veröffentlichen Ihrer Animationen

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

Animate 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 können Sie ausgewählte Bilder und Schlüsselbilder 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 (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 den Abspielkopf auf das entsprechende Bild.
  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.
    • Für Character Animator optimieren: Ermöglicht es Ihnen, SVG-Dateien zu exportieren, die problemlos in Character Animator funktionieren.

  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 „Veröffentlichungseinstellungen“ dazu verwenden, SVG-Dateien aus Animate zu exportieren (Datei > Veröffentlichungseinstellungen). 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 ermöglicht den Austausch von Inhalten mit Adobe Illustrator. Dieser Arbeitsablauf ersetzt die FXG-Exportfunktion, die ab Animate (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 im SVG-Format.
  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.

Adobe-Logo

Bei Ihrem Konto anmelden