Pandangan terhadap Scalable Vector Graphics (SVG)

Grafik vektor telah banyak diterapkan di media cetak. Di situs web, kami juga dapat menambahkan grafik vektor dengan SVG atau Grafis Vektor yang Dapat Dikukur. Mengutip dari spesifikasi resmi di W3.org, SVG digambarkan sebagai:

Bahasa untuk menggambarkan grafik dua dimensi dalam XML. SVG memungkinkan untuk tiga jenis objek ßgraphik: bentuk grafik vektor (mis. Jalur yang terdiri dari garis lurus dan kurva), gambar, dan teks.

Sebenarnya sudah ada sejak 1999 dan pada 16 Agustus 2011, itu menjadi Rekomendasi W3C. Namun, SVG masih sangat kurang dimanfaatkan, sedangkan ada banyak keuntungan dalam menggunakan Vector daripada Bitmap untuk menyajikan grafik atau gambar di situs web..

Keuntungan SVG

Dalam hal melayani grafik di situs web, SVG menawarkan beberapa keunggulan dibandingkan Bitmap, beberapa di antaranya termasuk:

Resolusi Independen

Grafik bitmap / raster tergantung pada resolusi - ini dibangun berdasarkan piksel. Grafik yang disajikan akan tampak pixelated ketika diubah ukurannya pada tingkat zoom tertentu. Itu tidak terjadi pada grafik vektor, yang sifatnya resolusi bebas, karena grafik diekspresikan dengan persamaan matematika yang membuatnya dapat diukur pada tingkat zoom apa pun dengan tetap menjaga kualitas, bahkan di Retina Display.

Mengurangi Permintaan HTTP

SVG dapat disematkan langsung ke dokumen HTML dengan svg tag, sehingga browser tidak perlu melakukan permintaan untuk menyajikan grafik. Ini juga menghasilkan kinerja pemuatan yang lebih baik untuk situs web.

Styling dan Scripting

Menyematkan langsung dengan svg Tag juga akan memungkinkan kita untuk mendesain grafik dengan mudah melalui CSS. Kita dapat mengubah properti objek seperti warna latar belakang, opacity, batas, dll cara yang sama kita lakukan dengan tag HTML biasa. Demikian pula, kita juga dapat memanipulasi grafik melalui JavaScript.

Dapat dianimasikan dan Diedit

Objek SVG dapat dianimasikan ketika menggunakan elemen animasi atau melalui JavaScript Library seperti jQuery. Objek SVG juga dapat diedit dengan editor kode teks atau perangkat lunak grafik seperti Inkscape (yang gratis) atau Adobe Illustrator.

Ukuran File Lebih Kecil

SVG memiliki ukuran file yang lebih kecil dibandingkan dengan Bitmap, yang memiliki presentasi grafik yang serupa.

Menggambar Bentuk Dasar dengan SVG

Menurut spek, kita dapat menggambar beberapa bentuk dasar seperti persegi panjang, lingkaran, garis, elips, polyline, dan poligon dengan SVG dan agar browser membuat grafik SVG, semua elemen grafik tersebut harus dimasukkan ke dalam menandai. Mari kita lihat contoh di bawah ini untuk lebih jelasnya:

Baris

Menggambar sebuah garis di SVG kita bisa menggunakan elemen. Elemen ini digunakan untuk menggambar garis lurus tunggal, sehingga hanya akan terdiri dari dua titik, mulai dan akhir.

Seperti yang Anda lihat di atas, koordinat titik mulai garis dinyatakan dengan dua atribut pertama x1 dan x2, sedangkan koordinat titik akhir garis dinyatakan dengan y1 dan y2.

Ada juga dua atribut lainnya, yaitu pukulan dan lebar langkah yang digunakan untuk menentukan warna dan lebar perbatasan masing-masing. Atau, kita juga bisa mendefinisikan atribut ini dalam gaya inline, seperti:

akhirnya hanya melakukan hal yang sama.

• Lihat Demo “Baris”

Polyline

Ini hampir mirip dengan , tetapi dengan elemen kita bisa menggambar beberapa garis, bukan hanya satu. Berikut ini sebuah contoh:

elemen memiliki poin atribut yang menyimpan semua koordinat yang membentuk garis.

• Lihat Demo “Polyline”

Empat persegi panjang

