masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

SVG sebaris HTML5

Grafik Vektor Boleh Skala SVG ialah format grafik berdasarkan Extensible Markup Language (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 mentakrif grafik berasaskan vektor untuk web
SVG menggunakan format XML untuk mentakrif grafik
Imej SVG tidak kehilangan kualiti grafik apabila dibesarkan atau diubah saiz
SVG ialah piawaian World Wide Web Consortium
SVG disepadukan dengan piawaian W3C seperti DOM dan XSL


SVG Kelebihan

Berbanding dengan format imej lain (seperti JPEG dan GIF), kelebihan menggunakan SVG ialah:

Imej SVG boleh dibuat melalui editor teks Cipta dan ubah suai

Imej SVG boleh dicari, diindeks, diskrip atau dimampatkan

SVG boleh skala

Imej SVG boleh dihasilkan pada sebarang resolusi dengan percetakan Ground berkualiti tinggi

SVG boleh dibesarkan tanpa kehilangan kualiti imej

Pada asasnya semua pelayar menyokong SVG, sudah tentu IE adalah dari 9 dan ke atas.

Contoh: 

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>SVG</title>
 </head>
 <body>
    <svg width="100%" height="100%"  >
        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="black" />
    </svg>
 </body>
</html>


 Perbezaan antara Kanvas dan SVG:
SVG
SVG ialah kaedah yang menggunakan bahasa XML A 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 akan menerima perhatian penyemak imbas lagi. 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
Paling sesuai untuk aplikasi intensif imej Permainan di mana banyak objek sering dilukis semula


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG</title> </head> <body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492410 permainan