Memasukan Kode SVG yang Sudah Dibuat di Inkscape ke dalam html

Dikutip dari Wikipedia kalau Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh World Wide Web Consortium (W3C) sejak tahun 1999.

Sebuah gambar dengan format SVG disimpan dalam bentuk file XML. Ini berarti, SVG dapat dicari, di-index, ditulis dengan bahasa pemograman dan dikompres. Karena berbasis XML, SVG dapat dibuat dan disunting dengan aplikasi teks apa saja.

Sejumlah peramban web populer seperti Mozilla FirefoxInternet ExplorerGoogle ChromeOpera, dan Safari sudah mulai mendukung penggunakan format SVG.

Format penyimpanan berkas inkscape adalah berupa kode XML. Itu artinya kita dapat membuka berkas ini di pengedit kode dan dapat melihat susunan kode yang membentuk berkas desain yang telah kita buat. Di dalam susunan kode yang telah dibuka kita akan menemukan tag <svg> yang mana itu merupakan lokasi dimana gambar yang kita buat berada. Oleh karena SVG didukung oleh banyak browser saat ini dan sudah umum digunakan maka kita bisa langsung memanfaatkannya dengan meyalin kode tersebut untuk dapat kita gunakan sesuai keperluan misalnya kita dapat gunakan untuk logo pada sebuat website atau kita bisa letakan pada lokasi tertentu langsung pada berkas html website tersebut.

Berikut adalah uji coba yang penulis lakukan dalam membuat bekas html yang akan tampil ketika webiste/ server dalam keadaan bermasalah.

Cukup menggunakan satu berkas html yang di dalamnya sudah termasuk CSS dan kode SVG yang dimasukan ke dalam struktur halaman tersebut maka tidak perlu lagi memanggil data lainnya seperti gambar karena sudah jadi satu berkas html.

Artikel ini pertama kali tayang di Panduan BlankOn