SVG online validieren – Syntax- und Barrierefreiheitsprüfung

Überprüfen Sie die Wohlgeformtheit von SVG, die ViewBox und die grundlegende Zugänglichkeit von Titel/Abstieg. Hinweiswarnungen – nichts hochgeladen.

0 chars · 0 B

Teilen Sie dieses Tool:

SVG Eingang

Die Validierung läuft vollständig in Ihrem Browser.

Laden…

SVG-Validator – Syntax und a11y-Playbook

Beratungsprüfungen für SVG-Syntax, Skalierung (viewBox) und grundlegenden Barrierefreiheitstext. Keine WCAG-Zertifizierung – vor dem Versand Symbole verwenden.

Hinweise des Entwicklers

• Fehlerblock gebrochen XML; Warnungen kennzeichnen fehlende ViewBox oder Titel/Beschreibung. • Dekorative Symbole sind möglicherweise nur mit Warnungen gültig. • Keine automatische Korrektur in Version 1 – Quelle manuell bearbeiten. • Koppeln Sie mit „optimize-svg“, nachdem Sie Probleme behoben haben.

Wenn Teams diese Route wählen

• Gate-Design-Übergabe SVG vor der React-Konvertierung. • Fehlende ViewBox auf responsiven Symbolen erkennen. • Erinnern Sie Autoren daran, <title> für Screenreader hinzuzufügen. • Schneller Fusseldurchgang ohne CLI-Werkzeuge.

Ausgearbeitete Beispiele

Rich SVG fehlt Text zur Barrierefreiheit

Beispieleingabe

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img">
  <defs>
    <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f97316"/>
      <stop offset="100%" stop-color="#fb923c"/>
    </linearGradient>
    <clipPath id="badgeClip">
      <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/>
    </clipPath>
  </defs>
  <g clip-path="url(#badgeClip)">
    <rect width="240" height="72" fill="url(#badgeGradient)"/>
    <g transform="translate(20 16)">
      <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/>
      <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/>
    </g>
    <text x="76" y="31" font-size="18" font-weight="700" fill="#fff">FastMinify</text>
  </g>
</svg>

Ergebnis

Gültig mit Warnung: Struktur ist in Ordnung, aber fügen Sie <title> oder <desc> für die Barrierefreiheit hinzu.

Defektes Markup

Beispieleingabe

<svg><circle></svg>

Ergebnis

Ungültig – Parserfehler mit Problem auf Fehlerebene.

Navigieren Sie durch verwandte SVG-Tools

Beheben Sie Probleme, dann optimieren Sie SVG, konvertieren Sie über SVG in JSX oder durchsuchen Sie alle SVG-Tools.

SVG Häufig gestellte Fragen zum Validator

Nur Beratungsprüfungen

Handelt es sich um ein WCAG-Audit?

Nein – es prüft nur wohlgeformtes XML, viewBox und das Vorhandensein von Titel/Desc.

Warnungen vs. Fehler?

Fehler bedeuten ungültiges XML. Warnungen weisen auf Barrierefreiheits- oder Skalierungslücken hin.

Automatische Korrektur?

Nicht in Version 1 – bearbeiten Sie die SVG-Quelle manuell.

Weitere SVG-Tools

SVG minimieren SVG optimieren SVG Betrachter SVG zu Daten URI Verschönern SVG SVG aufheben SVG zu JSX Größe ändern SVGSVG validieren

Suchen Sie nach Konvertern, Encodern, Formatierern und Minifiern an einem Ort? Hub für Entwicklertools Öffnen Sie den kuratierten Entwicklertools-Katalog.