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

Sobre este problema HTML

Porque isto é importante

Embora o HTML5 seja bastante permissivo com valores de id (permitindo quase qualquer coisa exceto espaços), elementos dentro de vocabulários baseados em XML como SVG e MathML estão sujeitos a regras mais rígidas. Quando estes elementos aparecem no seu documento HTML, os seus atributos devem ainda estar conformes às convenções de nomenclatura XML 1.0 conforme definido pela especificação relevante.

Os nomes XML 1.0 devem seguir estas regras:

Devem começar com uma letra (a–z, A–Z) ou um underscore (_)
Caracteres subsequentes podem ser letras, dígitos (0–9), hífenes (-), underscores (_) e pontos (.)
Não podem conter espaços, dois pontos (fora de contextos com namespaces), ou caracteres especiais como @, #, $, !, etc.

Este erro aparece tipicamente quando ferramentas de design (como Figma, Illustrator ou Sketch) exportam ficheiros SVG com valores de id auto-gerados que incluem espaços ou outros caracteres inválidos. Os navegadores podem ainda renderizar o conteúdo, mas confiar em nomes não conformes pode causar problemas com seletores CSS, getElementById() do JavaScript, referências de fragmentos de URL, e ferramentas de acessibilidade que dependem de identificadores válidos.

Como corrigir

Remova espaços — substitua-os por hífenes ou underscores, ou use camelCase.
Certifique-se de que o nome começa com uma letra ou underscore — se começar com um dígito, adicione um prefixo com uma letra ou underscore.
Remova caracteres especiais — remova ou substitua caracteres como @, #, (, ), etc.
Revise ficheiros SVG exportados — se estiver a incorporar SVGs de ferramentas de design, limpe os valores de id gerados antes de os adicionar ao seu HTML.

Exemplos

Inválido: Espaço no valor do `id`

O espaço em "Group 270" torna este um nome XML 1.0 inválido:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group 270">
    <circle cx="50" cy="50" r="40" />
  </g>
</svg>

Inválido: Nome começa com um dígito

Os nomes XML 1.0 não podem começar com um número:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect id="1st-rectangle" width="100" height="50" />
</svg>

Inválido: Caracteres especiais no nome

Caracteres como ( e ) não são permitidos:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path id="icon(home)" d="M10 80 L50 10 L90 80 Z" />
</svg>

Corrigido: Nomes XML 1.0 válidos

Substitua espaços por hífenes, adicione um prefixo com uma letra aos nomes que começam com dígitos, e remova caracteres especiais:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <g id="group-270">
    <circle cx="50" cy="50" r="40" />
  </g>
  <rect id="first-rectangle" width="100" height="50" />
  <path id="icon-home" d="M10 80 L50 10 L90 80 Z" />
</svg>

Dica: Limpar SVGs exportados

As ferramentas de design produzem frequentemente valores de id como "Frame 42", "Vector (Stroke)", ou "123_layer". Um fluxo de trabalho rápido de localizar-e-substituir pode corrigir estes antes de chegarem ao seu código. Pode também usar ferramentas como SVGO para otimizar e limpar a saída SVG, incluindo remover ou renomear identificadores inválidos.