Pada Kesempatan kali ini kita akan belajar cara menggunakan external SVG di HTML5, yang unik dari svg ini kita bisa memanggil file dari luar sama halnya seperti kita memanggil gambar dan hal ini bisa juga di gunakan pada SVG element, oke langsung saja Dalam contoh-contoh yang kita jalankan sampai sekarang, gambar SVG berada langsung di halaman HTML. Dalam prakteknya, gambar ini umumnya merupakan dalam file terpisah, mirip seperti gambar .jpg maupun .png.

Kita pun bisa memindahkan gambar SVG ke sebuah file terpisah, dan untuk belajar cara menggunakan external SVG di HTML5 kemudian menginputnya menggunakan tag <img> seperti gambar biasa. File gambar SVG ini disimpan dengan extension.svg. Silahkan anda ketik kode berikut ke dalam sebuah file baru:

Dari kode diatas terdapat 3 buah tag <rect>, artinya ada 3 buah kotak persegi. Kotak pertama berupa persegi panjang dengan dimensi 300×200 pixel, isi kotak berwarna putih (white) dan garis tepi hitam. Titik kanan atas kotak berada di titik 10, 10.

Kotak kedua berukuran 300×100, memiliki warna merah (red) dan juga dimulai dari titik 10,10. Artinya, kotak ini akan menimpa kotak pertama, tapi hanya setengah bagian atas.  Kotak berukuran 300×10, berwarna putih dan dimulai dari titik 10, 110. Artinya, kotak ini juga menimpa kotak pertama namun setengah bagian bawah. Bisakah anda menebak bentuk akhir dari ketiga kotak ini? Yup, berupa kotak merah-putih yang
menyerupai bendera Indonesia.

Save-lah kode diatas dengan nama file: ekternal.svg. Ingat, kali ini kita tidak membuat dokumen HTML, tapi sebuah dokumen SVG. Dokumen SVG tidak memerlukan deklarasi <!DOCTYPE html>, tapi langsung tag <svg>. Atribut xmlns=”http://www.w3.org/2000/svg” wajib ditulis. Jika tidak, gambar SVG tidak akan tampil di web browser. Berikut tampilan file bendera.svg  ketika di akses dari web browser:

Selanjutnya, buat sebuah file HTML baru, dan akses file bendera.svg menggunakan tag <img>, seperti saat kita mengakses gambar jpg:

Dan Hasilnya:

cara menggunakan external SVG di HTML5

Cara seperti ini umum digunakan untuk memisahkan file gambar SVG dengan kode HTML. Penggunaannya juga tidak berbeda dengan format gambar yang lainnya seperti .jpg maupun .png. Sebagai praktek tambahan, silahkan anda zoom gambar bendera ini menggunakan fitur zoom di web browser, gambar tersebut tidak akan pecah. Bagaimana teman-teman sangat menarik ya, dan cukup sekian dulu belajar kita tentang cara menggunakan external SVG di HTML5, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya terimakasih.