Verwenden von SVG-Grafiken

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

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.

SVG-Einstellungen in Adobe Illustrator

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 im Dropdown-Menü „Dateityp“ „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
    • SchriftartenText: In Konturen umwandeln
    • CSS-Eigenschaften: Präsentationsattribute
    • Dezimalstellen: 3
    • Kodierung: Unicode (UTF-8)

  4. Klicken Sie auf „OK“, um die Datei zu speichern.

Importieren von SVG

Vergewissern Sie sich vor dem Importieren und Platzieren einer SVG-Datei in Adobe Muse, dass Sie die Schritte unter Vorbereiten von SVG-Dateien zum Platzieren in Adobe Muse befolgt haben.

  1. Wählen Sie in Adobe Muse Datei > Platzieren (Strg + D unter Windows und die Befehlstaste + 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.

Wenn die SVG-Datei platziert wurde, können Sie fortfahren, Ihre Website zu gestalten. Sie können das SVG-Bild nicht mit dem Freistellungswerkzeug zuschneiden. Allerdings können Sie die Größe entsprechend Ihres Designs anpassen.

Sie können eine importierte SVG-Datei mit einem Rasterbild verknüpfen. Sie können auch importierte Bilder wieder mit SVG-Dateien verknüpfen.

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.

  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.

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

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“.

  3. 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.

Videotutorial

Danielle Beaumont

Adobe-Logo

Bei Ihrem Konto anmelden