SVG in Google Web Designer

SVG ist ein XML-basiertes Bildformat, das für Vektorgrafiken verwendet wird. SVG-Bilder können insbesondere bei responsiven Layouts hilfreich sein, da ihre Größe ohne Qualitätsverlust angepasst werden kann.

Größe von SVG-Bildern anpassen

Wenn Sie ein SVG-Bild oder eine SVG-Form vergrößern möchten, nutzen Sie anstelle der 3D-Skalierung die Eigenschaften für Breite und Höhe. Falls Sie den Bearbeitungsmodus des Auswahltools verwenden, müssen Sie möglicherweise den Größenanpassungs-Style ändern.

SVGs hinzufügen

Es gibt mehrere Möglichkeiten, SVGs zu Ihrem Dokument hinzuzufügen:

• SVG-Datei importieren (weitere Informationen siehe unten)
• Mit Stift- und Formtools eine SVG-Form zeichnen
• SVG-Code direkt in der Codeansicht einfügen
• SVG-Code in der Designansicht einfügen
• Ein Textelement durch Anwenden eines SVG-Filters in eine SVG-Datei konvertieren

SVG-Dateien importieren

Sie können eine SVG-Datei importieren, indem Sie den Menübefehl Datei > Assets importieren... verwenden oder die Datei in das Google Web Designer-Fenster ziehen.

Beim Importieren einer SVG-Datei können Sie wählen, ob Sie das SVG als Bild importieren oder den Inline-SVG-Code in den HTML-Code des Dokuments einbetten möchten. In der folgenden Tabelle sind einige Anwendungsfälle für jede Methode aufgeführt.

Bild	Inline
Als Bildmaske verwenden Kompatibel mit Blickpunkten Farben können extrahiert werden In der Mediathek aufgeführt	Kompatibel mit SVG-Filtern In der Codeansicht bearbeitbar

SVG-Filter

Mit SVG-Filtern können Sie Effekte zu SVG-Elementen hinzufügen, z. B. einen Weichzeichnungsfilter oder einen Schein. Hier finden Sie eine vollständige Liste der SVG-Filter.

    

Beispiele für SVG-Filtereffekte (unbearbeitete SVG-Grafiken auf der linken Seite)