SVG-ViewBox-Generator

Steuern Sie präzise, wie SVG-Grafiken skaliert und angezeigt werden, indem Sie das viewBox-Attribut anpassen. Das viewBox definiert das Koordinatensystem und das Seitenverhältnis Ihrer Vektorgrafiken — die richtige Konfiguration sorgt für perfekte Skalierung in jeder Größe.

viewBox-Koordinaten verstehen

Das viewBox-Attribut enthält vier Werte: minX, minY, Breite und Höhe. Diese definieren den sichtbaren Bereich des SVG-Canvas. Falsche Werte führen zu gestreckten, abgeschnittenen oder falsch positionierten Grafiken. Dieses Tool ermöglicht die Anpassung jedes Werts mit sofortigem visuellem Feedback.

Visuelle Vorschau für Genauigkeit

Sehen Sie sofort, wie sich Koordinatenänderungen auf Ihr SVG auswirken. Dieser visuelle Ansatz eliminiert Ratespiele beim Kalibrieren von viewBox-Werten. Wenn Grafiken abgeschnitten erscheinen, können Sie Breite und Höhe erweitern. Bei falschem Positionierung passen Sie minX und minY an.

Abstände für mehr Luft

Fügen Sie Abstände rund um den Inhalt hinzu, ohne Koordinaten manuell ändern zu müssen. Der Abstand erweitert das viewBox gleichmäßig, sodass Ihre Grafiken Raum haben, statt an den Canvas-Rändern zu kleben.

Sofortige Code-Generierung

Nach der Anpassung der Werte kopieren Sie das fertige viewBox-Attribut direkt in Ihren SVG-Code. Keine manuellen Berechnungen und kein Ausprobieren im Code-Editor.

Wann dieser Generator hilfreich ist

Beim SVG-Export aus Figma, Illustrator oder Inkscape stimmt das viewBox möglicherweise nicht mit dem gewünschten visuellen Bereich überein. Wenn Icons abgeschnitten erscheinen, unerwünschte Leerräume vorhanden sind oder das SVG nicht korrekt skaliert, hilft dieser Generator, das visuell zu korrigieren.