Verificação HTML: Valor inválido X para o atributo "id" no elemento "pattern": Não é um nome XML 1.0 válido.

Sobre este problema HTML

O elemento <pattern> existe dentro de <svg>, e o SVG é uma linguagem baseada em XML. Ao contrário do HTML normal — onde os valores de id seguem regras relativamente relaxadas — o conteúdo SVG deve cumprir as convenções de nomenclatura XML 1.0. Isto significa que os valores de id têm requisitos de caracter e formatação mais rigorosos do que você pode estar habituado no HTML simples.

Regras de nome XML 1.0

Um nome XML 1.0 (usado para atributos id em SVG) deve seguir estas regras:

Primeiro caracter deve ser uma letra (A–Z, a–z) ou um underscore (_).
Caracteres subsequentes podem ser letras, dígitos (0–9), hífenes (-), underscores (_) ou pontos (.).
Espaços e caracteres especiais como !, @, #, $, %, (, ), etc. não são permitidos em nenhum lugar do nome.

Erros comuns que desencadeiam este erro incluem começar um id com um dígito (ex: 1pattern), um hífen (ex: -myPattern), ou um ponto (ex: .dotPattern), ou incluir caracteres como espaços ou dois pontos.

Por que isto importa

Conformidade com padrões: O SVG é analisado como XML em muitos contextos. Um nome XML inválido pode causar erros de análise ou comportamento inesperado, especialmente quando o SVG é servido com um tipo MIME XML ou incorporado em XHTML.
Funcionalidade: O id do elemento <pattern> é normalmente referenciado via url(#id) em atributos fill ou stroke. Um id inválido pode causar a falha silenciosa da referência do padrão, deixando elementos não preenchidos ou invisíveis.
Consistência entre navegadores: Embora alguns navegadores sejam tolerantes com nomes XML inválidos, outros não são. Usar nomes válidos garante renderização consistente em todos os navegadores e ambientes.

Como corrigir

Renomeie o valor id para que comece com uma letra ou underscore e contenha apenas caracteres válidos. Se você referenciar este id noutro lugar (ex: em fill="url(#...)" ou em CSS), atualize essas referências para corresponder.

Exemplos

❌ Inválido: `id` começa com um 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` começa com um hífen

<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` contém caracteres especiais

<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` começa com uma 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` começa com um underscore

<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, hífenes e underscores

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

Note que esta mesma regra de nomenclatura XML 1.0 aplica-se a atributos id em todos os elementos SVG — não apenas <pattern>. Se você vir erros semelhantes em elementos como <linearGradient>, <clipPath> ou <filter>, a mesma correção aplica-se: garanta que o id começa com uma letra ou underscore e usa apenas caracteres válidos.