Werden SVG-Parameter wie 'xmlns' und 'version' benötigt?

203

In ungefähr der Hälfte der SVG-Beispiele, die ich im Internet sehe, ist der Code in einfache <svg></svg>Tags eingeschlossen.

In der anderen Hälfte haben die SVG-Tags viele komplizierte Attribute wie diese: 

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

Meine Frage ist: Ist es in Ordnung, die einfachen SVG-Tags zu verwenden? Ich habe versucht, mit den komplizierten herumzuspielen, und am Ende funktioniert alles gut, wenn ich sie nicht einbeziehe.

xml svg tags Lars
quelle

Antworten:

206

Alle Benutzeragenten (Browser) ignorieren das Versionsattribut, sodass Sie es jederzeit löschen können.

Wenn Sie Ihre SVG inline in einer HTML - Seite einbetten und dienen diese Seite als text/htmldann xmlns Attribute sind nicht erforderlich . Das Einbetten von SVG-Inline in HTML-Dokumente ist eine relativ neue Innovation, die als Teil von HTML5 eingeführt wurde.

Wenn Sie jedoch dienen Ihrer Seite als image / svg + xml oder application / xhtml + xml oder andere MIME - Typ, den User - Agent verursacht einen XML - Parser verwenden dann die xmlns Attribute sind erforderlich . Dies war bis vor kurzem die einzige Möglichkeit, Dinge zu tun, sodass viele Inhalte wie diese bereitgestellt werden.

Robert Longson
quelle
5
"Alle UAs ignorieren das Versionsattribut, sodass Sie das jederzeit löschen können." - aber was hat spec zu diesem Thema zu sagen? "Browser lassen Sie damit durchkommen" gilt (oder war es irgendwann) für viele Praktiken, die eindeutig falsch sind (oder waren).
Mark Amery
In IE11 funktioniert es nicht, wenn ich es setze <!DOCTYPE svg xmlns="www.w3.org/2000/svg">, aber wenn ich die XML-Dateien wegnehme oder in sie ändere, <!DOCTYPE svg xmlns="www.example.com">funktioniert es nicht. Warum ist das so?
Donald Duck
8
Könnte für diese Antwort bitte eine Quelle angegeben werden?
2540625
69
Ich habe einen bedeutenden Teil des SVG-Codes in Firefox geschrieben und sage es auch. Ist das nicht gut genug? Wenn nicht, habe ich trotzdem einige Links hinzugefügt.
Robert Longson
1
@Marcel nicht, wenn diese Daten-uris image / svg + xml sind, was normalerweise der Fall ist, dann gilt der letzte Teil der Antwort.
Robert Longson
228

Das xmlns="http://www.w3.org/2000/svg"Attribut lautet:

  • Erforderlich für image / svg + xml- Dateien. 1
  • Optional für Inline <svg> . 2

Das xmlns:xlink="http://www.w3.org/1999/xlink"Attribut lautet:

  • Erforderlich für image / svg + xml- Dateien mit xlink: -Attributen. 1
  • Optional für Inline <svg> mit xlink: -Attributen. 2

Das version="1.1"Attribut lautet:

  • Empfohlen , um den Standards für image / svg + xml- Dateien zu entsprechen. 3
  • Anscheinend von jedem Benutzeragenten ignoriert . 4
  • Entfernt in SVG 2. 5

1 Internationalisierte Ressourcenkennungen (RFC3987)
2 Seit HTML5
3 Extensible Markup Language (XML) 1.0
4 Wahrscheinlich bis zur Veröffentlichung weiterer Hauptversionen.
5 SVG 2, W3C-Kandidatenempfehlung, 7. August 2018

ncomputer
quelle
2
Muss es http sein oder kann es auch https sein?
JohannesB
2
@JohannesB beide Protokolle sind kompatibel: D
ncomputers
1
@JohannesB ja hier aus haben Sie einen inlined Beispiel HTTP HTTPS und image / svg + xml - Datei mit inlined svg mit XLink Attribute Beispiel HTTP HTTPS
ncomputers
1
Danke, schätze, Nick Craver macht dann auch Fehler;)
JohannesB
2
Verwechseln Sie das versionAttribut der XML-Deklaration ( <?xml version...) nicht mit dem versionAttribut des <svg>Elements. Die erste betrifft die Version der XML-Markup-Sprache, während die zweite die Version von SVG angibt. Der Autor dieser Antwort machte diesen Fehler, indem er sich auf das XML bezog, nicht auf die SVG-Spezifikation in ³. Ich habe versucht, es zu korrigieren, aber einige Idioten haben die Bearbeitung abgelehnt.
Bachsau
7

Ich möchte beide Antworten ergänzen, aber ich habe keine Punkte, ich füge eine neue Antwort hinzu. Bei kürzlich durchgeführten Tests unter Chrome (Version 63.0.3239.132 (Official Build) (64-Bit-Windows)) habe ich Folgendes festgestellt:

  1. Für Inline-SVG, das direkt in die HTML-Datei über Texteditor oder Javascript und elm.innerHTML eingegeben wird, sind die xmlns-Attribute nicht erforderlich, wie in den beiden anderen Antworten angegeben.
  2. Für Inline-SVG, das über Javascript und AJAX geladen wird, gibt es zwei Möglichkeiten:
    • Verwenden Sie xhr.responseTextund elm.innerHTML. Dies erfordert keine xmlns.
    • Verwenden Sie xhr.responseXML.documentElementund elm.appendChild()oder elm.insertBefore(). Diese Methode zum Erstellen des Inline-SVG führt zu halbgebackenen Ergebnissen, ohne dass der grundlegende SVG-Namespace wie in deklariert wird xmlns="http://www.w3.org/2000/svg". Das <svg> wird in den HTML-Code geladen, aber Funktionen auf Dokumentebene, wie getElementById()sie im <svg> -Element nicht erkannt werden. Ich gehe davon aus, dass dies daran liegt, dass der XMLHttpRequest-XML-Parser außerhalb des HTML-Codes verwendet wird.
Marmelade
quelle
0

Über das SVG-Versionsattribut sagt das MDN WebDoc

Veraltet seit SVG 2
Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser dies möglicherweise noch unterstützen, wurde es möglicherweise bereits aus den relevanten Webstandards entfernt, wird möglicherweise gerade gelöscht oder nur aus Kompatibilitätsgründen aufbewahrt. Vermeiden Sie die Verwendung und aktualisieren Sie den vorhandenen Code nach Möglichkeit. Informationen zu Ihrer Entscheidung finden Sie in der Kompatibilitätstabelle unten auf dieser Seite. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktioniert.

Das Versionsattribut gibt an, welcher Spezifikation ein SVG-Dokument entspricht. Es ist nur für das Stammelement zulässig. Es ist rein beratend und hat keinen Einfluss auf das Rendern oder Verarbeiten.

PS: Das SVG 2 ist noch lange kein Standard.

Velusamy Velu
quelle