Verificação HTML: Atributo "xmlns:serif" não permitido aqui.

Sobre este problema HTML

Em HTML5, os únicos atributos de namespace reconhecidos em elementos SVG são xmlns (para o namespace SVG) e xmlns:xlink (para XLink, embora xlink esteja agora largamente obsoleto em favor de atributos simples). Quaisquer outras declarações de namespace personalizadas — como xmlns:serif, xmlns:inkscape, ou xmlns:sketch — não são permitidas pela especificação HTML e irão desencadear um erro de validação.

Ferramentas de design como Affinity Designer, Adobe Illustrator, Inkscape e Sketch frequentemente incorporam declarações de namespace proprietárias e atributos de metadados em arquivos SVG exportados. Estes servem como marcadores internos para a aplicação de design (por exemplo, para preservar nomes de camadas ou configurações específicas do editor) mas não têm significado num navegador web. Os navegadores simplesmente os ignoram, pelo que adicionam bytes desnecessários à sua página sem fornecer qualquer benefício.

Remover estes atributos é importante por várias razões:

Conformidade com padrões: O parser HTML5 tem uma lista fixa de declarações de namespace permitidas. As personalizadas violam a especificação.
Marcação limpa: Metadados proprietários incham os seus arquivos SVG com informação que só importa dentro da ferramenta de design original.
Manutenibilidade: Remover artefactos específicos de ferramentas torna os seus SVGs mais fáceis de ler, editar e otimizar.

Para corrigir isto, abra o seu arquivo SVG (ou o arquivo HTML que contém SVGs inline) e remova o atributo xmlns:serif do elemento <svg>. Você também deve procurar e remover quaisquer atributos com prefixo serif: (como serif:id) ao longo do SVG, uma vez que estes dependem da declaração de namespace agora removida.

Para uma abordagem mais automatizada, considere usar SVGO ou ferramentas similares de otimização SVG, que removem metadados de editores e declarações de namespace desnecessárias por padrão.

Exemplos

Incorreto — atributo de namespace personalizado presente

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

Isto desencadeia dois tipos de erros: xmlns:serif não é permitido no elemento <svg>, e serif:id não é um atributo reconhecido em <circle>.

Correto — namespace personalizado e atributos com prefixo removidos

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

Incorreto — múltiplos namespaces proprietários

As ferramentas de design às vezes adicionam vários namespaces personalizados de uma só vez:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:serif="https://www.serif.com/"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 200 200">
  <g serif:id="Layer1">
    <rect x="10" y="10" width="80" height="80" fill="red" />
  </g>
</svg>

Correto — apenas namespaces padrão mantidos

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

Note que xmlns:xlink também foi removido neste exemplo. Embora nem sempre desencadeie um erro de validação por si só, é desnecessário se nenhum atributo xlink:href for usado — e o uso moderno de SVG em HTML5 favorece href simples em vez de xlink:href.