Pengantar HTML5 SVG 2D 1 - SVG (Grafik Vektor yang Dapat Diukur)

Di masa lalu, grafik yang ditampilkan di browser, seperti JPEG, GIF, dll., Adalah bitmap, dan format gambar ini didasarkan pada raster. Pada gambar raster, file gambar mendefinisikan nilai warna masing -masing piksel pada gambar. Browser perlu membaca nilai -nilai ini dan mengambil tindakan yang sesuai. Kemampuan reproduksi gambar semacam ini relatif kuat, tetapi akan tampak tidak mencukupi dalam beberapa kasus. Misalnya, ketika browser menampilkan gambar pada ukuran yang berbeda, tepi bergerigi biasanya dihasilkan, dan browser harus memasukkan atau menebak nilai untuk piksel yang tidak ada dalam gambar asli; Ini akan menyebabkan distorsi gambar. Selain itu, animasi untuk bitmap terbatas untuk menghasilkan animasi tipe buku terbalik, yaitu, menampilkan gambar individual dengan cara yang cepat dan berkelanjutan.

Diagram vektor mengatasi beberapa kesulitan ini dengan menentukan instruksi yang diperlukan untuk menentukan nilai masing -masing piksel daripada menentukan nilai itu sendiri. Misalnya, alih -alih memberikan nilai piksel untuk lingkaran dengan diameter inci, grafik vektor memberi tahu browser untuk membuat lingkaran dengan diameter inci dan kemudian membiarkan browser (atau plugin) melakukan sisanya. Ini menghilangkan banyak keterbatasan grafik raster; Dengan grafik vektor, browser hanya tahu bahwa ia harus menggambar lingkaran. Jika gambar perlu ditampilkan tiga kali ukuran normal, browser hanya menggambar lingkaran pada ukuran yang benar tanpa melakukan metode penyisipan gambar raster yang biasa. Demikian pula, instruksi yang diterima oleh browser dapat lebih mudah terikat pada sumber informasi eksternal (seperti aplikasi dan basis data), dan untuk menghidupkan gambar, browser hanya perlu menerima instruksi tentang cara memanipulasi properti (seperti jari -jari atau warna).

Dalam sistem HTML, teknologi yang paling umum digunakan untuk menggambar grafik vektor adalah elemen kanvas yang baru ditambahkan dalam SVG dan HTML5. Kedua teknologi mendukung vektor gambar dan diagram raster.

Grafik vektor yang dapat diskalakan (grafik vektor scalable, SVG singkatnya) adalah bahasa yang menggunakan XML untuk menggambarkan grafik dua dimensi (SVG secara ketat mengikuti sintaks XML). SVG memungkinkan tiga jenis objek grafis: bentuk grafik vektor (seperti jalur yang terdiri dari garis dan kurva lurus), gambar, dan teks. Objek grafis (termasuk teks) dapat dikelompokkan, ditata, dikonversi, dan digabungkan menjadi objek yang sebelumnya diberikan. Set fitur SVG mencakup transformasi bersarang, jalur kliping, topeng alpha, dan objek templat.

Gambar SVG bersifat interaktif dan dinamis. Misalnya, skrip dapat digunakan untuk mendefinisikan dan memicu animasi. Ini sangat kuat dibandingkan dengan flash. Flash adalah file biner, dan sulit untuk membuat dan memodifikasi secara dinamis. Sementara SVG adalah file teks, operasi dinamis cukup mudah. Selain itu, SVG secara langsung menyediakan elemen yang relevan untuk menyelesaikan animasi, yang sangat nyaman untuk beroperasi.

