👣 💢 🚡 SVG atau kanvas? 👨‍🚀 ♍️ 🏬

SVG dan kanvas adalah teknologi yang dapat Anda gunakan untuk menggambar sesuatu di halaman web. Karena itu, mereka harus dibandingkan dan mencari tahu kapan harus menggunakan SVG, dan kapan harus menggunakan kanvas. Bahkan pemahaman yang sangat dangkal tentang esensi teknologi ini memungkinkan Anda untuk membuat pilihan yang sangat tepat. Faktanya, berikut adalah dua situasi khas, di mana Anda harus memilih SVG, dan yang lain - kanvas:

Perlu menggambar ikon kecil? Ini tentunya merupakan wilayah SVG.
Perlu membuat game browser interaktif? Di sini, tentunya, kita membutuhkan teknologi kanvas.

Penulis artikel, terjemahan yang kami terbitkan hari ini, mengatakan bahwa ia tahu bahwa ia belum mengungkapkan alasan untuk pilihan ini. Tapi dia berharap alasan ini akan menjadi sangat jelas setelah dia membagikan beberapa detail tentang SVG dan kanvas.

SVG - grafik vektor dijelaskan secara deklaratif

Jika Anda tahu bahwa Anda perlu menempatkan gambar vektor pada halaman web, itu artinya SVG tepat untuk Anda. Gambar vektor biasanya terlihat lebih baik daripada gambar raster serupa yang disimpan, misalnya, dalam file JPG. Selain itu, file gambar vektor biasanya lebih kecil dari file gambar raster.

Hasilnya adalah SVG sangat sering digunakan untuk menggambar logo . Kode yang menggambarkan gambar seperti itu dapat disematkan langsung ke HTML. Sepertinya seperangkat instruksi deklaratif:

<svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" /> </svg>

Jika Anda membutuhkan gambar agar fleksibel dan responsif, maka SVG adalah pilihan Anda.

Canvas - JavaScript API untuk menggambar

Untuk membuat gambar kanvas dalam kode HTML halaman, tempatkan elemen <canvas> , setelah itu, menggunakan JavaScript, mereka "menggambar" pada elemen ini. Dengan kata lain, programmer memberikan instruksi browser tentang bagaimana ia perlu menggambar sesuatu (pendekatan ini lebih dekat ke imperatif daripada ke deklaratif). Begini tampilannya:

 <canvas id="myCanvas" width="578" height="200"></canvas> <script>  var canvas = document.getElementById('myCanvas');  var context = canvas.getContext('2d');  var centerX = canvas.width / 2;  var centerY = canvas.height / 2;  var radius = 70;  context.beginPath();  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  context.fillStyle = 'green';  context.fill(); </script>

Gambar SVG disimpan di DOM

Jika Anda terbiasa dengan acara DOM, seperti click dan mouseDown , maka ketahuilah bahwa acara ini juga dapat digunakan saat bekerja dengan SVG. Dalam hal ini, elemen <circle> SVG tidak jauh berbeda dari elemen <div> HTML.

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg>

SVG lebih baik untuk membuat konten halaman dapat diakses

Elemen kanvas dapat diberi alternatif teksnya:

 <canvas aria-label="Hello ARIA World" role="img"></canvas>

Hal yang sama dapat dilakukan untuk elemen SVG. Tetapi, karena gambar-gambar SVG dan mekanisme internalnya disimpan langsung di DOM, SVG biasanya dianggap sebagai teknologi yang digunakan dalam kasus-kasus di mana mereka membuat proyek yang dapat diakses oleh para penyandang cacat.

Dengan kata lain, Anda dapat membuat gambar SVG, dengan unsur-unsur yang teknologi bantu dapat bekerja untuk membantu pengguna mereka menavigasi halaman web.

Data teks yang merupakan bagian dari gambar juga merupakan kasus ketika lebih disukai untuk menggunakan SVG. SVG bahkan memiliki elemen khusus - <text> . Ini memungkinkan Anda untuk menampilkan karakter teks yang jelas, itu dirasakan oleh teknologi bantu . Jika Anda menggunakan elemen kanvas untuk memvisualisasikan teks, teks seperti itu sering ditampilkan dengan buruk dan terlihat buram.

Kanvas lebih baik untuk bekerja dengan gambar piksel individual

Di bawah ini kami berikan beberapa tabel yang disusun berdasarkan perbandingan SVG dan kanvas oleh berbagai pakar. Dalam satu perbandingan seperti itu, dilakukan oleh Sarah Drasner, dikatakan bahwa menggunakan kanvas Anda dapat membuat piksel menari. Ini, tentu saja, adalah lelucon, tetapi, pada intinya, memang seperti itu.

Canvas sangat bagus untuk membuat gambar interaktif yang mengandung banyak detail rumit, transisi warna gradien dan banyak lagi. Untuk alasan ini, kanvas digunakan dalam pengembangan game browser dalam jumlah yang jauh lebih besar daripada SVG. Meskipun, tentu saja, Anda selalu dapat menemukan penyimpangan dari tren umum. Di sini , misalnya, adalah permainan yang grafiknya dibuat menggunakan alat SVG.

Game SVG

Harap dicatat bahwa komponen grafiknya sangat sederhana dan terlihat cukup "vektor".

Gambar CSS dapat dipengaruhi menggunakan CSS

Kami telah mengatakan bahwa elemen SVG disimpan di DOM, dan akses ke elemen-elemen ini dapat diperoleh dari kode JavaScript. Dalam kasus CSS, cerita ini berulang:

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; }  </style> </svg>

Harap perhatikan bahwa dalam contoh, blok <script> dan <style> ditempatkan di dalam blok <svg> . Ini sangat normal. Tetapi dengan mempertimbangkan fakta bahwa elemen SVG dalam kode HTML biasa, ternyata blok <script> internal dan <style> dapat sepenuhnya dihapus darinya. Selain itu, jika perlu, Anda bisa mengerjakan elemen SVG menggunakan gaya dan skrip eksternal.

Berikut ini banyak bahan tentang sifat-sifat elemen SVG dan CSS. Yang paling penting di sini adalah bahwa semua yang dapat dilakukan dengan elemen halaman menggunakan CSS berlaku untuk SVG. Sebagai contoh, ini menggunakan elemen :hover pseudo- :hover dan animating.

Berikut adalah contoh menganimasikan elemen <circle> dengan CSS.

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; animation: pulse 2s alternate infinite; }    @keyframes pulse {      100% {        r: 30;      }    }  </style>   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg>

Animasi elemen CSS menggunakan CSS

Kombinasi SVG dan kanvas

Dari sudut pandang teknis, teknologi kanvas dan SVG tidak dapat disebut saling eksklusif. Misalnya, gambar SVG dapat ditampilkan dalam elemen <canvas> . Pada saat yang sama, seperti yang dapat dilihat dalam contoh ini , gambar SVG yang ditampilkan dalam elemen <canvas> dapat tetap sangat jelas dan berkualitas tinggi.

Keluarkan gambar SVG ke elemen <canvas>

Sekarang mari kita lihat beberapa tabel yang merangkum perbandingan antara SVG dan kanvas yang dibuat oleh berbagai pakar.

Membandingkan SVG dan kanvas

UthRuth John

Berikut adalah proyek yang menjadi dasar dibangunnya tabel berikut ini.

Peluang	Svg	Kanvas
Gambar vektor	+	-
Grafik raster	-	+
Akses ke DOM	+	-
Ketersediaan	+	±
Output teks	+	+
Kesimpulan gradien dan pola	+	+
Dukungan animasi CSS	+	-
Dukungan filter CSS	+	+
Dukungan filter SVG	+	+
Dukungan untuk menghasilkan file gambar dan file video	-	+
Ekspor konten barang	-	+
Manajemen piksel tunggal	-	+
Akses JavaScript	-	+
Kinerja Animasi	±	+
Dukungan untuk perhitungan dilakukan di luar utas utama	-	+

▍ Sarah Drasner

Tabel berikut didasarkan pada tweet ini .

	DOM / Virtual DOM	Kanvas
Manfaatnya	Bagus untuk animasi UI / UX.	Menari, piksel!
	Bagus untuk menghasilkan resolusi gambar SVG resolusi independen.	Bagus untuk output grafis 3D dan kasus penggunaan serupa lainnya.
	Mudah di-debug.	Mudah mengelola banyak objek bergerak.
Kekurangan	Gambar dibuat dari banyak objek terpisah.	Lebih sulit membuat konten dapat diakses.
	Mengingat minus sebelumnya, ternyata kehati-hatian diperlukan saat menjiwai gambar SVG.	Dalam bentuk standar, gambar kanvas bergantung pada resolusi.
		Sulit untuk mengatur interaksi pengguna dengan elemen individual dari gambar.

HirShirley Wu

Tabel berikut didasarkan pada tweet ini .

	Svg	Kanvas
Manfaatnya	Lebih mudah dipelajari.	Performa sangat tinggi.
	Lebih mudah mengatur respons terhadap paparan pengguna.	Lebih mudah diperbarui.
	Lebih mudah bernyawa.
Kekurangan	Anda mungkin perlu menggunakan struktur DOM yang kompleks.	Lebih sulit dipelajari.
	Produktivitas rendah ketika bekerja dengan sejumlah besar elemen.	Lebih sulit untuk menangani eksposur pengguna.
		Untuk menghidupkan objek, Anda perlu menulis kode Anda sendiri.

Banyak orang berpikir bahwa kanvas lebih baik untuk bekerja dengan sejumlah besar objek (menurut Shirley - ketika ada lebih dari 1000).

SVG adalah pilihan standar. Kanvas adalah mundur

Inilah jawaban untuk tweet saya tentang opsi untuk menggunakan SVG dan kanvas. Penulis jawaban ini mengatakan bahwa pilihan antara SVG dan kanvas harus dilakukan seperti ini: "Gunakan kanvas ketika Anda tidak dapat menggunakan SVG." Di antara situasi di mana tidak mungkin untuk menggunakan SVG secara normal, kita dapat menyebutkan situasi di mana Anda perlu menghidupkan ribuan objek, bekerja dengan masing-masing piksel tertentu dalam gambar, dan sebagainya.

Ringkasan

Di awal artikel ini, kami menyajikan dua penggunaan khas SVG dan kanvas. Kami akan kembali kepada mereka dan memperluas deskripsi mereka dengan mempertimbangkan apa yang baru saja kami pelajari.

Perlu menggambar ikon kecil? Ini tentunya merupakan wilayah SVG. Faktanya adalah bahwa deskripsi gambar SVG disimpan di DOM, karena SVG bagus untuk menggambar sesuatu seperti ikon pada tombol. Tak perlu dikatakan, gambar SVG dapat dipengaruhi oleh CSS, dan menggunakan JavaScript, Anda dapat menghubungkan event handler ke elemen mereka.
Perlu membuat game browser interaktif? Di sini, tentunya, kita membutuhkan teknologi kanvas. Permainan browser, pastinya, akan berisi banyak elemen bergerak dan animasi yang kompleks. Elemen-elemen dunia game akan berinteraksi satu sama lain, yang berarti persyaratan kinerja tertentu. Kanvas sangat bagus untuk memecahkan masalah seperti itu.

Perlu dicatat bahwa di antara dua opsi ekstrem ini terdapat zona menengah yang besar. Sebagai contoh, sebagai pengembang dan perancang web, saya percaya bahwa SVG lebih nyaman dari sudut pandang praktis. Saya bahkan tidak tahu apakah saya akan melakukan proyek nyata menggunakan kanvas. Mungkin ini sebagian karena saya tidak cukup akrab dengan kanvas. Dan saya cukup akrab dengan SVG. Saya mempelajari teknologi ini, menulis buku tentang itu. Akibatnya, saya cukup tahu tentang SVG sehingga teknologi ini dapat membantu saya melakukan apa yang saya butuhkan.

Pembaca yang budiman! Dalam situasi apa Anda menggunakan SVG dan di kanvas mana?

SVG atau kanvas?