Sobre este problema HTML
O atributo xmlns declara o namespace XML para um elemento. Para elementos SVG, o único namespace permitido é "http://www.w3.org/2000/svg". Quando este atributo está presente mas definido como uma string vazia ("") ou qualquer valor diferente do namespace correto, o validador W3C reporta um erro porque o navegador não consegue associar corretamente o elemento com a especificação SVG.
Em documentos HTML5 (servidos como text/html), o atributo xmlns em <svg> é na verdade opcional. O parser HTML associa automaticamente elementos <svg> com o namespace SVG correto sem necessitar de uma declaração explícita. No entanto, se você incluir o atributo xmlns — por exemplo, porque o seu SVG foi exportado de uma ferramenta de design ou copiado de uma fonte baseada em XML — deve conter o valor exato "http://www.w3.org/2000/svg". Um valor vazio ou incorreto causará um erro de validação e pode levar a problemas de renderização em certos contextos.
Isto é importante por várias razões:
-
Conformidade com os padrões: A especificação HTML restringe explicitamente o valor permitido para
xmlnsem elementos SVG. -
Compatibilidade com navegadores: Embora a maioria dos navegadores modernos seja tolerante no modo HTML, um namespace incorreto pode causar problemas quando o conteúdo SVG é usado em contextos XML (como XHTML ou ficheiros
.svgindependentes). - Interoperabilidade: Ferramentas e bibliotecas que processam o seu HTML podem depender do namespace correto para identificar e manipular elementos SVG.
Para corrigir este problema, você tem duas opções:
-
Definir o valor correto: Substitua o valor
xmlnsvazio ou incorreto por"http://www.w3.org/2000/svg". -
Remover o atributo completamente: Uma vez que
xmlnsé opcional em HTML5, removê-lo é frequentemente a solução mais limpa.
Exemplos
Incorreto: atributo xmlns vazio
Isto desencadeia o erro de validação porque o valor do namespace é uma string vazia:
<svg xmlns="" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Incorreto: valor de namespace errado
Qualquer valor diferente do namespace SVG correto também desencadeará este erro:
<svg xmlns="http://www.w3.org/2000/html" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Correção: usar o namespace correto
Defina xmlns com o único valor permitido:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Correção: remover o atributo xmlns
Num documento HTML5, você pode omitir xmlns completamente uma vez que o parser trata o namespace automaticamente:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Nota sobre SVG inline de fontes externas
Ferramentas de design como Figma, Illustrator, ou Inkscape frequentemente exportam ficheiros SVG com o atributo xmlns já definido corretamente. Se você estiver a copiar markup SVG e o valor xmlns for acidentalmente limpo ou corrompido durante o processo, restaure-o para "http://www.w3.org/2000/svg" ou remova-o antes de incorporar o SVG no seu HTML. Ambas as abordagens produzirão markup válido e funcional.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.