São necessários parâmetros SVG, como 'xmlns' e 'version'?

203

Em cerca de metade dos exemplos de svg que vejo na internet, o código está envolvido em <svg></svg>tags simples e simples .

Na outra metade, as tags svg têm muitos atributos complicados como este: 

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  version="1.1" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

Minha pergunta é: está tudo bem em usar as simples tags svg? Eu tentei brincar com os complicados, e tudo funciona bem no meu final, se eu não incluí-los.

xml svg tags Lars
fonte

Respostas:

206

Todos os agentes do usuário (navegadores) ignoram o atributo version, portanto, você sempre pode eliminá-lo.

Se você incorporar seu SVG embutido em uma página HTML e servir essa página text/html, os atributos xmlns não serão necessários . A incorporação de SVG embutido em documentos HTML é uma inovação recente que surgiu como parte do HTML5.

Se, no entanto, você servir sua página como image / svg + xml ou application / xhtml + xml ou qualquer outro tipo MIME que faça com que o agente do usuário use um analisador XML, os atributos xmlns serão necessários . Essa era a única maneira de fazer as coisas até recentemente, para que haja muito conteúdo exibido dessa maneira.

Robert Longson
fonte
5
"Todos os UAs ignoram o atributo version, portanto você sempre pode descartá-lo." - mas o que as especificações têm a dizer sobre o assunto? "Os navegadores permitem que você se dê bem" é (ou já foi) verdade em relação a muitas práticas que são (ou eram) inequivocamente incorretas.
Mark Amery
No IE11, se eu colocá- <!DOCTYPE svg xmlns="www.w3.org/2000/svg">lo funcionando, mas se eu remover o xmlns ou alterá-lo para <!DOCTYPE svg xmlns="www.example.com">ele não funcionará. Por que é que?
Pato Donald
8
Uma fonte pode ser citada para esta resposta, por favor?
2540625
69
Escrevi uma fração significativa do código SVG no Firefox e digo isso. Isso não é bom o suficiente? Caso contrário, adicionei alguns links de qualquer maneira.
Robert Longson
1
@ Marcel não se esses dados-uris forem image / svg + xml, como geralmente é o caso, a parte final da resposta será válida.
Robert Longson 31/01/19
228

O xmlns="http://www.w3.org/2000/svg"atributo é:

  • Necessário para arquivos de imagem / svg + xml . 1
  • Opcional para embutido <svg> . 2

o xmlns:xlink="http://www.w3.org/1999/xlink"atributo é:

  • Requeridos para arquivos de imagem / svg + xml com atributos xlink:. 1
  • Opcional para embutido <svg> com xlink: atributos2

o version="1.1"atributo é:

  • Recomendado para cumprir com padrões de arquivos de imagem / svg + xml . 3
  • Aparentemente ignorado por todos os agentes do usuário. 4
  • Removido no SVG 2. 5

1 Identificadores de recursos internacionalizados (RFC3987)
2 Desde HTML5
3 Extensible Markup Language (XML) 1.0
4 Provavelmente até o lançamento de outras versões principais.
5 SVG 2, recomendação de candidato do W3C, 07 de agosto de 2018

ncomputadores
fonte
2
Ele precisa ser http ou também pode ser https?
JohannesB
2
@JohannesB ambos os protocolos são compatíveis: D
ncomputers
1
@JohannesB sim, aqui você tem um inline exemplo HTTP HTTPS e image / svg + xml arquivo com inline SVG com xlink atributos exemplo HTTP HTTPS
ncomputers
1
Obrigado, acho que Nick Craver comete erros como bem, então;)
JohannesB
2
Não confunda o versionatributo da declaração xml ( <?xml version...) com o versionatributo do <svg>elemento O primeiro é sobre a versão da linguagem de marcação XML, enquanto o último especifica a versão do SVG. O autor desta resposta cometeu esse erro consultando o XML, não a especificação SVG em ³. Tentei corrigi-lo, mas alguns idiotas rejeitaram a edição.
Bachsau
7

Eu gostaria de adicionar as duas respostas, mas não tenho pontos, estou adicionando uma nova resposta. Em testes recentes no Chrome (versão 63.0.3239.132 (versão oficial) (Windows de 64 bits)), descobri que:

  1. Para SVG embutido que é inserido diretamente no arquivo HTML, via editor de texto ou javascript e elm.innerHTML, os atributos xmlns não são necessários, conforme indicado nas outras duas respostas.
  2. Mas para SVG embutido carregado via javascript e AJAX, há duas opções:
    • Use xhr.responseTexte elm.innerHTML. Isso não requer os xmlns.
    • Use xhr.responseXML.documentElemente elm.appendChild()ou elm.insertBefore(). Esse método de criação do SVG embutido produz resultados incompletos, sem que o namespace básico do SVG seja declarado, como em xmlns="http://www.w3.org/2000/svg". O <svg> é carregado no HTML, mas as funções no nível do documento, como getElementById()não são reconhecidas no elemento <svg>. Suponho que isso ocorre porque ele usa o analisador XMLHttpRequest XML fora do HTML.
jamess
fonte
0

Sobre o atributo de versão SVG, o MDN WebDoc diz

Descontinuado desde SVG 2
Esse recurso não é mais recomendado. Embora alguns navegadores ainda possam suportá-lo, ele pode já ter sido removido dos padrões relevantes da Web, pode estar em processo de queda ou pode ser mantido apenas para fins de compatibilidade. Evite usá-lo e atualize o código existente, se possível; consulte a tabela de compatibilidade na parte inferior desta página para orientar sua decisão. Esteja ciente de que esse recurso pode deixar de funcionar a qualquer momento.

O atributo version é usado para indicar a qual especificação um documento SVG está em conformidade. Isso é permitido apenas no elemento raiz. É puramente consultivo e não tem influência na renderização ou processamento.

PS: O SVG 2 está longe de se tornar um padrão ainda.

Velusamy Velu
fonte