Medien im SVG-Format optimal nutzen

Geändert am Mo, 1 Jun um 9:55 VORMITTAGS

Bei der Verwendung von Medien im SVG-Format können u.U. fehlerhafte Darstellungen auftreten, je nach den Einstellungen, mit denen die SVG-Datei erstellt wurde. In diesem Artikel erfahren Sie, wie Sie SVG-Dateien optimieren können.

Mögliche Auffälligkeiten

Bei folgenden Auffälligkeiten kann eine SVG-Datei die Ursache sein:

Das SVG-Medium wird in der Mediensuche, aber nicht im Kurs selbst angezeigt.
Der SVG-Export schlägt fehl.
Das SVG-Medium wird im exportierten PDF nicht oder sehr klein dargestellt.
Das SVG-Medium wird nicht korrekt hochgeladen und in der Kursvorschau nicht angezeigt.

Optimierungsmöglichkeiten

Um SVG-Dateien mit der höchstmöglichen Kompatibilität zu erstellen, ist es empfehlenswert, die Einstellungen möglichst simpel zu halten und keine zu komplexen Effekte zu verwenden.

In der folgenden Übersicht finden Sie Beispiele für Einstellungen, die Sie bei der Erstellung eines SVG-Mediums in einem Grafikprogramm überprüfen bzw. bei einer fehlerhaften Darstellung anpassen können:

Verwendung der Symbole-Funktion in Adobe Illustrator: Diese Funktion führt dazu, dass Vektoren nicht mit den üblichen Einstellungen in das SVG-Format übertragen werden. Das kann zu falschen Darstellungen, z.B. in Webbrowsern, führen.
Verwendung von zu viel Weißraum: Eine zu kleine Darstellung eines Mediums kann an zu viel Weißraum rund um die eigentliche Abbildung liegen. Entfernen Sie in diesem Fall den Weißraum, indem Sie die Arbeitsfläche auf die Inhalte reduzieren.
Verwendung eines nicht erlaubten Elements im SVG, z.B. <ContainsAiGeneratedContent>.
Zu komplexe Ebenenstruktur: Weniger verschachtelte Gruppen und Ebenen können helfen, die Kompatibilität zu erhöhen.
Zu komplexe Filtereffekte, insbesondere für Schatten: Weniger komplexe Filter helfen, die Komplexität zu verringern, insbesondere wenn mehrere Filter kombiniert wurden.
Verwendung von 3D-Effekten: Vermeiden Sie 3D-Effekte, um die Komplexität gering zu halten.
Verwendung von feDropShadow: Dieser Tag ist nicht erlaubt.
Fehlendes Attribut "in2" im Tag feComposite: Stellen Sie sicher, dass das Attribut hinterlegt ist, wenn der Tag feComposite verwendet wird.
Fehlen von Größenangaben: Überprüfen Sie, ob für "width" und "height" die entsprechenden Größenangaben hinterlegt sind.
Verwendung passender Exportoptionen: Verwenden Sie die das SVG-Format SVG 1.1 und die Kodierung UTF-8.

Kontaktieren Sie uns bei spezifischen Fragen zur Darstellung von SVG-Medien. Wir unterstützen Sie gern.