Erfahren Sie, wie Sie SVG-Grafiken in Adobe Muse CC importieren. Sie können SVG-Grafiken in Adobe Muse platzieren, kopieren und importieren.

Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Adobe Muse ermöglicht die Verwendung von Vektorgrafiken, die mit Werkzeugen wie Adobe Illustrator erstellt wurden, in Ihrem Site-Design. Derzeit unterstützt Adobe Muse nativ das Scalable Vector Graphics (SVG)-Format. Sie können das SVG-Format verwenden, um Logos, Symbole, Hintergrund- und Browser-Füllungen und vieles mehr zu erstellen und direkt auf der Webseiten-Leinwand in Adobe Muse zu platzieren.

Grafiken im SVG-Format sind klein und auflösungsunabhängig. Daher können diese Grafiken auf beliebige Abmessungen skaliert werden, ohne dass die Seitenladezeit und das Erscheinungsbild der Website beeinflusst werden. SVG-Dateien werden auch auf HiDPI-Anzeigen unterstützt. 

Da die SVG-Dateien auflösungsunabhängig sind, behandelt Adobe Muse sie bei Standard- und hochauflösenden Websites gleich. SVG-Dateien werden nicht auf 50 % der Originalgröße herunterskaliert, wenn sie auf der Webseiten-Leinwand in der Entwurfsansicht platziert werden.

Verarbeiten von SVG-Dateien vor dem Platzieren in Adobe Muse

Hinweis:

Das folgende Verfahren trifft nur zu, wenn Sie Adobe Muse 2015.1 oder frühere Versionen verwenden.  

Führen Sie für SVG-Dateien, die mit Adobe Illustrator erstellt wurden, folgende Schritte aus:

  1. Wählen Sie nach dem Gestalten der Grafik in Adobe Illustrator Datei > Speichern unter aus.

  2. Wählen Sie aus dem Dropdown-Menü „Dateityp“ die Option „SVG“ aus. Navigieren Sie zu dem Ordner, in dem die Datei gespeichert werden soll, und klicken Sie auf Speichern.

  3. Legen Sie im Dialogfeld „SVG-Optionen“ die folgenden Attribute fest:

    • Bildposition: Einbetten
    • SVG-Profil: SVG 1.1
    • Schriften Text: In Konturen umwandeln
    • CSS-Eigenschaften: Präsentationsattribute
    • Dezimalstellen: 3
    • Kodierung: Unicode (UTF-8)
    Geben Sie SVG-Einstellungen in Adobe Illustrator und bevor Sie SVG in Adobe Muse CC importieren.
  4. Klicken Sie auf „OK“, um die Datei zu speichern.

Importieren von SVG

Wenn Sie Adobe Muse 2015.1 oder eine frühere Version verwenden, führen Sie zunächst die unter Vorbereiten von SVG-Dateien zum Platzieren in Adobe Muse beschriebenen Schritte aus, bevor Sie eine SVG-Datei in Adobe Muse importieren und platzieren.

  1. Wählen Sie in Adobe Muse Datei > Platzieren (Strg + D unter Windows und Befehl + D unter Mac).

  2. Navigieren Sie zum Speicherort der SVG-Datei, wählen Sie sie aus und klicken Sie auf Öffnen.

  3. In Adobe Muse wird eine Miniaturvorschau der SVG zusammen mit dem Zeiger angezeigt. Klicken Sie auf eine geeignete Stelle auf der Webseiten-Leinwand, um die SVG-Datei zu platzieren. Die Datei, die Sie platziert haben, wird im Elementebedienfeld aufgeführt.

    Elementebedienfeld

Wenn die SVG-Datei platziert wurde, können Sie fortfahren, Ihre Website zu gestalten. Sie können das SVG-Bild mit dem Freistellungswerkzeug zuschneiden und das SVG-Bild entsprechend Ihren Design-Anforderungen skalieren.

Kopieren von SVG aus Adobe Illustrator

Adobe Muse ermöglicht es Ihnen, Inhalte aus Adobe Illustrator in die Webseiten-Arbeitsfläche zu kopieren. Das Kopieren von Inhalten ist nützlich, wenn Sie nicht den vollen Inhalt von Bildmaterial in Ihrem Site-Design speichern und verwenden möchten.

Wenn Sie Teile des Bildmaterials kopieren, konvertiert Illustrator die Auswahl in SVG und platziert sie zur Verwendung in Adobe Muse in die Zwischenablage. In Adobe Muse werden die kopierten Inhalte als eingebettetes SVG behandelt und Sie können die Grafik gemäß Ihren Design-Anforderungen skalieren.

  1. Führen Sie in Adobe Illustrator einen der folgenden Schritte durch:

    • Isolieren von Gruppen oder ausgewählten Pfaden: Klicken Sie mit der rechten Maustaste auf die Gruppe oder den Pfad, die bzw. den Sie kopieren möchten, und wählen Sie im Kontextmenü die Option zum Isolieren der Gruppe/des ausgewählten Pfads aus.
    • Manuelles Auswählen von Gruppen oder Pfaden: Wählen Sie eine Gruppe oder einen Pfad zum Kopieren aus.
    Auswählen einer Gruppe oder eines Pfads
  2. Verwenden Sie die Befehle Strg-Taste + C (Windows) bzw. Befehlstaste + C (Mac), um die ausgewählte Gruppe bzw. den Pfad zu kopieren.

  3. Verwenden Sie in Adobe Muse die Strg-Taste + V bzw. Befehlstaste + V, um die ausgewählte Gruppe oder den Pfad auf der Webseiten-Leinwand in der Entwurfsansicht einzufügen.

    Webseiten-Leinwand

    Die eingefügte SVG-Datei wird im Elementebedienfeld aufgeführt.

    Elementebedienfeld

Importieren von SVG für Hintergrund- und Browser-Füllung

  1. Wählen Sie die Option „Füllung“ oder „Browser-Füllung“ aus, wenn Sie eine Hintergrund- oder Browser-Füllung hinzufügen möchten. Weitere Informationen finden Sie unter Füllung und Browser-Füllung in Adobe Muse.

  2. Klicken Sie auf „Bild hinzufügen“. Navigieren Sie zum Speicherort der SVG-Datei, wählen Sie sie aus und klicken Sie auf „Öffnen“.

    Klicken Sie auf „Bild hinzufügen“.
  3. Legen Sie die Attribute zu „Anpassen“ und „Position“ entsprechend fest.

    Legen Sie die Attribute zu „Anpassen“ und „Position“ entsprechend fest

Hinweis:

Wenn SVG-Dateien zur Hintergrund- oder Browser-Füllung hinzugefügt werden, wird das Bild in der Entwurfsansicht gerastert angezeigt, wenn das Attribut „Anpassen“ auf Auf Seitengröße skalieren oder Auf Füllung skalieren festgelegt ist. Wenn es in Adobe Muse oder in einem Browser in der Vorschau angezeigt wird, wird das Bild jedoch wie erwartet gerendert.

Hinzufügen von SVG-Bildern zu Diashows

Ab Adobe Muse 2015.1 können Sie SVG-Bilder zu Diashows hinzufügen. Ziehen und platzieren Sie zuerst ein Miniatur-Widget aus der Widget-Bibliothek. Wählen Sie dann Ihre Vektorgrafiken aus Ihren Creative Cloud Libraries aus und platzieren Sie sie in Ihrer Diashow.

Videotutorial

Videotutorial
Danielle Beaumont

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