SVG-Grafiken aus Adobe Illustrator CC werden oft ohne Hintergründe an digitale Designer übergeben. Normalerweise werden die Grafiken über dem Hintergrund platziert, der auf der Webseite, in der App oder im interaktiven Kontext vorhanden ist.
Bevor wir uns mit der Frage beschäftigen, was es bedeutet, den Hintergrund hinter SVG-Grafiken auszublenden, konzentrieren wir uns auf die Anwendung von Transparenz auf SVG-Grafiken. Sie müssen die Deckkraft des Bildmaterials mithilfe des Transparenzbedienfelds definieren. Wie in der folgenden Abbildung zu sehen, wurde 50 Prozent Transparenz auf die gelbe Form angewendet, was deutlich sichtbar ist. Dieses Bild ist eine SVG-Datei mit all den Vorteilen, die SVG bietet: schnell ladend und unbegrenzt skalierbar.

Eine halbtransparente SVG-Form auf einem farbigen Hintergrund.
So geben Sie SVGs mit transparentem Hintergrund aus
Designer denken oft in Bezug auf Hintergründe, die entweder transparent sind oder sichtbar bleiben. Bei Formaten wie PNG und GIF erstellen Sie entweder einen Hintergrund oder wählen einen transparenten Hintergrund in einem Programm wie Illustrator oder Photoshop aus. Bei SVG-Dateien gibt es jedoch keinen undurchsichtigen Hintergrund, da SVG-Grafiken standardmäßig ohne Hintergrund gespeichert und exportiert werden.
Das Problem ist, dass Sie beim Speichern oder Exportieren von SVG-Dateien unbeabsichtigt einen weißen Hintergrund erhalten können. Es ist nicht immer einfach, dies auf den ersten Blick zu erkennen. Um sicherzugehen, ob der Hintergrund transparent ist, müssen Sie Ansicht→Transparenzraster anzeigen wählen.

Diese Grafik kann einen weißen Hintergrund haben oder keinen Hintergrund aufweisen. Wenn das Transparenzraster aktiviert ist, können Sie sehen, ob die Grafik hinter einem weißen Rechteck steht.

Beim Exportieren als SVG gibt es keine Option zur Auswahl einer Transparenzfarbe, da SVG-Dateien ohne Hintergrundfarbe erstellt werden.

Verbesserung der SVG-Darstellung während der Entwicklung
Wenn Sie ein Hintergrundrechteck hinter Ihren SVG-Grafiken nutzen möchten, um die Darstellung zu simulieren, stellen Sie sicher, dass Sie dieses Rechteck vor dem Speichern oder Exportieren entfernen. Eine bessere Lösung besteht darin, ein transparentes „Raster“ zu definieren, das die Hintergrundfarbe Ihrer Webseite oder App simuliert.
- Wählen Sie Datei→Dokument einrichten.
- Gehen Sie auf die Registerkarte Allgemein und suchen Sie den Abschnitt Transparenz- und Überdruckoptionen.
- Klicken Sie in diesem Abschnitt auf das erste der beiden Rasterfarbfelder und wählen Sie die gewünschten Hintergrundfarbe aus.
- Wählen Sie das zweite Rasterfarbfeld aus und weisen Sie ihm dieselbe Farbe zu.
- Klicken Sie auf OK im Dialogfeld.

Vorschau der Hintergrundfarbe mit einem benutzerdefinierten Transparenzraster.
Anwenden von Transparenzeffekten auf SVG
Wenn Transparenz oder Transparenzeffekte wie Farbbrennen, Abdunkeln oder Multiplizieren auf SVG-Grafiken angewendet werden, behalten diese Effekte die Skalierbarkeit von SVG. Hier sehen Sie, wie sich die Qualität zwischen PNG und SVG unterscheidet, wenn Transparenz angewendet wird:

Vorteile der Verwendung von SVG für Transparenzeffekte
Vorteil |
Beschreibung |
Kleinere Dateigröße |
SVG-Dateien sind qualitativ kleiner im Vergleich zu PNG-Dateien. |
Optimierbare Transparenz |
Web- und App-Entwickler können Transparenzwerte einfach anpassen und Interaktivität zuweisen. |
Keine Qualitätsverluste |
Die Grafik und die Transparenz behalten die Qualität, unabhängig von der Vergrößerung. |
Hintergrundfarbe bei SVG-Dateien füllen
Wenn Sie möchten, dass der Hintergrund Ihrer SVG-Datei eine Farbfüllung hat, können Sie dies über die Dokumenteigenschaften erreichen. Klicken Sie einfach auf den weißen Streifen neben Hintergrundfarbe und wählen Sie eine Farbe aus dem Farbauswahlfeld.

Es ist wichtig, darauf zu achten, dass Ihr SVG-Hintergrund trotz der Farbfüllung weiterhin transparent bleibt, solange die A-Spalte (die Transparenz der Farbe darstellt) bei 0 bleibt. Wenn Sie möchten, dass das SVG tatsächlich diese Hintergrundfarbe hat, ändern Sie diese Spalte auf 100.
Wenn Sie Fragen haben, die in diesem Beitrag nicht beantwortet wurden, hinterlassen Sie bitte einen Kommentar. Ich stehe Ihnen gerne zur Verfügung.