SVG-Inspektor: Probleme im SVG-Code finden
Füge ein SVG ein oder öffne es, um Struktur, Farben und Ressourcen zu sehen, dazu eine Problemliste, per Klick springst du zur genauen Zeile.
SVG-Datei hier ablegen
Bis 5 MB. Wird nur in deinem Browser geöffnet.
Dein SVG wird in diesem Browser-Tab verarbeitet. Es wird nie hochgeladen.
So funktioniert es
- Öffne eine Datei oder füge Code ein. Der Quelltext erscheint links.
- Lies den Tab Probleme und klicke auf ein Ergebnis, um zu seiner Zeile zu springen.
- Behebe den Quelltext direkt. Die Analyse aktualisiert sich beim Tippen.
Typische Einsatzzwecke
- Herausfinden, warum ein SVG leer oder in falscher Größe erscheint.
- Doppelte IDs beheben, bevor mehrere SVGs auf einer Seite landen.
- Die Farben und Schriften auflisten, von denen eine Grafik abhängt.
Das kann das Tool
- Erkennt ungültiges XML, fehlende viewBox, doppelte IDs und kaputte Referenzen.
- Markiert Skripte, Ereignis-Handler und externe Referenzen.
- Prüft auf title und role, damit Screenreader die Grafik benennen können.
- Listet Farben, Verläufe, Bilder, Schriften, IDs und Klassen mit ihrer Verwendung.
Gut zu wissen
Der Inspektor liest den Code, er zeichnet ihn nicht. Farben werden in Attributen, style-Attributen und style-Elementen durch einfaches Scannen gefunden, nicht per vollständiger CSS-Kaskade, und die Barrierefreiheitsprüfungen sind Grundlagen, kein vollständiges Audit.
Häufige Fragen
- Was gilt als Problem?
- Fehler machen die Datei kaputt oder sind unsicher, Warnungen können falsche Ergebnisse verursachen, Hinweise sind gut zu wissen. Jeder Eintrag nennt seine Art.
- Warum sind doppelte IDs ein Problem?
- Teilen sich mehrere SVGs eine Seite, kann eine doppelte ID dazu führen, dass Verläufe, Masken und Referenzen auf die falsche Form zeigen.
- Ist die Gzip-Größe echt?
- Ja. Dein Browser komprimiert den Code und meldet die echte Byte-Zahl. Sie wird nur angezeigt, wenn dein Browser das unterstützt.
- Wird meine Datei hochgeladen?
- Nein. Die Analyse läuft in deinem Browser-Tab.
Verwandte Tools
- Bereit für Änderungen? Bearbeite sie im SVG-Editor.
- Du willst nur eine Datei ansehen? Öffne sie im SVG-Betrachter.
- Alle Tools findest du im SVG Studio.
Ähnliche Tools
- SVG-EditorSVG-Code und Arbeitsfläche gemeinsam bearbeiten, mit Rückgängig und Wiederholen.
- SVG-BetrachterSVG-Dateien oder -Code mit Zoom und Hintergründen ansehen.
- SVG StudioEin privater Arbeitsbereich zum Ansehen, Prüfen und Bearbeiten von SVG-Dateien.
- JSON-Formatierer & ValidatorJSON formatieren, minimieren und validieren, mit klaren Fehlermeldungen.