Czy potrzebne są parametry SVG, takie jak „xmlns” i „wersja”?

203

W około połowie przykładów SVG, które widzę w Internecie, kod jest zawinięty w proste, proste <svg></svg>tagi.

W drugiej połowie tagi svg mają wiele skomplikowanych atrybutów: 

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

Moje pytanie brzmi: czy można używać prostych tagów svg? Próbowałem bawić się skomplikowanymi i wszystko działa dobrze, jeśli ich nie uwzględnię.

xml svg tags Lars
źródło

Odpowiedzi:

206

Wszystkie aplikacje klienckie (przeglądarki) ignorują atrybut wersji, więc zawsze możesz go upuścić.

Jeśli umieścić swój SVG inline na stronie HTML i służyć tej strony jak text/htmlpotem xmlns atrybuty nie są wymagane . Osadzanie wbudowanych plików SVG w dokumentach HTML jest dość nową innowacją, która pojawiła się w ramach HTML5.

Jeśli jednak podajesz stronę jako image / svg + xml lub application / xhtml + xml lub jakikolwiek inny typ MIME, który powoduje, że agent użytkownika używa parsera XML, wymagane są atrybuty xmlns . To był jedyny sposób na zrobienie czegoś do niedawna, więc jest tam dużo treści.

Robert Longson
źródło
5
„Wszystkie UA ignorują atrybut wersji, więc zawsze możesz go upuścić”. - ale co spec ma do powiedzenia na ten temat? „Przeglądarki pozwolą ci to uciec” jest (lub kiedyś było) prawdą w przypadku wielu praktyk, które są (lub były) jednoznacznie niepoprawne.
Mark Amery
W IE11, jeśli powiem, <!DOCTYPE svg xmlns="www.w3.org/2000/svg">że działa, ale jeśli zabiorę xmlns lub zmienię na <!DOCTYPE svg xmlns="www.example.com">to, to nie działa. Dlaczego?
Kaczor Donald
8
Czy można podać źródło tej odpowiedzi?
2540625
69
Napisałem znaczącą część kodu SVG w Firefoksie i tak mówię. Czy to nie wystarczy? Jeśli nie, to i tak dodałem kilka linków.
Robert Longson
1
@Marcel nie, jeśli te dane-uris to image / svg + xml, co zwykle ma miejsce, to ostatnia część odpowiedzi pozostaje w mocy.
Robert Longson
228

xmlns="http://www.w3.org/2000/svg"Atrybutem jest:

  • Wymagane dla plików image / svg + xml . 1
  • Opcjonalnie dla inline <svg> . 2)

xmlns:xlink="http://www.w3.org/1999/xlink"Atrybutem jest:

  • Wymagane dla image / svg + xml plików z XLink: atrybuty. 1
  • Opcjonalnie dla inlined <svg> z XLink: atrybuty. 2)

version="1.1"Atrybutem jest:

  • Zalecana zgodność ze standardami plików image / svg + xml . 3)
  • Najwyraźniej ignorowane przez każdego agenta użytkownika. 4
  • Usunięto w SVG 2. 5

1 Międzynarodowe identyfikatory zasobów (RFC3987)
2 Od HTML5
3 Extensible Markup Language (XML) 1.0
4 Prawdopodobnie do czasu wydania kolejnych głównych wersji.
5 SVG 2, Rekomendacja dla kandydatów W3C, 7 sierpnia 2018 r

nkomputery
źródło
2
Czy musi to być http, czy może być również https?
JohannesB
2
@JohannesB oba protokoły są kompatybilne: D
nkomputery
1
@JohannesB tak tutaj masz inlined przykład HTTP HTTPS i image / svg + xml plik z inlined SVG z XLink atrybuty przykład HTTP HTTPS
ncomputers
1
Dzięki, domyślam się, że Nick Craver również popełnia błędy;)
JohannesB
2
Nie należy mylić versionatrybutu deklaracji xml ( <?xml version...) z versionatrybutem <svg>elementu. Pierwszy dotyczy wersji języka znaczników XML, podczas gdy drugi określa wersję SVG. Autor tej odpowiedzi popełnił ten błąd, odwołując się do XML, a nie specyfikacji SVG w ³. Próbowałem to poprawić, ale niektórzy idioci odrzucili edycję.
Bachsau,
7

Chciałbym dodać do obu odpowiedzi, ale nie mam punktów, dodaję nową odpowiedź. W ostatnich testach w Chrome (wersja 63.0.3239.132 (oficjalna wersja) (64-bitowy system Windows)) stwierdziłem, że:

  1. W przypadku wbudowanego pliku SVG, który jest bezpośrednio wprowadzany do pliku HTML, za pomocą edytora tekstu lub javascript i elm.innerHTML, atrybuty xmlns nie są konieczne, jak podano w dwóch pozostałych odpowiedziach.
  2. Ale dla wbudowanego SVG, który jest ładowany przez javascript i AJAX, istnieją dwie opcje:
    • Użyj xhr.responseTexti elm.innerHTML. To nie wymaga xmlns.
    • Użyj xhr.responseXML.documentElementi elm.appendChild()lub elm.insertBefore(). Ta metoda tworzenia wbudowanego pliku SVG daje wyniki w połowie wypalone bez zadeklarowania podstawowej przestrzeni nazw SVG, jak w xmlns="http://www.w3.org/2000/svg". <svg> ładuje się do HTML, ale funkcje na poziomie dokumentu, takie jak getElementById()nie są rozpoznawane w elemencie <svg>. Zakładam, że dzieje się tak, ponieważ używa on parsera XMLHttpRequest poza HTML.
dżem
źródło
0

O atrybucie wersji SVG mówi MDD WebDoc

Przestarzałe od SVG 2
Ta funkcja nie jest już zalecana. Chociaż niektóre przeglądarki mogą go nadal obsługiwać, być może zostały już usunięte z odpowiednich standardów internetowych, mogą być w trakcie upuszczania lub mogą być przechowywane wyłącznie w celu zachowania zgodności. Unikaj go i, jeśli to możliwe, aktualizuj istniejący kod; zapoznaj się z tabelą kompatybilności na dole tej strony, aby podjąć decyzję. Pamiętaj, że ta funkcja może przestać działać w dowolnym momencie.

Atrybut wersji służy do wskazania, z jaką specyfikacją jest zgodny dokument SVG. Jest to dozwolone tylko w elemencie głównym. Jest to czysto doradcze i nie ma wpływu na renderowanie lub przetwarzanie.

PS: SVG 2 nie jest jeszcze standardem.

Velusamy Velu
źródło