SVG viewBox und responsive Skalierung

width und height von SVG legen die gerenderte Größe im DOM fest. Das Attribut viewBox definiert den internen Koordinatenraum. Diese Werte sind unabhängig voneinander: Ein viewBox von "0 0 100 100" mit width="200" height="200" skaliert den Koordinatenraum um den Faktor 2.

viewBox="min-x min-y width height". Am häufigsten wird viewBox="0 0 100 100" verwendet; damit wird ein 100 × 100 großer Koordinatenraum definiert, der am Ursprung beginnt. Koordinatenwerte im SVG beziehen sich auf diesen Raum, nicht auf Pixel.

Für ein responsives SVG lassen Sie die Attribute width und height weg (oder setzen sie auf 100 %) und überlassen die Proportionen dem viewBox. Fügen Sie CSS hinzu: svg { width: 100%; height: auto; }. Das SVG wird so skaliert, dass es in seinen Container passt, wobei das Seitenverhältnis erhalten bleibt.

preserveAspectRatio steuert, wie der viewBox in den SVG-Viewport eingepasst wird, wenn sich die Seitenverhältnisse unterscheiden. Mögliche Werte: "xMidYMid meet" (Standardwert – Letterbox), "xMidYMid slice" (zum Ausfüllen zuschneiden), "none" (passend strecken, ohne das Seitenverhältnis beizubehalten).

Durch Ändern von min-x und min-y verschieben Sie den sichtbaren Ausschnitt des SVG-Koordinatenraums. viewBox="50 50 100 100" zeigt den Bereich von (50,50) bis (150,150). So wird interaktives Schwenken ermöglicht, indem die viewBox-Werte mit JavaScript aktualisiert werden.

Verkleinern Sie die viewBox-Abmessungen, um hineinzuzoomen: viewBox="25 25 50 50" zeigt einen kleineren Bereich, der vergrößert wird, um das SVG-Element auszufüllen. Durch größere Abmessungen zoomen Sie heraus. Aktualisieren Sie viewBox bei Radereignissen, um interaktives Zoomen ohne Skalierung des SVG-Elements zu ermöglichen.

SVG in einem img-Tag: wird mit object-fit responsiv skaliert, kann aber nicht per CSS formatiert oder per Skript gesteuert werden. Inline-SVG: ist vollständig für CSS und JavaScript zugänglich, vergrößert jedoch den HTML-Umfang. Wählen Sie je nach Bedarf an Interaktivität.

Icon-SVGs verwenden einen festen viewBox (z. B. "0 0 24 24") und keine Angaben für width und height, sodass ihre Größe per CSS festgelegt werden kann: .icon { width: 1.5rem; height: 1.5rem; }. Der viewBox stellt sicher, dass Icons bei jeder Größe korrekt skaliert werden und ihre scharfe Vektordarstellung erhalten bleibt.

Definieren Sie Icons in <symbol viewBox="0 0 24 24">-Elementen innerhalb eines ausgeblendeten SVGs. Referenzieren Sie sie mit <use href="#icon-name">. Jedes use-Element kann eigene Werte für width, height, fill und color haben – eine Sprite-Datei für alle Icons.

SVG fill="currentColor" übernimmt die CSS-Eigenschaft color vom Element oder seinem übergeordneten Element. Setzen Sie color: red für das SVG oder ein übergeordnetes Element, und das Icon wird automatisch rot ausgefüllt. So können einfarbige Icons der Textfarbe folgen, ohne SVG-spezifisches Styling.

Wenn SVG-Inhalte abgeschnitten erscheinen oder unerwartet positioniert sind, protokollieren oder überprüfen Sie den Wert von viewBox. Ein häufiger Fehler besteht darin, viewBox auf die Pixelabmessungen der Ausgangsgrafik zu setzen, ohne die gerenderte Größe zu berücksichtigen, was zu Skalierungsproblemen führt. Vergewissern Sie sich, dass viewBox den tatsächlichen Inhaltsgrenzen der SVG-Grafik entspricht.

Der SVG-viewBox definiert einen internen Koordinatenraum unabhängig von der gerenderten Pixelgröße und ermöglicht dadurch eine responsive Skalierung. Mit width:100%; height:auto und einem viewBox passen sich SVGs an jeden Container an. Das symbol+use-Sprite-Muster, currentColor-Themes und preserveAspectRatio bilden zusammen ein vollständiges Werkzeugset für flexible, themenfähige SVGs.