Menggambar persegi panjang juga sederhana dengan ini elemen. Kita hanya perlu menentukan lebar dan tinggi, seperti:

• Lihat Demo “Empat persegi panjang”

Lingkaran

Kita juga bisa menggambar lingkaran dengan elemen. Pada contoh berikut, kita akan membuat lingkaran dengan 100 radius yang didefinisikan dengan r atribut:

Dua atribut pertama, cx dan cy mendefinisikan koordinat pusat lingkaran. Pada contoh di atas, kita telah menetapkan 102 keduanya untuk x dan y berkoordinasi, jika atribut ini tidak ditentukan, 0 akan dianggap sebagai nilai default.

• Lihat Demo “Lingkaran”

Elips

Kita bisa menggambar elips dengan . Ini berfungsi sangat mirip dengan lingkaran, tetapi kali ini kita dapat mengontrol secara khusus x jari-jari garis dan y jari-jari garis dengan rx dan ry atribut;

• Lihat Demo “Elips”

Poligon

Dengan elemen, kita bisa menggambar beberapa sisi bentuk seperti segitiga, segi enam dan bahkan persegi panjang. Berikut ini sebuah contoh:

• Lihat Demo “Poligon”

Menggunakan Editor Grafik Vektor

Seperti yang Anda lihat, menggambar objek sederhana dengan SVG dalam HTML cukup mudah. Namun, ketika objek menjadi lebih kompleks, latihan itu tidak lagi ideal dan akan membuat Anda pusing.

Untungnya, seperti yang telah kami sebutkan di atas, kita dapat menggunakan editor grafis seperti vektor Adobe Illustrator atau Inkscape untuk melakukan pekerjaan itu. Jika Anda terbiasa dengan perangkat lunak ini, tentu jauh lebih mudah untuk menggambar objek dengan GUI mereka daripada kode sendiri grafik dalam tag HTML.

Jika Anda bekerja dengan Inkscape, Anda dapat menyimpan grafik vektor sebagai SVG biasa, dan kemudian membukanya di editor kode teks. Sekarang, Anda harus menemukan kode SVG dalam file. Salin semua kode dan tempel di dalam dokumen HTML Anda.

Atau, Anda juga bisa menanamkan .svg file melalui salah satu elemen ini; menanamkan, iframe dan obyek, contohnya;

Hasilnya pada akhirnya akan sama.

Dalam contoh ini, saya menggunakan Apple iPod ini dari OpenClipArt.org.

• Lihat Demo “iPod”

Dukungan Browser

Mengenai dukungan browser, SVG telah didukung dengan sangat baik di semua browser utama, kecuali di IE8 dan sebelumnya. Tetapi masalah ini dapat diselesaikan dengan Perpustakaan JavaScript ini, yang disebut Raphael.js. Untuk mempermudah, kami akan menggunakan alat ini, ReadySetRaphael.com untuk mengubah kode SVG kami ke format yang didukung Raphael. Begini caranya.

Pertama-tama, unduh dan sertakan Raphael.js perpustakaan ke dokumen HTML Anda. Lalu, unggah file .svg file ke situs, salin dan tempel kode yang dihasilkan di dalam pemuatan berikut fungsi;

 window.onload = function () // kode Raphael ada di sini 

Di dalam tubuh tag, letakkan yang berikut ini div dengan rsr atribut id;

Itu dia, sudah selesai. Lihatlah contoh dari tautan di bawah ini.

• Lihat Demo “Raphael”

Pikiran terakhir

Jadi itulah dasar-dasarnya dengan SVG. Kami harap sekarang Anda memiliki pemahaman yang adil tentang masalah ini. Ini adalah cara terbaik untuk mengoptimalkan situs Anda untuk resolusi layar apa pun, bahkan untuk digunakan pada layar Retina.

Seperti biasa, jika Anda adalah orang yang suka bertualang, di sini kami telah menempatkan beberapa referensi dan diskusi untuk menggali lebih dalam tentang topik ini.

• Pengantar Sekolah SVG - W3
• Resolusi Independen dengan SVG - Smashing Magazine
• Mengapa Anda Tidak Menggunakan SVG? - NetTuts

Terima kasih telah membaca dan kami harap Anda menikmati posting ini.

• Lihat Demo
• Sumber Unduhan