A Look into Graphics Vector Scalable (SVG)

Grafik vektor telah digunakan secara meluas dalam media cetak. Dalam laman web, kita juga boleh menambah grafik vektor dengan SVG atau Grafik Vektor Berkala. Memetik dari spesifikasi rasmi di W3.org, SVG digambarkan sebagai:

Satu bahasa untuk menerangkan grafik dua dimensi dalam XML. SVG membenarkan tiga jenis objek rafgrik: bentuk grafik vektor (contohnya, jalan yang terdiri daripada garis lurus dan lengkung), imej dan teks.

Ia sebenarnya telah wujud sejak tahun 1999 dan pada 16 Ogos 2011, ia menjadi Cadangan W3C. Namun, SVG masih kurang digunakan, sedangkan terdapat banyak kelebihan dalam menggunakan Vektor daripada Bitmap untuk berfungsi grafik atau imej di laman web.

Kelebihan SVG

Dari segi berkhidmat grafik di laman web, SVG menawarkan beberapa kelebihan berbanding Bitmap, beberapa daripadanya termasuk:

Resolusi Bebas

Grafik bitmap / raster adalah bergantung kepada resolusi - ia dibina atas piksel. Grafik yang berkhidmat akan kelihatan pixelated apabila saiznya diubah pada tahap zum tertentu. Itu tidak berlaku pada grafik vektor, yang merupakan resolusi bebas, kerana grafik itu dinyatakan dengan persamaan matematik yang menjadikannya berskala di mana-mana tahap zum sambil mengekalkan kualiti, walaupun di Retina Display.

Mengurangkan Permintaan HTTP

SVG boleh disematkan terus ke dalam dokumen HTML dengan svg tag, jadi penyemak imbas tidak perlu melakukan permintaan untuk melayani grafik. Ini juga menghasilkan prestasi beban yang lebih baik untuk laman web.

Styling dan Scripting

Menyematkan secara langsung dengan svg tag juga akan membolehkan kita untuk gaya grafik dengan mudah melalui CSS. Kita boleh menukar sifat objek seperti warna latar belakang, kelegapan, sempadan, dan lain-lain dengan cara yang sama dengan tag HTML biasa. Begitu juga, kita juga boleh memanipulasi grafik menerusi JavaScript.

Boleh animasi dan Edited

Objek SVG boleh dinyanyikan apabila menggunakan unsur animasi atau melalui JavaScript JavaScript seperti jQuery. Objek SVG juga boleh diedit dengan mana-mana editor kod teks atau perisian grafik seperti Inkscape (yang percuma) atau Adobe Illustrator.

Saiz fail yang lebih kecil

SVG mempunyai saiz fail yang lebih kecil berbanding dengan Bitmap, yang mempunyai persembahan grafik serupa.

Menggambar Asas Asas dengan SVG

Menurut spesifikasi, kita boleh melukis beberapa bentuk asas seperti segi empat tepat, bulatan, garis, elips, polyline dan poligon dengan SVG dan agar penyemak imbas memberikan grafik SVG, semua elemen grafik perlu dimasukkan dalam tag. Mari lihat contoh di bawah untuk maklumat lanjut:

Talian

Untuk melukis satu baris di SVG kita boleh menggunakan elemen. Elemen ini digunakan untuk melukis satu garisan lurus, sehingga hanya terdiri dari dua titik, mulakan dan akhir.

Seperti yang dapat anda lihat di atas, koordinat titik permulaan baris dinyatakan dengan dua atribut pertama x1 dan x2, manakala koordinat titik akhir baris dinyatakan dengan y1 dan y2.

Terdapat juga dua atribut lain, iaitu strok dan lebar strok yang digunakan untuk menentukan warna sempadan dan lebar sempadan masing-masing. Sebagai alternatif, kita juga boleh menentukan sifat-sifat ini dalam gaya sebaris, seperti:

ia akhirnya melakukan perkara yang sama.

• Lihat Demo “Talian”

Poliester

Ia hampir sama dengan , tetapi dengan elemen yang kita dapat menarik beberapa baris bukannya satu. Inilah contohnya:

elemen mempunyai mata atribut yang menyimpan semua koordinat yang membentuk garis.

• Lihat Demo “Poliester”