SVG kompatibel dengan standar web lainnya dan secara langsung mendukung DOK DOKOK DOKOK DOMBOD. Ini juga merupakan poin yang sangat kuat dibandingkan dengan kanvas di HTML5 (perhatikan di sini bahwa SVG juga menggunakan sesuatu yang mirip dengan kanvas untuk menampilkan grafik SVG. Nanti Anda akan menemukan bahwa banyak fitur yang sedikit mirip dengan kanvas di HTML5; jika artikel tidak dengan jelas menyatakan bahwa itu adalah kanvas SVG, semuanya merujuk pada Canvas di ht. Oleh karena itu, banyak aplikasi SVG canggih dapat dengan mudah diimplementasikan menggunakan skrip. Selain itu, elemen grafis SVG pada dasarnya mendukung peristiwa standar di DOM. Sejumlah besar penangan acara seperti Onmouseover dan OnClick dapat ditugaskan ke objek grafis SVG apa pun. Meskipun kecepatan rendering SVG tidak sebagus elemen kanvas, itu lebih baik karena operasi DOM sangat fleksibel, dan keuntungan ini dapat sepenuhnya menebus kerugian kecepatan.

SVG dapat dikatakan sebagai protokol dan bahasa; Ini adalah elemen standar HTML dan format gambar.

SVG bukanlah sesuatu di HTML5, tetapi juga salah satu teknologi populer untuk halaman tersebut. Ayo masukkan ke dalam topik ini.

Dibandingkan dengan format gambar lainnya, SVG memiliki banyak keunggulan (banyak keunggulan berasal dari keunggulan grafik vektor):

• File SVG adalah XML murni dan dapat dibaca dan dimodifikasi oleh banyak alat (seperti Notepad).

• SVG berukuran lebih kecil dan lebih kompresibel dibandingkan dengan gambar JPEG dan GIF.

• SVG dapat diskalakan, dapat diperbesar tanpa menurunkan kualitas gambar dan dapat dicetak dengan kualitas tinggi pada resolusi apa pun.

• Teks dalam gambar SVG adalah opsional dan dapat dicari (sangat cocok untuk membuat peta).

• SVG dapat berjalan dengan teknologi java.

• SVG adalah standar terbuka.

Pesaing utama SVG adalah Flash. Dibandingkan dengan Flash, keuntungan terbesar SVG adalah kompatibel dengan standar lain (seperti XSL dan DOM) dan mudah dioperasikan, sementara Flash adalah teknologi swasta sumber yang tidak terbuka. SVG juga memiliki keuntungan besar dalam aspek lain seperti format penyimpanan, pembuatan grafik dinamis, dll.

Mengenai browser yang mendukung HTML5 dan SVG, itu bukan fokus diskusi di sini. Pada dasarnya, ini hampir dilakukan dengan browser Chrome atau Firefox terbaru (Pengguna IE diharuskan menginstal IE9. Adapun versi sebelum IE9, jika Anda perlu menginstal plug-in SVG, saya akan melewatkannya di sini). Untuk browser yang secara langsung mendukung SVG, SVG terutama mengadopsi metode render dua sisi dan dua sisi.

SVG adalah elemen HTML standar, cukup tuliskan langsung ke HTML, lihat contoh berikut:

<? Xml Version = "1.0" encoding = "UTF-8"?>

<! Doctype html>

<Html>

<head>

<!-<meta content = "text /html; charset = utf-8" http-equiv = "konten-tipe" /->

<iteme> halaman SVG pertama saya </iteme>

</head>

<body>

<svg xmlns = "http://www.w3.org/2000/svg" versi = "1.1"

width = "200px">

<rect x = "0" y = "0"

isi = "tidak ada" stroke = "hitam"/>

<lingkaran cx = "100" cy = "100" r = "50"

style = "Stroke: Black; isi: merah;"/>

</svg>

</body>

</html>

Harap dicatat bahwa bagian awal dari Deklarasi XML, yang terkait dengan SVG Namespace XMLNs, versi versi dan bagian lain, terutama mempertimbangkan masalah kompatibilitas; Bagian -bagian ini pada dasarnya tidak diperlukan dalam HTML5 (lebih baik melakukannya sendiri apakah akan menulisnya atau tidak).

SVG independen mengacu pada menyediakan format file grafik vektor dengan menggunakan ekstensi file SVG. Sematkan file SVG ini di browser dan Anda dapat menggunakannya.

1. File/halaman SVG independen, templat yang ditentukan pada dasarnya sama dengan yang berikut:

<svg>

<!- ​​Markup SVG di sini. ->

</svg>

Simpan file teks tersebut ke dalam file dengan SVG sebagai ekstensi, seperti Sun.svg. File -file tersebut dapat dibuka dan diramban langsung di browser atau tertanam di halaman lain sebagai referensi.

2. HTML Referensi File SVG Eksternal.

Cukup gunakan objek atau elemen IMG untuk menanamkan grafik SVG, misalnya, contoh kecil berikut:

<! Doctype html>

<Html>

<head>

<iteme> halaman SVG pertama saya </iteme>

</head>

<body>

<Data objek = "sun.svg" type = "gambar/svg+xml"

width = "300px">

<!-Menerapkan kode fallback di sini, atau menampilkan pesan:->

<p> Browser Anda tidak mendukung SVG - silakan tingkatkan ke browser modern. </p>

</boject>

<img src = "sun.svg" />

</body>

</html>

Faktanya, SVG juga dapat ditempatkan di dokumen XML lainnya, atau dapat diformat dan diverifikasi menggunakan teknologi terkait XML seperti dokumen XML lainnya. Ini bukan intinya, jadi dihilangkan di sini.

SVG diterjemahkan secara ketat dalam urutan elemen yang menentukan, yang berbeda dari HTML yang mengontrol hierarki dengan nilai-nilai indeks z. Di SVG, elemen -elemen yang ditulis di depan diterjemahkan terlebih dahulu, dan elemen -elemen yang ditulis di belakang diterjemahkan nanti. Elemen -elemen yang diberikan kemudian akan menimpa elemen -elemen sebelumnya. Meskipun kadang -kadang dipengaruhi oleh transparansi dan tampaknya tidak ditimpa, SVG memang diterjemahkan secara ketat dalam urutan urutan.

Catatan: SVG didefinisikan dalam XML, jadi ini sensitif, yang berbeda dari HTML.

Dokumen Resmi: http://www.w3.org/tr/svg11/

Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Pusat Pengembangan: https://developer.mozilla.org/en/svg

Referensi Populer: http://www.chinasvg.com/