Verificação HTML: Atributo com o nome local "xmlns:serif" não é serializável como XML 1.0

Sobre este problema HTML

Quando ferramentas de design gráfico como o Affinity Designer (anteriormente Serif) exportam ficheiros SVG, frequentemente incorporam declarações de namespace personalizados como xmlns:serif="http://www.serif.com/". Estes namespaces permitem ao editor armazenar os seus próprios metadados — como nomes de camadas, informações de agrupamento, ou configurações específicas da aplicação — dentro do ficheiro SVG. Embora estes metadados sejam úteis se reabrir o ficheiro no editor original, não têm qualquer significado num navegador web.

A especificação HTML5 define um conjunto específico de atributos de namespace que são permitidos em elementos SVG (como xmlns, xmlns:xlink, e xmlns:xml). Qualquer prefixo de namespace que não esteja nesta lista predefinida — como xmlns:serif, xmlns:inkscape, ou xmlns:sodipodi — desencadeia este erro de validação porque o analisador HTML não consegue serializar estes atributos de volta para XML 1.0 bem formado. Esta não é apenas uma preocupação teórica: atributos não serializáveis podem causar problemas quando o DOM é manipulado via JavaScript ou quando a marcação é processada por ferramentas baseadas em XML.

Para além da própria declaração xmlns:serif, é provável que encontre atributos no SVG que usam este prefixo de namespace, como serif:id="layer1". Estes também devem ser removidos já que referenciam um namespace que o navegador não compreende.

Como corrigir

Remova o atributo xmlns:serif do elemento <svg>.
Remova quaisquer atributos prefixados com serif: (ex.: serif:id) de elementos filhos dentro do SVG.
Se reexportar o SVG, verifique as configurações de exportação do seu editor — algumas ferramentas oferecem uma opção de exportação “limpa” ou “otimizada” que remove metadados proprietários.
Considere usar uma ferramenta de otimização SVG como o SVGO para limpar automaticamente atributos desnecessários.

Exemplos

❌ Inválido: SVG com atributo `xmlns:serif`

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:serif="http://www.serif.com/"
  viewBox="0 0 100 100"
  width="100"
  height="100">
  <g serif:id="Layer 1">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </g>
</svg>

Isto desencadeia o erro porque xmlns:serif não é um namespace reconhecido em HTML5, e serif:id referencia esse namespace não suportado.

✅ Válido: SVG com atributos proprietários removidos

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="100"
  height="100">
  <g>
    <circle cx="50" cy="50" r="40" fill="blue" />
  </g>
</svg>

Tanto xmlns:serif como serif:id foram removidos. O SVG renderiza de forma idêntica no navegador já que esses atributos eram apenas significativos para a aplicação de edição.

Lidar com múltiplos namespaces proprietários

SVGs exportados às vezes contêm vários namespaces não padrão ao mesmo tempo. Remova todos eles:

<!-- ❌ Inválido: múltiplos namespaces proprietários -->

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:serif="http://www.serif.com/"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  viewBox="0 0 200 200">
  <rect x="10" y="10" width="180" height="180" fill="red"
    serif:id="background"
    inkscape:label="bg-rect" />
</svg>

<!-- ✅ Válido: todos os namespaces proprietários e atributos prefixados removidos -->

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 200">
  <rect x="10" y="10" width="180" height="180" fill="red" />
</svg>

Se trabalha frequentemente com SVGs de ferramentas de design, integrar um otimizador SVG no seu processo de build pode poupar tempo e garantir que estes atributos não padrão nunca cheguem à produção.