Segi empat

Melukis segi empat tepat juga mudah dengan ini elemen. Kita hanya perlu menentukan lebar dan ketinggian, seperti itu:

• Lihat Demo “Segi empat”

Circle

Kita juga boleh menarik bulatan dengan elemen. Dalam contoh berikut, kami akan membuat bulatan dengan 100 jejari yang ditakrifkan dengan r atribut:

Dua atribut pertama, cx dan cy adalah menentukan koordinat tengah bulatan. Dalam contoh di atas, kami telah menetapkan 102 kedua-duanya untuk x dan y menyelaras, jika atribut ini tidak ditentukan, 0 akan diambil sebagai nilai lalai.

• Lihat Demo “Circle”

Ellipse

Kita boleh melukis elips dengan . Ia berfungsi agak sama dengan bulatan, tetapi kali ini kita boleh mengawal secara khusus x jejari talian dan y jejari talian dengan rx dan ry atribut;

• Lihat Demo “Ellipse”

Poligon

Dengan elemen, kita boleh menarik pelbagai bentuk seperti segi tiga, segi enam dan juga segi empat tepat. Inilah contohnya:

• Lihat Demo “Poligon”

Menggunakan Editor Grafik Vektor

Seperti yang anda lihat, lukisan objek mudah dengan SVG dalam HTML agak mudah. Walau bagaimanapun, apabila objek menjadi lebih rumit, amalan itu tidak lagi ideal dan akan memberi anda sakit kepala.

Nasib baik, seperti yang telah kami nyatakan di atas, kami boleh menggunakan editor grafik vektor seperti Adobe Illustrator atau Inkscape untuk melakukan kerja. Jika anda sudah biasa dengan perisian ini, pastinya lebih mudah untuk menarik objek dengan GUI mereka daripada mengodkan grafik anda sendiri dalam tag HTML.

Jika anda bekerja dengan Inkscape, anda boleh menyimpan grafik vektor anda sebagai SVG kosong, dan kemudian membukanya dalam editor kod teks. Kini, anda perlu mencari kod SVG dalam fail. Salin semua kod dan tampalnya di dalam dokumen HTML anda.

Atau, anda juga boleh membenamkannya .svg fail melalui salah satu elemen ini; membenamkan, iframe dan objek, contohnya;

Keputusan akhirnya akan sama.

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

• Lihat Demo “iPod”

Sokongan Penyemak Imbas

Mengenai sokongan penyemak imbas, SVG telah disokong dengan baik di semua pelayar utama, kecuali dalam IE8 dan lebih awal. Tetapi perkara ini boleh diselesaikan dengan Perpustakaan JavaScript ini, yang dipanggil Raphael.js. Untuk membuat perkara lebih mudah, kami akan menggunakan alat ini, ReadySetRaphael.com untuk menukar kod SVG kami ke dalam format yang disokong oleh Raphael. Ini caranya.

Pertama sekali, muat turun dan sertakan Raphael.js perpustakaan ke dokumen HTML anda. Kemudian, muat naik .svg fail ke laman web ini, salin dan tampal kod yang dihasilkan di dalam beban berikut fungsi;

 window.onload = function () // the Raphael code goes here 

Di dalam badan tag, masukkan yang berikut div dengan rsr atribut id;

Itu sahaja, anda sudah selesai. Semak contoh dari pautan di bawah.

• Lihat Demo “Raphael”

Pemikiran Akhir

Jadi itulah asas-asas dengan SVG. Kami harap sekarang anda mempunyai kefahaman yang adil mengenai subjek ini. Ini adalah cara terbaik untuk mengoptimumkan tapak anda untuk sebarang resolusi skrin, walaupun untuk digunakan pada paparan Retina.

Seperti biasa, jika anda seorang yang mencabar, di sini kami telah meletakkan lebih banyak rujukan dan perbincangan untuk menggali lebih mendalam ke dalam subjek ini.

• Pengenalan kepada Sekolah SVG - W3
• Resolusi Bebas dengan SVG - Majalah Smashing
• Kenapa Anda Tidak Menggunakan SVG? - NetTuts

Terima kasih kerana membaca dan kami berharap anda menikmati jawatan ini.

• Lihat Demo
• Muat turun Sumber