Bagaimana Memasukkan Grafis SVG di Halaman Web Anda

SVG atau Scalable Vector Graphics memungkinkan Anda membuat gambar yang jauh lebih rumit dan membuatnya ditampilkan di halaman web. Tetapi Anda tidak bisa begitu saja mengambil tag SVG dan menaruhnya ke dalam HTML Anda. Mereka tidak akan muncul dan halaman Anda tidak akan valid. Sebaliknya, Anda harus menggunakan salah satu dari tiga metode.

Gunakan Tag Objek untuk Menyematkan SVG

Tag HTML akan menyematkan grafik SVG di halaman web Anda. Anda menulis tag objek dengan atribut data untuk menentukan file SVG yang ingin Anda buka. Anda juga harus menyertakan atribut lebar dan tinggi untuk menentukan lebar dan tinggi gambar SVG Anda (dalam piksel).

Untuk kompatibilitas lintas-browser, Anda harus menyertakan atribut jenis, yang harus dibaca:

ketik = "image / svg + xml"

dan basis kode untuk browser yang tidak mendukungnya (Internet Explorer 8 dan lebih rendah). Basis kode Anda akan mengarah ke plugin SVG untuk browser yang tidak mendukung SVG. Plugin yang paling sering digunakan adalah dari Adobe di http://www.adobe.com/svg/viewer/install/. Namun, plugin ini tidak lagi didukung oleh Adobe. Pilihan lainnya adalah plugin Ssrc SVG dari Savarese Software Research di http://www.savarese.com/software/svgplugin/.

Objek Anda akan terlihat seperti ini:

Tips untuk Menggunakan objek untuk SVG

  • Pastikan lebar dan tinggi setidaknya sama besar dengan gambar yang Anda embedding. Jika tidak, gambar Anda mungkin terpotong.
  • SVG Anda mungkin tidak ditampilkan dengan benar jika Anda tidak menyertakan jenis konten yang benar (ketik = "image / svg + xml"), jadi saya tidak menyarankan untuk meninggalkannya.
  • Anda dapat menyertakan informasi penggantian di dalam tag objek untuk browser yang tidak akan menampilkan file SVG.
  • Anda juga dapat mengatur sumber SVG Anda dan tipe konten dalam parameter. Ini mungkin bekerja lebih baik di IE 6 dan 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Perlu diketahui bahwa ini membutuhkan classid untuk membuatnya bekerja.

Lihat SVG dalam contoh objek tag.

Sematkan SVG dengan Tag Penyematan

Pilihan lain yang Anda miliki untuk memasukkan SVG adalah menggunakan tag. Anda menggunakan atribut yang hampir sama dengan tag objek, termasuk lebar <, tinggi, jenis, dan basis kode>. Satu-satunya perbedaan adalah bahwa alih-alih data, Anda menempatkan URL dokumen SVG Anda di atribut src.

Embed Anda akan terlihat 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 "/>

Tips untuk Menggunakan Embed untuk SVG

  • Tag embed tidak valid HTML4, tetapi itu adalah HTML5 yang valid, jadi jika Anda menggunakannya di halaman HTML4, Anda harus ingat bahwa halaman Anda tidak akan memvalidasi.
  • Gunakan nama domain sepenuhnya quoalified di atribut src untuk kompatibilitas terbaik.
  • Ada juga beberapa laporan yang menggunakan tag embed dengan plugin Adobe akan menghentikan Mozilla versi 1.0 hingga 1.4.

Lihat SVG dalam contoh tag embed.

Gunakan iframe untuk Sertakan SVG

Iframes adalah cara mudah lainnya untuk menyertakan gambar SVG di halaman web Anda. Hanya membutuhkan tiga atribut: lebar dan tinggi seperti biasa, dan src menunjuk ke lokasi file SVG Anda.

Iframe Anda akan terlihat seperti ini: