Cara Pasang Grafik SVG pada Halaman Web Anda

Grafik Vektor SVG atau Skalable membolehkan anda menarik imej yang lebih kompleks dan memaparkannya pada laman web. Tetapi anda tidak boleh hanya mengambil tag SVG dan menampalkannya ke dalam HTML anda. Mereka tidak akan muncul dan halaman anda akan tidak sah. Sebaliknya, anda perlu menggunakan salah satu daripada tiga kaedah.

Gunakan Tag Objek untuk Menambah SVG

Tag HTML akan membenamkan grafik SVG di halaman web anda. Anda menulis tag objek dengan atribut data untuk menentukan fail SVG yang anda mahu buka. Anda juga harus memasukkan atribut lebar dan ketinggian untuk menentukan lebar dan ketinggian imej SVG anda (dalam piksel).

Untuk keserasian silang pelayar, anda harus memasukkan atribut jenis, yang sepatutnya dibaca:

type = "image / svg + xml"

dan asas bagi pelayar yang tidak menyokongnya (Internet Explorer 8 dan lebih rendah). Kod pangkalan anda akan menunjuk kepada plugin SVG untuk penyemak imbas yang tidak menyokong SVG. Plugin yang paling biasa digunakan ialah dari Adobe di http://www.adobe.com/svg/viewer/install/. Walau bagaimanapun, plugin ini tidak lagi disokong oleh Adobe. Pilihan lain ialah plugin Ssrc SVG dari Penyelidikan Perisian Savarese di http://www.savarese.com/software/svgplugin/.

Objek anda akan kelihatan seperti ini:

Petua untuk Menggunakan objek untuk SVG

  • Pastikan lebar dan ketinggian sekurang-kurangnya sebesar imej yang anda gunakan. Jika tidak, imej anda mungkin dipotong.
  • SVG anda mungkin tidak dipaparkan dengan betul jika anda tidak memasukkan jenis kandungan yang betul (jenis = "image / svg + xml"), jadi saya tidak mengesyorkan meninggalkannya.
  • Anda boleh memasukkan maklumat sandaran di dalam tag objek untuk penyemak imbas yang tidak akan memaparkan fail SVG.
  • Anda juga boleh menetapkan sumber SVG anda dan jenis kandungan dalam parameter. Ini boleh berfungsi dengan lebih baik dalam IE 6 dan 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Ambil perhatian bahawa ini memerlukan classid untuk menjadikannya berfungsi.

Lihat SVG dalam contoh tag objek.

Benamkan SVG dengan Tag Benamkan

Pilihan lain yang anda miliki untuk memasukkan SVG adalah menggunakan tag. Anda menggunakan hampir atribut yang sama dengan tag objek, termasuk lebar <, ketinggian, jenis, dan kod>. Satu-satunya perbezaan ialah bukan data, anda meletakkan URL dokumen SVG anda di atribut src.

Embedding anda akan kelihatan seperti ini:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

Petua untuk Menggunakan Benamkan untuk SVG

  • Teg embed tidak HTML4 sah, tetapi HTML5 sah, jadi jika anda menggunakannya dalam halaman HTML4, anda harus ingat bahawa halaman anda tidak akan sahkan.
  • Gunakan nama domain yang dikehendaki sepenuhnya di atribut src untuk keserasian yang terbaik.
  • Terdapat juga beberapa laporan yang menggunakan teg embed dengan plugin Adobe akan mengosongkan versi Mozilla 1.0 hingga 1.4.

Lihat SVG dalam contoh tag semula.

Gunakan iframe untuk Sertakan SVG

Iframes adalah satu lagi cara mudah untuk memasukkan imej SVG pada halaman web anda. Ia hanya memerlukan tiga atribut: lebar dan ketinggian seperti biasa, dan src menunjuk ke lokasi fail SVG anda.

Iframe anda akan kelihatan seperti ini: