Was ist ein SVG-Viewer?
Ein SVG-Viewer rendert skalierbare Vektorgrafiken direkt in Ihrem Browser und ermöglicht es Ihnen, SVG-Code zu vergrößern, zu untersuchen und zu validieren, ohne Software zu installieren. Es ist unbezahlbar für Designer und Entwickler, die täglich mit Symbolen, Illustrationen und Vektor-Assets arbeiten.
So verwenden Sie diesen SVG-Viewer
- Fügen Sie Ihren SVG-Code in das Eingabefeld ein.
- Klicken Sie auf „Rendern", um das SVG zu rendern und seine Metadaten anzuzeigen (Dimensionen, viewBox, Elementanzahl und Dateigröße).
- Eine visuelle Vorschau des SVG erscheint unter der Ausgabe, sodass Sie überprüfen können, ob es vor dem Einbetten in Ihr Projekt korrekt angezeigt wird.
Wichtige Konzepte
SVG (Scalable Vector Graphics) ist ein XML-basiertes Format zum Beschreiben von zweidimensionalen Vektorgrafiken. Im Gegensatz zu Rasterformaten wie PNG oder JPEG bleiben SVGs bei jeder Auflösung perfekt scharf, da sie durch mathematische Pfade und nicht durch Pixel definiert werden. Das viewBox-Attribut steuert das interne Koordinatensystem, während width und height die gerenderte Größe festlegen. Korrekt konfigurierte viewBox-Werte stellen sicher, dass Ihr SVG auf allen Bildschirmgrößen proportional skaliert wird.
Häufig gestellte Fragen
Kann ich den SVG-Code im Viewer bearbeiten?
Ja. Das Editor-Panel ermöglicht es Ihnen, das SVG-Markup direkt zu ändern. Änderungen werden in der Vorschau sofort angezeigt und bieten ein Live-Bearbeitungserlebnis.
Was ist das viewBox-Attribut und warum ist es wichtig?
Das viewBox definiert den internen Koordinatenraum des SVG (min-x, min-y, width, height). Es ermöglicht der Grafik, responsiv zu skalieren. Ohne ein korrektes viewBox kann das SVG bei verschiedenen Größen zugeschnitten oder verzerrt erscheinen.
Gibt es eine Dateigröße-Grenze?
Der Viewer verarbeitet typische SVG-Dateien effizient. Sehr große Dateien (mehrere Megabyte) mit Tausenden von Path-Elementen können langsamer gerendert werden, aber die meisten Production-SVGs funktionieren gut.