Validar SVG en línea — Sintaxis y accesibilidad básica

Comprueba sintaxis, viewBox y title/desc. Avisos orientativos — no se envía nada.

Cargando…
Validador SVG — guía de sintaxis y a11y
Comprobaciones orientativas de sintaxis SVG, escalado (viewBox) y texto básico de accesibilidad. No es una certificación WCAG — úsalo antes de publicar iconos.

Notas para desarrolladores

Los errores bloquean XML roto; los avisos marcan viewBox o title/desc faltantes. Los iconos decorativos pueden ser válidos solo con avisos. Sin corrección automática en v1 — edita la fuente a mano. Combínalo con optimize-svg después de corregir problemas. El panel de resultados muestra el veredicto, estadísticas SVG (viewBox, title/desc, dimensiones) y códigos de incidencia tras la validación en vivo (~300 ms).

Cuándo elegir esta herramienta

Filtrar SVG de handoff de diseño antes de convertir a React. Detectar viewBox faltante en iconos responsive. Recordar a los autores añadir <title> para lectores de pantalla. Un lint rápido sin tooling CLI.

Ejemplos prácticos

SVG rico sin texto de accesibilidad

Entrada de ejemplo

<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>

Resultado

Válido con aviso: la estructura está bien, pero añade <title> o <desc> para accesibilidad — se muestra en el panel de resultados.

Markup roto

Entrada de ejemplo

<svg><circle></svg>

Resultado

Inválido — error del parser con incidencia de nivel error — se muestra en el panel de resultados.

Explorar herramientas SVG relacionadas

Corrige los problemas y luego optimize SVG, convierte con SVG a JSX o recorre todas las herramientas SVG.

FAQ del validador SVG

Solo comprobaciones orientativas

¿Es una auditoría WCAG?

No — comprueba XML bien formado, viewBox y la presencia de title/desc únicamente.

¿Avisos frente a errores?

Los errores significan XML inválido. Los avisos señalan lagunas de accesibilidad o de escalado.

¿Corrección automática?

No en v1 — edita el SVG fuente a mano.

Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.