Sobre este problema HTML
No HTML5, os elementos SVG são nativamente suportados e não requerem declarações de namespace explícitas. Quando você escreve uma tag <svg> dentro de um documento HTML, o navegador associa-a automaticamente com o namespace SVG correto (http://www.w3.org/2000/svg). O atributo xmlns:svg="http://www.w3.org/2000/svg" é uma vinculação de namespace prefixado — declara svg como um prefixo de namespace — que é um conceito de fluxos de trabalho XML/XHTML que o parser do HTML5 não suporta ou reconhece.
A especificação HTML define um conjunto limitado de atributos permitidos em cada elemento. Como xmlns:svg não está entre eles para o elemento <svg> (ou qualquer elemento HTML5), o validador W3C marca-o como inválido. O único atributo relacionado com namespace que o parser HTML tolera no <svg> é xmlns="http://www.w3.org/2000/svg", e mesmo esse é opcional — é aceite puramente por compatibilidade com XHTML mas não tem efeito funcional no HTML5.
Esta questão aparece comumente quando código SVG é exportado de editores gráficos como Inkscape ou Adobe Illustrator, ou quando ficheiros SVG originalmente escritos como documentos XML autónomos são colados diretamente em HTML. Essas ferramentas por vezes incluem declarações de namespace verbosas que são necessárias em contextos XML mas inválidas em HTML.
Por que é importante
- Conformidade com padrões: A especificação HTML5 explicitamente não permite atributos de namespace prefixados. Usá-los resulta em erros de validação.
- Limpeza do código: Atributos desnecessários adicionam desordem sem qualquer benefício, tornando a sua marcação mais difícil de ler e manter.
- Potenciais problemas de parsing: Embora a maioria dos navegadores ignore silenciosamente atributos não reconhecidos, confiar no comportamento permissivo do navegador em vez de marcação válida pode levar a resultados inesperados em casos extremos ou consumidores HTML não-navegador (por exemplo, clientes de e-mail, scrapers de conteúdo, ou ferramentas de acessibilidade).
Como corrigir
-
Localize todos os elementos
<svg>no seu HTML que contenham o atributoxmlns:svg. -
Remova completamente o atributo
xmlns:svg="http://www.w3.org/2000/svg". -
Se estiver a trabalhar num documento HTML5 (não XHTML), o atributo
xmlns="http://www.w3.org/2000/svg"também é opcional — pode mantê-lo ou removê-lo. -
Se o seu SVG usa outras declarações de namespace prefixadas como
xmlns:xlink, considere substituí-las pelos seus equivalentes HTML5 (por exemplo, usehrefem vez dexlink:href).
Exemplos
Incorreto: usar xmlns:svg num elemento SVG
O atributo xmlns:svg desencadeia o erro de validação:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Correto: remover o namespace prefixado
Remova xmlns:svg e mantenha apenas os atributos padrão:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Também correto: SVG inline minimal no HTML5
No HTML5, o próprio atributo xmlns é opcional para SVG inline, por isso esta é a abordagem mais limpa:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Limpeza de múltiples namespaces desnecessários
SVG exportado de editores frequentemente inclui várias declarações de namespace desnecessárias. Aqui está um antes-e-depois de uma limpeza típica:
Antes (múltiplos atributos de namespace inválidos):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<image xlink:href="photo.jpg" width="200" height="200" />
</svg>
Depois (limpo para HTML5):
<svg viewBox="0 0 200 200">
<image href="photo.jpg" width="200" height="200" />
</svg>
Note que xlink:href foi substituído por href, que é o padrão moderno suportado por todos os navegadores atuais. A declaração xmlns:xlink também já não é necessária.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.