Validación HTML: Valor X no válido para el atributo "id" en el elemento "pattern": No es un nombre XML 1.0 válido.

Acerca de este problema HTML

El elemento <pattern> existe dentro de <svg>, y SVG es un lenguaje basado en XML. A diferencia del HTML regular — donde los valores de id siguen reglas relativamente relajadas — el contenido SVG debe cumplir con las convenciones de nomenclatura de XML 1.0. Esto significa que los valores de id tienen requisitos de caracteres y formato más estrictos de lo que podrías estar acostumbrado en HTML plano.

Reglas de nombres XML 1.0

Un nombre XML 1.0 (usado para atributos id en SVG) debe seguir estas reglas:

Primer carácter debe ser una letra (A–Z, a–z) o un guión bajo (_).
Caracteres posteriores pueden ser letras, dígitos (0–9), guiones (-), guiones bajos (_) o puntos (.).
Espacios y caracteres especiales como !, @, #, $, %, (, ), etc. no están permitidos en ninguna parte del nombre.

Los errores comunes que desencadenan este error incluyen comenzar un id con un dígito (ej., 1pattern), un guión (ej., -myPattern) o un punto (ej., .dotPattern), o incluir caracteres como espacios o dos puntos.

Por qué esto importa

Cumplimiento de estándares: SVG se procesa como XML en muchos contextos. Un nombre XML inválido puede causar errores de procesamiento o comportamiento inesperado, especialmente cuando SVG se sirve con un tipo MIME XML o se incrusta en XHTML.
Funcionalidad: El id del elemento <pattern> típicamente se referencia mediante url(#id) en atributos fill o stroke. Un id inválido puede causar que la referencia del patrón falle silenciosamente, dejando elementos sin relleno o invisibles.
Consistencia entre navegadores: Mientras que algunos navegadores son permisivos con nombres XML inválidos, otros no lo son. Usar nombres válidos asegura renderizado consistente en todos los navegadores y entornos.

Cómo solucionarlo

Renombra el valor del id para que comience con una letra o guión bajo y contenga solo caracteres válidos. Si refieres este id en otro lugar (ej., en fill="url(#...)" o en CSS), actualiza esas referencias para que coincidan.

Ejemplos

❌ Inválido: `id` comienza con un dígito

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="1stPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="blue" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#1stPattern)" />
</svg>

❌ Inválido: `id` comienza con un guión

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="-stripe-bg" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="5" height="10" fill="red" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#-stripe-bg)" />
</svg>

❌ Inválido: `id` contiene caracteres especiales

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="my pattern!" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="green" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#my pattern!)" />
</svg>

✅ Válido: `id` comienza con una letra

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="firstPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="blue" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#firstPattern)" />
</svg>

✅ Válido: `id` comienza con un guión bajo

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="_stripe-bg" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="5" height="10" fill="red" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#_stripe-bg)" />
</svg>

✅ Válido: Usando letras, dígitos, guiones y guiones bajos

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dot-grid_v2" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="green" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#dot-grid_v2)" />
</svg>

Ten en cuenta que esta misma regla de nomenclatura XML 1.0 se aplica a los atributos id en todos los elementos SVG — no solo <pattern>. Si ves errores similares en elementos como <linearGradient>, <clipPath> o <filter>, se aplica la misma solución: asegúrate de que el id comience con una letra o guión bajo y use solo caracteres válidos.