Artikel ini terutama memperkenalkan konsep dasar SVG, serta perbedaan antara SVG dan kanvas, dan akhirnya memberikan contoh sederhana untuk memfasilitasi semua orang untuk lebih memahami grafik vektor scalable SVG. Direkomendasikan untuk semua orang.
Baidu Encyclopedia:
SVG Scalable Vector Graphics adalah format grafis berdasarkan bahasa markup yang dapat diperluas (XML) yang menjelaskan grafik vektor dua dimensi. SVG adalah format grafis vektor dua dimensi baru yang diformulasikan oleh W3C dan juga merupakan standar grafis vektor jaringan dalam spesifikasi. SVG secara ketat mengikuti sintaks XML dan menggunakan bahasa deskriptif dalam format teks untuk menggambarkan konten gambar, sehingga ini adalah format grafik vektor yang tidak tergantung pada resolusi gambar.
Apa itu SVG?SVG mengacu pada grafik vektor yang dapat diskalakan (grafik vektor scalable)
SVG digunakan untuk mendefinisikan grafik berbasis vektor untuk jaringan
SVG mendefinisikan grafik dalam format XML
Gambar SVG tidak akan kehilangan kualitas grafik mereka ketika mereka diperbesar atau diubah dalam ukuran.
SVG adalah standar untuk World Wide Web Alliance
SVG adalah keseluruhan dengan standar W3C seperti DOM dan XSL
Perbedaan antara kanvas dan svg:SVG
SVG adalah bahasa yang menggunakan XML untuk menggambarkan grafik 2D.
SVG didasarkan pada XML, yang berarti bahwa setiap elemen dalam DOM SVG tersedia. Anda dapat melampirkan pawang acara JavaScript ke elemen.
Dalam SVG, setiap gambar yang ditarik diperlakukan sebagai objek. Jika properti dari objek SVG berubah, browser dapat secara otomatis mereproduksi grafik.
Fitur:
Tidak ada ketergantungan resolusi
Dukungan penangan acara
Terbaik untuk aplikasi dengan area rendering besar (seperti Google Maps)
Kompleksitas tinggi dapat memperlambat rendering (tidak ada aplikasi yang berlebihan DOM)
Tidak cocok untuk aplikasi game
Kanvas
Kanvas menggambar grafik 2D melalui JavaScript.
Kanvas diterjemahkan piksel oleh pixel.
Di kanvas, setelah grafik diambil, tidak terus mendapatkan perhatian browser. Jika posisinya berubah, seluruh adegan juga perlu dicat ulang, termasuk objek apa pun yang mungkin telah ditimpa oleh grafik.
Fitur:
Tergantung resolusi
Penangan acara tidak didukung
Kemampuan Render Teks Lemah
Kemampuan untuk menyimpan gambar hasil dalam format .png atau .jpg
Terbaik untuk game intensif gambar, banyak di antaranya sering dicat ulang
Contoh SVG:Salin kode