Zum Hauptinhalt springen
DailyBox

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

  1. Öffne eine Datei oder füge Code ein. Der Quelltext erscheint links.
  2. Lies den Tab Probleme und klicke auf ein Ergebnis, um zu seiner Zeile zu springen.
  3. 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

Ähnliche Tools