SVG - ChatGBT

1. per css einbinden undskalieren

.svg-symbole {
  width: 200px;
  height: 50px;
  background-image: url("../icons/sprite.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

🟢 Vorteile:

Nützlich für Layout und Design
Kombinierbar mit Media Queries

🔴 Nachteile:

Keine Interaktion oder Manipulation der SVG-Elemente möglich

2. per <object>-Tag

<object type="image/svg+xml" data="files/contao5_bluepages2025/themes/theme1/icons/sprite.svg" width="200" height="50"></object>

Per <object>-Tag

🟢 Vorteile:

Unterstützt interaktive SVGs
Separat ladbar

🔴 Nachteile:

Kein Zugriff auf den SVG-Inhalt per CSS aus der Hauptseite

5. per JavaScript dynamisch laden

<div id="svg-container"></div>
<script>
  fetch('sprite.svg')
    .then(response => response.text())
    .then(data => {
      document.getElementById('svg-container').innerHTML = data;
    });
</script>

SVG Datei einbinden mit css Code:

<div class="svg-symbol"></div>
<style>
.svg-hintergrund {
  width: 50px;
  height: 50px;
  background-image: url("files/pfad.../symbol.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
</style>

Beispiel: info--blue.svg 25x25px auf 50x50px skaliert

eingebunden über css

chatgpt SVG Test: Icons im Frontend testen

Öffne einen Artikel oder ein Inhaltselement
Füge folgenden Code ein (im Text oder HTML-Modul)
<div class="icon info"></div>
<div class="icon warning"></div>
<div class="icon check"></div>
<div class="icon close"></div>
Seite aufrufen → Du solltest nun 4 runde Icons sehen:
info, warning, check, close – aus dem SVG-Sprite

Habe alles eingebunden. die Icons sind im Frontend sichtbar.
Wie kann ich im css Code einzelne Icons aus bzw. einschalten?

Super – freut mich zu hören, dass die Icons im Frontend sichtbar sind! 🎉
Jetzt zeige ich dir, wie du einzelne Icons im CSS flexibel aktivieren oder deaktivieren kannst, z. B. über zusätzliche Klassen, Conditions oder States.
Methode 1: Sichtbarkeit per Klasse steuern (.visible, .hidden)
CSS:

.icon {
display: inline-block;
width: 50px;
height: 50px;
background-image: url(../icons/sprite.svg);
background-repeat: no-repeat;
background-size: 200px 50px;
}

/* Standard-Icons */
.icon.info { background-position: 0 0; }
.icon.warning { background-position: -50px 0; }
.icon.check { background-position: -100px 0; }
.icon.close { background-position: -150px 0; }

/* Sichtbarkeit steuern */
.hidden {
display: none !important;
}

HTML:

Methode 2: Icons dynamisch ein-/ausschalten mit Klassen

Wenn du z. B. einen Container hast, kannst du mit einer Klasse definieren, welche Icons gezeigt werden:

CSS:

.icon { display: none; } /* alles ausblenden standardmäßig */

.show-icons .icon.info,
.show-icons .icon.check {
display: inline-block;
}

Icon Sprite mit Hover & Klick

Zum Test: Klick auf ein Icon aktiviert → deaktiviert (Grauer Stil)