[SVG] Transparentes SVG-Icon

Um SVG-Icons transparent anzuzeigen, muss der Abschnitt rect angepasst werden. Wenn das rect keine Füllfarbe hat, behandelt der SVG‑Renderer das rect ohne "fill" als schwarz gefüllt, also nicht transparent.

Dadurch verdeckt es den Hintergrund. Durch das explizite Setzen von rect mit einem fill="none" wird das SVG-Icon vollständig transparent, nur der feste Inhalt (Beispiel-Symbol) bleibt sichtbar.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <defs>
        <linearGradient id="grad-light" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#38bdf8"/>
            <stop offset="100%" stop-color="#3b82f6"/>
        </linearGradient>
        <linearGradient id="grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#7dd3fc"/>
            <stop offset="100%" stop-color="#60a5fa"/>
        </linearGradient>
    </defs>

    <!-- Transparenter Hintergrund durch fill="none" -->
    <rect class="bg" width="64" height="64" rx="9" fill="none"/>
    <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="45" font-family="sans-serif" font-weight="700" dy="0.087">&#x1f3a7;</text>
</svg>