Apakah parameter SVG seperti 'xmlns' dan 'versi' diperlukan?

203

Dalam sekitar setengah dari contoh svg yang saya lihat di internet, kode tersebut dibungkus dengan <svg></svg>tag sederhana .

Di bagian lain, tag svg memiliki banyak atribut rumit seperti ini: 

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

Pertanyaan saya adalah: apakah boleh menggunakan tag svg sederhana? Saya sudah mencoba bermain-main dengan yang rumit, dan semuanya bekerja dengan baik pada akhirnya jika saya tidak memasukkannya.

xml svg tags Lars
sumber

Jawaban:

206

Semua agen pengguna (browser) mengabaikan atribut versi, sehingga Anda selalu dapat menghapusnya.

Jika Anda menanamkan SVG inline di halaman HTML dan melayani halaman itu text/htmlmaka atribut xmlns tidak diperlukan . Memasukkan SVG inline dalam dokumen HTML adalah inovasi yang cukup baru yang datang sebagai bagian dari HTML5.

Namun jika Anda melayani halaman Anda sebagai image / svg + xml atau aplikasi / xhtml + xml atau jenis MIME lain yang menyebabkan agen pengguna untuk menggunakan parser XML kemudian xmlns atribut yang diperlukan . Ini adalah satu-satunya cara untuk melakukan hal-hal hingga saat ini sehingga ada banyak konten yang disajikan seperti ini.

Robert Longson
sumber
5
"Semua UA mengabaikan atribut versi, jadi kamu selalu bisa menghilangkannya." - tapi apa yang spec katakan tentang masalah ini? "Peramban akan membiarkan Anda lolos begitu saja" adalah (atau pada titik tertentu) benar dari banyak praktik yang (atau) jelas salah.
Mark Amery
Di IE11, jika saya <!DOCTYPE svg xmlns="www.w3.org/2000/svg">membuatnya bekerja, tetapi jika saya mengambil xmlns atau mengubahnya <!DOCTYPE svg xmlns="www.example.com">tidak berfungsi. Mengapa demikian?
Donald Duck
8
Bisakah sebuah sumber dikutip untuk jawaban ini?
2540625
69
Saya menulis sebagian kecil dari kode SVG di Firefox dan saya berkata begitu. Apakah itu tidak cukup baik? Jika tidak, saya tetap menambahkan beberapa tautan.
Robert Longson
1
@Marcel tidak jika data-uris tersebut adalah image / svg + xml, yang biasanya merupakan kasusnya, maka bagian terakhir dari jawaban tersebut ada.
Robert Longson
228

The xmlns="http://www.w3.org/2000/svg"atribut:

  • Diperlukan untuk file gambar / svg + xml . 1
  • Opsional untuk inline <svg> . 2

The xmlns:xlink="http://www.w3.org/1999/xlink"atribut:

  • Diperlukan untuk file gambar / svg + xml dengan atribut xlink: 1
  • Opsional untuk inline <svg> dengan atribut xlink:. 2

The version="1.1"atribut:

  • Disarankan untuk mematuhi standar file gambar / svg + xml . 3
  • Tampaknya diabaikan oleh setiap agen pengguna. 4
  • Dihapus dalam SVG 2. 5

1 Pengidentifikasi Sumberdaya yang Daring (RFC3987)
2 Sejak HTML5
3 Extensible Markup Language (XML) 1.0
4 Mungkin sampai rilis versi utama lebih lanjut.
5 SVG 2, Rekomendasi Calon W3C, 07 Agustus 2018

ncomputer
sumber
2
Apakah perlu http atau bisa juga https?
JohannesB
2
@ JohannesB kedua protokol tersebut kompatibel: D
ncomputer
1
@JohannesB ya di sini Anda memiliki inline contoh HTTP HTTPS dan image / svg + xml file tersebut dengan inline SVG dengan xlink atribut misalnya HTTP HTTPS
ncomputers
1
Terima kasih, tebak Nick Craver juga membuat kesalahan;)
JohannesB
2
Jangan keliru versionatribut deklarasi xml ( <?xml version...) untuk versionatribut <svg>elemen. Yang pertama adalah tentang versi bahasa markup XML, sedangkan yang terakhir menentukan versi SVG. Penulis jawaban ini membuat kesalahan dengan merujuk pada XML, bukan spesifikasi SVG di ³. Saya mencoba memperbaikinya, tetapi beberapa idiot menolak hasil edit.
Bachsau
7

Saya ingin menambahkan kedua jawaban, tetapi saya tidak punya poin, saya menambahkan jawaban baru. Dalam pengujian terbaru pada Chrome (Versi 63.0.3239.132 (Build Resmi) (Windows 64-bit)), saya telah menemukan bahwa:

  1. Untuk SVG inline yang secara langsung dimasukkan ke dalam file HTML, melalui editor teks atau javascript dan elm.innerHTML, atribut xmlns tidak diperlukan, sebagaimana dinyatakan dalam dua jawaban lainnya.
  2. Tetapi untuk SVG inline yang dimuat melalui javascript dan AJAX, ada dua opsi:
    • Gunakan xhr.responseTextdan elm.innerHTML. Ini tidak memerlukan xmlns.
    • Gunakan xhr.responseXML.documentElementdan elm.appendChild()atau elm.insertBefore(). Metode membuat inline SVG ini menghasilkan hasil setengah matang tanpa dasar namespace SVG yang dideklarasikan, seperti pada xmlns="http://www.w3.org/2000/svg". <svg> dimuat ke HTML, tetapi fungsi tingkat dokumen, seperti getElementById()tidak dikenali pada elemen <svg>. Saya berasumsi bahwa ini adalah karena menggunakan parser XMLHttpRequest XML di luar HTML.
jamess
sumber
0

Tentang atribut versi SVG, MDN WebDoc mengatakan

Tidak digunakan lagi karena SVG 2
Fitur ini tidak lagi direkomendasikan. Meskipun beberapa browser mungkin masih mendukungnya, mungkin telah dihapus dari standar web yang relevan, mungkin sedang dalam proses dijatuhkan, atau hanya dapat disimpan untuk tujuan kompatibilitas. Hindari menggunakannya, dan perbarui kode yang ada jika memungkinkan; lihat tabel kompatibilitas di bagian bawah halaman ini untuk memandu keputusan Anda. Ketahuilah bahwa fitur ini dapat berhenti bekerja kapan saja.

Atribut versi digunakan untuk menunjukkan spesifikasi apa yang sesuai dengan dokumen SVG. Itu hanya diperbolehkan pada elemen root. Ini murni saran dan tidak memiliki pengaruh pada rendering atau pemrosesan.

PS: SVG 2 masih jauh dari standar.

Velusamy Velu
sumber