Panduan belajar html5 svg - kemahiran tutorial SVG basics_html5

Ensiklopedia Baidu:

Grafik Vektor Boleh Skala SVG ialah format grafik berdasarkan Bahasa Penanda Boleh Diperluas (XML) untuk menerangkan grafik vektor dua dimensi. SVG ialah format grafik vektor dua dimensi baharu yang dibangunkan oleh W3C dan juga piawai grafik vektor rangkaian dalam spesifikasi. SVG mengikut sintaks XML dengan ketat dan menggunakan bahasa deskriptif dalam format teks untuk menerangkan kandungan imej Oleh itu, ia adalah format grafik vektor yang bebas daripada peleraian imej.

Apakah itu SVG?

SVG bermaksud Grafik Vektor Boleh Skala
SVG digunakan untuk mentakrifkan grafik berasaskan vektor untuk web
SVG menggunakan format XML untuk mentakrifkan grafik
Imej SVG dibesarkan atau diubah saiz Kualiti grafik tidak akan hilang
SVG ialah piawaian World Wide Web Consortium
SVG ialah sebahagian daripada piawaian W3C seperti DOM dan XSL

Perbezaan antara

Kanvas dan SVG:
　SVG
　SVG ialah bahasa yang menggunakan XML untuk menerangkan grafik 2D.
SVG adalah berdasarkan XML, yang bermaksud setiap elemen dalam SVG DOM tersedia. Anda boleh melampirkan pengendali acara JavaScript pada elemen.
　Dalam SVG, setiap bentuk yang dilukis dianggap sebagai objek. Jika sifat objek SVG berubah, penyemak imbas boleh mengeluarkan semula grafik secara automatik.
Ciri:
Tidak bergantung pada peleraian
Menyokong pengendali acara
Paling sesuai untuk aplikasi dengan kawasan pemaparan yang besar (seperti Peta Google)
Kerumitan yang tinggi akan melambatkan pemaparan (sebarang Aplikasi yang terlalu menggunakan DOM tidak pantas)
　Tidak sesuai untuk aplikasi permainan
Kanvas
Kanvas melukis grafik 2D melalui JavaScript.
Kanvas dipaparkan piksel demi piksel.
Dalam kanvas, sebaik sahaja grafik dilukis, ia tidak lagi akan mendapat perhatian pelayar. Jika kedudukannya berubah, keseluruhan pemandangan perlu dilukis semula, termasuk sebarang objek yang mungkin telah diliputi oleh grafik.
Ciri:
Bergantung pada resolusi
Tiada sokongan untuk pengendali acara
Keupayaan pemaparan teks yang lemah
Keupayaan untuk menyimpan imej hasil dalam format .png atau .jpg
Terbaik untuk permainan aplikasi intensif imej di mana banyak objek kerap dilukis semula

contoh svg:

Salin kod

Kod adalah seperti berikut: