HTML5 SVG 2D Pengenalan 1—SVG (Grafik Vektor Boleh Skala) Gambaran Keseluruhan_html5 Petua Tutorial

Peta Bit dan Grafik Vektor
Sebelum ini, grafik yang dipaparkan dalam penyemak imbas, seperti jpeg, gif, dll., semuanya adalah peta bit dan format imej ini berdasarkan raster. Dalam imej raster, fail imej mentakrifkan nilai warna setiap piksel dalam imej. Penyemak imbas perlu membaca nilai ini dan bertindak sewajarnya. Keupayaan pembiakan imej jenis ini agak kuat, tetapi ia akan kelihatan tidak mencukupi dalam beberapa situasi. Sebagai contoh, apabila penyemak imbas memaparkan imej pada saiz yang berbeza, tepi bergerigi sering terhasil, dan penyemak imbas perlu menginterpolasi atau meneka nilai untuk piksel yang tidak wujud dalam imej asal ini mengakibatkan herotan imej. Selain itu, peta bit menganimasikan, paling baik, terhad kepada menghasilkan animasi jenis "buku selak", di mana imej individu dipaparkan secara berturut-turut.

Grafik vektor mengatasi beberapa kesukaran ini dengan menyatakan arahan yang diperlukan untuk menentukan nilai setiap piksel, dan bukannya menentukan nilai itu sendiri. Sebagai contoh, bukannya memberikan nilai piksel untuk bulatan diameter satu inci, grafik vektor memberitahu penyemak imbas untuk mencipta bulatan diameter satu inci dan biarkan penyemak imbas (atau pemalam) melakukan yang lain. Ini menghilangkan banyak batasan grafik raster dengan grafik vektor, pelayar hanya tahu bahawa ia mesti melukis bulatan. Jika imej perlu dipaparkan pada tiga kali saiz biasa, penyemak imbas hanya melukis bulatan pada saiz yang betul tanpa perlu melakukan interpolasi biasa imej raster. Begitu juga, penyemak imbas menerima arahan yang boleh dikaitkan dengan lebih mudah kepada sumber maklumat luaran seperti aplikasi dan pangkalan data Untuk menghidupkan imej, penyemak imbas hanya menerima arahan tentang cara memanipulasi sifat seperti jejari atau warna.
Dalam sistem HTML, teknologi yang paling biasa digunakan untuk melukis grafik vektor ialah SVG dan elemen kanvas HTML5 yang baru ditambah. Kedua-dua teknologi menyokong lukisan vektor dan imej raster.

Gambaran Keseluruhan SVG
Grafik Vektor Boleh Skala (pendek kata SVG) ialah bahasa yang menggunakan XML untuk menerangkan grafik dua dimensi (SVG mengikut sintaks XML dengan ketat). SVG membenarkan tiga jenis objek grafik: bentuk grafik vektor (seperti laluan yang terdiri daripada garis lurus dan lengkung), imej dan teks. Objek grafik (termasuk teks) boleh dikumpulkan, digayakan, diubah dan digabungkan menjadi objek yang diberikan sebelum ini. Set ciri SVG termasuk transformasi bersarang, laluan keratan, topeng alfa dan objek templat.

Lukisan SVG adalah interaktif dan dinamik. Sebagai contoh, anda boleh menggunakan skrip untuk menentukan dan mencetuskan animasi. Ini sangat berkuasa berbanding Flash. Flash ialah fail binari, yang sukar dibuat dan diubah suai secara dinamik. SVG ialah fail teks, dan manipulasi dinamik agak mudah. Selain itu, SVG secara langsung menyediakan elemen yang relevan untuk melengkapkan animasi, yang sangat mudah untuk dikendalikan.

SVG serasi dengan piawaian web lain dan secara langsung menyokong Model Objek Dokumen DOM. Ini juga merupakan titik yang sangat berkuasa berbanding dengan kanvas dalam HTML5 (perhatikan di sini bahawa SVG juga menggunakan kanvas yang serupa secara dalaman untuk memaparkan grafik SVG. Kemudian anda akan mendapati bahawa banyak ciri agak serupa dengan kanvas HTML5; dalam artikel Jika ia tidak dinyatakan secara eksplisit bahawa ia adalah kanvas SVG, ia merujuk kepada elemen kanvas dalam HTML5). Oleh itu, banyak aplikasi lanjutan SVG boleh dilaksanakan dengan mudah menggunakan skrip. Selain itu, elemen grafik SVG pada asasnya menyokong acara standard dalam DOM. Sebilangan pengendali acara (seperti "onmouseover" dan "onclick") boleh diberikan kepada mana-mana objek grafik SVG. Walaupun kelajuan pemaparan SVG tidak sepantas elemen kanvas, kelebihannya ialah operasi DOM sangat fleksibel Kelebihan ini boleh menebus kelemahan dalam kelajuan.

SVG boleh dikatakan sebagai protokol dan bahasa; ia adalah elemen standard HTML dan format imej.
SVG bukanlah sesuatu dalam HTML5, tetapi ia dianggap sebagai salah satu teknologi web yang popular, jadi ia akan disertakan dalam topik ini buat masa ini.

Perbandingan SVG dan format imej lain
Berbanding dengan format imej lain, SVG mempunyai banyak kelebihan (banyak kelebihan datang daripada kelebihan grafik vektor):
• SVG The fail adalah XML tulen dan boleh dibaca dan diubah suai oleh banyak alat (seperti Notepad).
• SVG lebih kecil dan lebih mampat daripada imej JPEG dan GIF.
• SVG boleh berskala, boleh diperbesarkan tanpa kehilangan kualiti imej, dan boleh dicetak dengan kualiti tinggi pada sebarang resolusi.
• Teks dalam imej SVG adalah pilihan dan boleh dicari (bagus untuk membuat peta).
• SVG boleh berjalan dengan teknologi Java.
• SVG ialah standard terbuka.

Perbandingan SVG dan Flash
Pesaing utama SVG ialah Flash. Berbanding dengan Flash, kelebihan terbesar SVG ialah ia serasi dengan piawaian lain (seperti XSL dan DOM) dan mudah dikendalikan, manakala Flash ialah teknologi proprietari yang bukan sumber terbuka. Dalam aspek lain seperti format storan dan grafik yang dihasilkan secara dinamik, SVG juga mempunyai kelebihan yang besar.

Cara SVG dipersembahkan
Pelayar yang menyokong HTML5 dan SVG bukanlah tumpuan perbincangan di sini Pada asasnya, ia sudah cukup untuk memasang pelayar Chrome atau FireFox (IE pengguna sila Pasang sahaja IE9 Bagi versi sebelum IE9, anda perlu memasang pemalam SVG, yang akan dilangkau di sini). Untuk penyemak imbas yang menyokong SVG secara langsung, SVG menggunakan dua kaedah pembentangan pada kedua-dua belah pihak.

Sebaris ke dalam HTML
SVG ialah elemen HTML standard, yang boleh ditulis terus ke dalam HTML Lihat contoh berikut:

Salin kod

The. kod adalah seperti berikut:

🎜>
;/svg> Simpan fail teks seperti fail dengan sambungan svg, seperti sun.svg, fail tersebut boleh dibuka terus dengan penyemak imbas atau dibenamkan sebagai rujukan muka surat. 2.HTML merujuk fail SVG luaran.

Hanya gunakan elemen objek atau img untuk membenamkan grafik SVG, seperti contoh kecil berikut: