Html5 svg dapat skala grafik vektor

SVG Can Zoad Vector Graphics (Scalable Vector Graphics) adalah format grafis yang didasarkan pada Scalable Tag Language (XML) untuk menggambarkan grafik vektor dua -dimensi. SVG adalah format grafik vektor dua -dimensi baru yang diformulasikan oleh W3C, dan juga merupakan standar grafik vektor jaringan dalam spesifikasi. SVG secara ketat mengikuti sintaks XML dan menjelaskan konten gambar dalam bahasa deskriptif dari format teks.

SVG mengacu pada grafik vektor yang dapat diskalakan

SVG digunakan untuk mendefinisikan grafik berbasis vektor untuk jaringan

SVG menggunakan format XML untuk mendefinisikan grafik

Gambar SVG tidak akan kehilangan kualitas grafik saat memperbesar atau mengubah ukurannya

SVG adalah standar Aliansi Jaringan Wanwei

Standar SVG dan W3C seperti DOM dan XSL adalah keseluruhan

SVG adalah bahasa yang menggambarkan grafik 2D dalam XML.

SVG didasarkan pada XML, yang berarti bahwa setiap elemen dalam SVG DOM tersedia. Anda dapat menambahkan prosesor acara JavaScript ke elemen tertentu.

Dalam SVG, setiap grafik yang ditarik dianggap sebagai objek. Jika atribut objek SVG berubah, browser dapat secara otomatis mereproduksi grafik.

Fitur:

Resolusi yang tidak bergantung

Dukungan Prosesor Acara

Aplikasi yang paling cocok dengan area rendering besar (seperti Google Map)

Kompleksitas tinggi akan memperlambat rendering (aplikasi DOM yang berlebihan tidak cepat))

Tidak cocok untuk aplikasi game

Kanvas menggambar grafik 2D melalui JavaScript.

Kanvas diterjemahkan oleh piksel.

Di kanvas, setelah grafik ditarik, itu tidak akan terus mendapatkan perhatian browser. Jika lokasi berubah, seluruh adegan juga perlu di -ulang, termasuk objek apa pun yang mungkin telah dibahas oleh grafik.

Fitur:

Dependensi

Jangan mendukung prosesor acara

Kemampuan Render Teks Lemah

Dapat menyimpan gambar hasil dalam format .png atau .jpg

Game Game yang paling cocok, banyak dari mereka akan sering dicat

Contoh sederhana:

 <SVG Lebar = 100% Tinggi = 100%> <lingkaran CX = 300 cy = 60 R = 50 stroke =#ff0-stroke-lebar = 3 fill = merah /> </svg>

Di masa lalu, grafik yang ditampilkan di browser, seperti JPEG, GIF, dll., Semua grafik. Pada gambar kisi, file gambar mendefinisikan nilai warna setiap piksel pada gambar. Browser perlu membaca nilai -nilai ini dan membuat tindakan yang sesuai. Gambar ini memiliki kemampuan reproduksi yang kuat, tetapi akan tampak tidak mencukupi dalam beberapa kasus. Misalnya, ketika browser ditampilkan dalam ukuran yang berbeda, tepi Jaggedness biasanya dihasilkan. Selain itu, animasi untuk bitmap terbatas pada animasi yang menghasilkan jenis buku bergulir, yaitu, dengan cepat dan terus menerus menampilkan gambar yang terpisah.

Diagram vektor ditentukan untuk menentukan instruksi yang diperlukan untuk setiap nilai piksel alih -alih nilai yang ditentukan itu sendiri, yang mengatasi bagian dari kesulitan -kesulitan ini. Misalnya, grafik vektor tidak lagi memberikan nilai piksel untuk diameter satu inci, tetapi beri tahu browser untuk membuat diameter satu inci lingkaran, dan kemudian biarkan browser (atau plug -in) lakukan sisanya. Ini menghilangkan banyak pembatasan pada grafik kisi; Jika gambar perlu ditampilkan tiga kali ukuran normal, maka browser digunakan untuk menggambar lingkaran sesuai dengan ukuran yang benar tanpa harus melakukan metode penyisipan umum dari gambar kisi. Demikian pula, instruksi yang diterima oleh browser dapat lebih mudah untuk mengikat sumber informasi eksternal (seperti aplikasi dan database)

Dalam sistem HTML, teknologi vektoring yang paling umum digunakan adalah SVG dan HTML5 elemen kanvas yang baru ditambahkan. Kedua teknologi mendukung menggambar peta vektor dan kisi.

