Sono necessari i parametri SVG come “xmlns” e “versione”?

In circa la metà degli esempi svg che vedo su internet, il codice è avvolto in semplici semplici .

Nell’altra metà, i tag svg hanno molti attributi complicati come questo:

  

La mia domanda è: va bene usare i semplici tag svg? Ho provato a giocare con quelli complicati e tutto funziona alla fine se non li includo.

Tutti gli UA ignorano l’attributo della versione, quindi puoi sempre eliminarlo.

Se incorpori il tuo SVG in linea in una pagina HTML e servi quella pagina come text/html allora gli attributi xmlns non sono richiesti . Incorporare SVG in linea nei documenti HTML è un’innovazione piuttosto recente che è arrivata come parte di HTML5.

Se tuttavia servi la tua pagina come immagine / svg + xml o application / xhtml + xml o qualsiasi altro tipo MIME che fa sì che lo user agent usi un parser XML, allora sono richiesti gli attributi xmlns . Questo era l’unico modo per fare le cose fino a poco tempo fa quindi c’è un sacco di contenuti serviti in questo modo.

L’attributo xmlns="http://www.w3.org/2000/svg" è:

  • Obbligatorio per i file image / svg + xml . 1
  • Facoltativo per inlined . 2

L’attributo xmlns:xlink="http://www.w3.org/1999/xlink" è:

  • Obbligatorio per i file image / svg + xml con xlink: attributes. 1
  • Facoltativo per inlined con xlink: attributi. 2

L’attributo version="1.1" è:

  • Consigliato per conformarsi agli standard image / svg + xml . 3
  • Apparentemente ignorato da ogni agente utente. 4

1 identificatori di risorse internazionalizzati (RFC3987)
2 Poiché HTML5
3 Extensible Markup Language (XML) 1.0
4 Probabilmente fino al rilascio di ulteriori versioni principali.

Vorrei aggiungere ad entrambe le risposte, ma non ho punti, sto aggiungendo una nuova risposta. Nei recenti test su Chrome (versione 63.0.3239.132 (build ufficiale) (64-bit Windows)), ho trovato che:

  1. Per SVG in linea direttamente inserito nel file HTML, tramite editor di testo o javascript ed elm.innerHTML, gli attributi xmlns non sono necessari, come indicato nelle altre due risposte.
  2. Ma per SVG inline caricato tramite javascript e AJAX, ci sono due opzioni:
    • Utilizzare xhr.responseText e elm.innerHTML . Questo non richiede xmlns.
    • Utilizzare xhr.responseXML.documentElement e elm.appendChild() o elm.insertBefore() . Questo metodo di creazione dell’SVG in linea produce risultati a metà cottura senza dichiarare lo spazio dei nomi SVG di base, come in xmlns="http://www.w3.org/2000/svg" . Il viene caricato nell’HTML, ma le funzioni a livello di documento, come getElementById() non sono riconosciute sull’elemento . Presumo che ciò sia dovuto al fatto che utilizza il parser XML XMLHttpRequest al di fuori dell’HTML.