HTML SVG
HTML5 menyokong SVG sebaris.
Apakah itu SVG?
SVG merujuk kepada Grafik Vektor Boleh Skala (Grafik Vektor Boleh Skala)
SVG digunakan untuk mentakrifkan berdasarkan grafik Vektor
SVG menggunakan format XML untuk mentakrifkan grafik
Imej SVG tidak akan kehilangan kualiti grafiknya apabila dibesarkan atau diubah saiznya
SVG ialah piawaian World Wide Web Consortium
Kelebihan SVG
Berbanding dengan format imej lain (seperti JPEG dan GIF), kelebihan menggunakan SVG ialah:
- Imej SVG boleh dibuat dan diubah suai dengan editor teks
- Imej SVG boleh dicari, diindeks, skrip atau dimampatkan
- SVG boleh berskala
- Imej SVG boleh dicetak dengan kualiti tinggi pada sebarang resolusi
- SVG boleh dibesarkan tanpa kehilangan kualiti imej
Pelayar sokongan
Internet Inline SVG disokong dalam Explorer 9+, Firefox, Opera , Chrome dan Safari.
Benamkan SVG terus ke halaman HTML Dalam HTML5, anda boleh membenamkan elemen SVG terus ke dalam halaman HTML: Keputusan menjalankan program: Untuk belajar lebih lanjut tentang tutorial SVG, sila lawati Tutorial SVG. Perbezaan antara SVG dan Kanvas SVG ialah bahasa yang menggunakan XML untuk menerangkan grafik 2D. Kanvas menggunakan JavaScript untuk melukis 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 menghasilkan semula grafik secara automatik. Kanvas dipaparkan piksel demi piksel. Dalam kanvas, sebaik sahaja grafik dilukis, ia tidak lagi mendapat perhatian pelayar. Jika kedudukannya berubah, keseluruhan pemandangan perlu dilukis semula, termasuk sebarang objek yang mungkin telah diliputi oleh grafik. Perbandingan Kanvas dan SVG Jadual berikut menyenaraikan beberapa perbezaan antara kanvas dan SVG . 依賴分辨率 不依賴分辨率 不支持事件處理器 支持事件處理器 弱的文本渲染能力 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖） Keupayaan untuk menyimpan imej yang dihasilkan dalam format .png atau .jpg 能夠以 .png 或 .jpg 格式保存結(jié)果圖像 復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快） 最適合圖像密集型的游戲， 其中的許多對(duì)象會(huì)被頻繁 重繪 不適合游戲應(yīng)用 Sesuai untuk permainan intensif grafik, di mana banyak objek akan disemak dengan kerap Tidak sesuai untuk aplikasi permainan<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
Canvas SVG < p> Kerumitan yang tinggi akan memperlahankan pemaparan (sebarang aplikasi yang menggunakan DOM secara berlebihan tidak pantas)