Grafik vektor penskalaan (SVG (SVG) adalah bahasa yang menggambarkan grafik dua -dimensi (SVG secara ketat mengikuti sintaks XML). SVG memungkinkan tiga jenis objek grafis: grafik vektor (seperti jalur yang terdiri dari linier dan kurva), gambar dan teks. Objek grafis (termasuk teks) dapat dikemas, bergaya, diubah, dan digabungkan menjadi objek yang disajikan sebelumnya. Set fungsi SVG termasuk konversi bersarang, jalur geser, masker alpha dan objek templat.

Gambar SVG interaktif dan dinamis. Misalnya, Anda dapat menggunakan skrip untuk mendefinisikan dan memicu animasi. Ini sangat kuat dibandingkan dengan flash. Flash adalah file biner, yang lebih sulit untuk dibuat dan memodifikasinya. SVG adalah file teks, dan operasi dinamis cukup mudah. Selain itu, SVG secara langsung menyediakan elemen terkait untuk menyelesaikan animasi, yang sangat nyaman untuk beroperasi.

SVG kompatibel dengan standar Web lainnya dan secara langsung mendukung DOM Object Model DOM. Ini juga sangat kuat dibandingkan dengan kanvas di HTML5 (perhatikan di sini, SVG juga menggunakan kanvas serupa untuk menunjukkan grafik SVG. Anda akan menemukan bahwa banyak fitur yang sedikit mirip dengan kanvas HTML5; dalam artikel jika ada Tidak dengan jelas menyatakan bahwa itu adalah kanvas SVG, itu mengacu pada elemen kanvas di HTML5). Oleh karena itu, dapat lebih mudah menggunakan skrip untuk mencapai banyak aplikasi SVG canggih. Dan elemen grafis SVG pada dasarnya mendukung acara standar di DOM. Sejumlah besar acara pemrosesan program (seperti Onmouseover dan OnClick) dapat dialokasikan untuk objek grafik SVG apa pun. Meskipun kecepatan rendering SVG tidak sebagus elemen kanvas, sangat fleksibel dalam operasi DOM.

SVG dapat dikatakan sebagai protokol atau bahasa;

SVG bukanlah sesuatu di HTML5, tetapi juga salah satu teknik teknis pada halaman, dan mari kita taruh pada topik ini.

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

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

• Dibandingkan dengan gambar JPEG dan GIF, SVG lebih kecil dan lebih terkompresi.

• SVG dapat diskalakan dan dapat diperbesar ketika kualitas gambar berkurang.

• Teks dalam gambar SVG adalah opsional, dan juga tersedia (cocok untuk membuat peta).

• SVG dapat berjalan dengan teknologi java.

• SVG adalah standar keterbukaan.

Pesaing utama SVG adalah Flash. Dibandingkan dengan Flash, keuntungan terbesar dari SVG adalah kompatibel dengan standar lain (seperti XSL dan DOM) dan nyaman untuk beroperasi, sementara Flash adalah teknologi pribadi yang tidak populer. Lainnya, seperti format penyimpanan dan grafik dinamis, SVG juga menempati keuntungan besar.

Browser yang mendukung HTML5 dan SVG bukanlah fokus diskusi di sini. Untuk browser yang secara langsung mendukung SVG, SVG terutama menggunakan dua sisi dan dua cara.

Batin bersatu untuk html

SVG adalah elemen HTML standar, cukup tuliskan langsung ke HTML.

 <? XML Versi = 1.0 Encoding = UTF-8?> <! Doctype html> <html> <head> <!-<meta content = text /html; -> <Title> Halaman SVG pertama saya </iteme> </head> <body> <svg xmlns = http://www.w3.org/2000/svg versi = 1.1 width = 200px tinggi = 200px> <st> x = 0 y = 0 lebar = 100% tinggi = 100% isi = tidak ada stroke = hitam/> <lingkaran cx = 100 cy = 100 r = 50 gaya: black; > </body> </html>

Harap dicatat bahwa awal dari pernyataan XML di awal, dan ruang nama SVG, XMLN, versi versi, dll., Terutama mempertimbangkan masalah kompatibilitas;

File SVG Independen

SVG independen mengacu pada menyediakan format file grafik vektor dengan memperluas ekstensi file SVG. File SVG ini tertanam di browser.

1. File/halaman SVG independen, template yang ditentukan pada dasarnya seperti berikut:

 <Lebar SVG = Tinggi 100% = 100%> <!-Markup SVG di sini .-> </svg>

Simpan file teks tersebut ke dalam file dengan SVG sebagai ekstensi, seperti Sun.SVG.

2.html Referensi file SVG eksternal.

Gunakan elemen objek atau IMG untuk menyematkan grafik SVG, misalnya, contoh berikut:

 <! Implementasikan Kode Fallback Di Sini, atau Tampilkan Pesan:-> <p> Browser Anda tidak mendukung upgrade ke browser modern. = 10 Lebar = 30 Tinggi = 30 Stroke = Isi Hitam = Transparan-Stroke-Bridth = 5/> <Rad = 10 Rx = 10 Lebar = 30 Tinggi = 30 TROKE = Black Fill = Transparan Stroke-Width = 5/> <Circle CX = 25 cy = 75 r = 20 stroke = fill merah = transparan-stroke-lebar = 5/> <ellipse cx = 75 rx = 20 ry = 5 s troke = red fill = transparan stroke-lebar = 5/> <baris x1 = 10 x2 = 50 y1 = 110 y2 = 150 stroke = oranye fill = transparan-stroke-lebar = 5/> <titik polyline = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 Stroke = oranye isian = oranye isian = oranye = Transparan-Stroke-Bridth = 5/> <Point Polygon = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 Stroke = Green Fill = Transparan Stroke-Width = 5/> <Path D = M20, 230 Q40, 205 50, 230 T90, 230 Fill = None Stroke = Blue Stroke-Width = 5/SVG>

Contoh ini menarik banyak bentuk: persegi panjang normal, persegi panjang dengan sudut bulat, bundar, oval, lurus, lipat, poligon, dan jalur. Ini adalah elemen grafik dasar. Meskipun ada banyak cara untuk menggambar grafik, seperti persegi panjang dapat diimplementasikan dengan Rect, atau dapat diimplementasikan dengan jalur, tetapi kita masih harus mencoba menjaga konten SVG pendek dan pintar, mudah dibaca.