Apa perbedaan antara SVG dan HTML5 Canvas?

92

Apa perbedaan antara SVG dan HTML5 Canvas? Mereka berdua sepertinya melakukan hal yang sama padaku. Pada dasarnya, mereka berdua menggambar karya seni vektor menggunakan titik koordinat.

Apa yang saya lewatkan? Apa perbedaan utama antara SVG dan HTML5 Canvas? Mengapa saya harus memilih salah satu dari yang lain?

html  canvas  svg 
— zeckdude
sumber
4
Wikipedia memiliki artikel bermanfaat tentang ini: Canvas versus Scalable Vector Graphics (SVG)
— Rudu
Kanvas, seperti yang saya pahami, tidak menyediakan grafik vektor. Ini semua tentang bitmap.
— Bobby Jack
kemungkinan duplikat dari HTML5 Canvas vs SVG / VML?
— Phrogz
Kanvas adalah grafik raster dan svg adalah grafik vektor yang dapat diskalakan. Penjelasan terbaik dengan link yang SitePoint: sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job
— MechaCode

Jawaban:

43

Lihat Wikipedia: http://en.wikipedia.org/wiki/Canvas_element

SVG adalah standar awal untuk menggambar bentuk di browser. Namun, SVG berada pada level yang lebih tinggi secara fundamental karena setiap bentuk yang digambar akan diingat sebagai objek dalam grafik pemandangan atau DOM, yang kemudian dirender ke peta bit. Ini berarti bahwa jika atribut objek SVG diubah, browser dapat merender ulang pemandangan secara otomatis.

Dalam contoh di atas, setelah persegi panjang digambar, fakta bahwa itu digambar dilupakan oleh sistem. Jika posisinya akan diubah, seluruh pemandangan perlu digambar ulang, termasuk objek apa pun yang mungkin telah ditutupi oleh persegi panjang. Tetapi dalam kasus SVG yang setara, seseorang dapat dengan mudah mengubah atribut posisi persegi panjang dan browser akan menentukan cara mengecat ulang. Anda juga dapat melukis kanvas dalam beberapa lapisan dan kemudian membuat ulang lapisan tertentu.

Gambar SVG direpresentasikan dalam XML, dan pemandangan kompleks dapat dibuat dan dipertahankan dengan alat pengeditan XML.

Grafik adegan SVG memungkinkan penangan peristiwa dikaitkan dengan objek, sehingga persegi panjang dapat merespons peristiwa onClick. Untuk mendapatkan fungsi yang sama dengan kanvas, seseorang harus secara manual mencocokkan koordinat klik mouse dengan koordinat persegi panjang yang digambar untuk menentukan apakah itu diklik.

Secara konseptual, kanvas adalah protokol tingkat yang lebih rendah di mana SVG dapat dibangun. [Rujukan?] Namun, ini tidak (biasanya) terjadi — mereka adalah standar independen. Situasinya rumit karena ada pustaka grafik pemandangan untuk Canvas, dan SVG memiliki beberapa fungsi manipulasi peta bit.

UPDATE: Saya menggunakan SVG karena kemampuan bahasa markupnya - dapat diproses oleh XSLT dan dapat menampung markup lain di node-nya. Demikian pula saya bisa memegang SVG di markup saya (kimia). Ini memungkinkan saya untuk memanipulasi atribut SVG (mis. Rendering) dengan kombinasi markup. Ini mungkin dilakukan di Canvas tapi saya rasa ini jauh lebih sulit.

— peter.murray.rust
sumber
2
Kalimat terakhir di paragraf terakhir membutuhkan satu atau dua kutipan juga. SVG tidak memiliki "fungsionalitas manipulasi peta bit", kecuali jika penulis mencoba untuk menggambarkan efek filter svg seperti itu, tetapi masih jauh dari jelas apa yang dimaksud.
— Erik Dahlström
@Erik Saya setuju dengan Anda. Sepertinya entri WP ini perlu diedit
— peter.murray.rust
Kedengarannya untuk sebagian besar aplikasi, SVG lebih unggul dari Canvas. Benarkah itu? Adakah yang bisa dilakukan Canvas yang tidak bisa dilakukan SVG?
— mcv
Saya tahu itu bertahun-tahun kemudian tetapi hari ini ada banyak perpustakaan kanvas, seperti paper.js dan fabric.js
— lesolorzanov
svg buruk untuk kinerja karena menggunakan dom nyata untuk terus memperbarui objek yang menyebabkan perubahan posisi, kanvas buruk untuk penggunaan karena tidak melacak objek sebagai entitas individu, bagaimana jika kita memiliki kanvas yang menggunakan dom virtual
— PirateApp
51

SVG seperti program "menggambar". Gambar ditentukan sebagai instruksi menggambar untuk setiap bentuk dan setiap bagian dari bentuk apa pun dapat diubah. Gambar berorientasi pada bentuk.

Kanvas itu seperti program "melukis". Setelah piksel menyentuh layar, itulah gambar Anda. Anda tidak dapat mengubah bentuk kecuali dengan menimpanya dengan piksel lain. Lukisan berorientasi piksel.

Mampu mengubah gambar sangat penting untuk beberapa program; misalnya membuat draf aplikasi, alat diagram, dll. Jadi, SVG memiliki keuntungan di sini.

Mampu mengontrol piksel individu penting untuk beberapa program artistik.

Mendapatkan kinerja animasi yang luar biasa untuk manipulasi pengguna melalui seret mouse lebih mudah dengan Canvas daripada SVG.

Satu piksel pada layar komputer akan sering memakan 4 byte informasi dan layar komputer saat ini membutuhkan beberapa megabyte. Jadi Canvas mungkin tidak nyaman jika Anda ingin membiarkan pengguna mengedit gambar dan kemudian menguploadnya lagi.

Sebaliknya, menggambar beberapa bentuk yang menutupi seluruh layar menggunakan SVG membutuhkan beberapa byte, mengunduh dengan cepat, dan dapat diunggah lagi dengan mudah dengan keuntungan yang sama menuju ke arah itu seperti ketika turun ke arah lain. Jadi SVG bisa lebih cepat dari Canvas.

Google menerapkan Google Maps dengan SVG. Itu memberi aplikasi web kinerja lincah dan pengguliran yang mulus.

— JohnnySoftware
sumber
20
Tidak akan menolak Anda - versi baru google maps sebenarnya menggunakan kanvas sekarang, bukan svg. Versi svg sekarang tidak digunakan lagi.
— Duniyadnd
35

Ringkasan Tingkat Tinggi Canvas vs. SVG

Kanvas

  1. Berbasis piksel (Dynamic .png)
  2. Elemen HTML tunggal. (Periksa elemen di alat Pengembang. Anda hanya dapat melihat tag kanvas)
  3. Dimodifikasi hanya melalui skrip
  4. Model peristiwa / interaksi pengguna granular (x, y)
  5. Performa lebih baik dengan permukaan yang lebih kecil, jumlah objek yang lebih banyak (> 10k), atau keduanya

SVG

  1. Berbasis bentuk
  2. Beberapa elemen grafis, yang menjadi bagian dari DOM
  3. Dimodifikasi melalui skrip dan CSS
  4. Model peristiwa / interaksi pengguna diabstraksi (rect, path)
  5. Performa lebih baik dengan jumlah objek yang lebih sedikit (<10k), permukaan yang lebih besar, atau keduanya

Untuk perbedaan mendetail, baca http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

— Fizer Khan
sumber
23

Ada perbedaan dalam hal itu, dan apa yang mereka lakukan untuk Anda.

  • SVG adalah format dokumen untuk grafik vektor yang dapat diskalakan.
  • Canvas adalah API javascript untuk menggambar grafik vektor ke bitmap dengan ukuran tertentu.

Untuk menguraikan sedikit, tentang format versus API:

Dengan svg Anda dapat melihat, menyimpan dan mengedit file di berbagai alat. Dengan kanvas yang baru saja Anda gambar, dan tidak ada yang disimpan tentang apa yang baru saja Anda lakukan selain dari gambar yang dihasilkan di layar. Anda dapat menganimasikan keduanya, SVG menangani penggambaran ulang untuk Anda hanya dengan melihat elemen dan atribut yang ditentukan, sedangkan dengan kanvas Anda harus menggambar ulang setiap bingkai sendiri menggunakan API. Anda dapat menskalakan keduanya, tetapi SVG melakukannya secara otomatis, sementara dengan kanvas lagi, Anda harus mengeluarkan kembali perintah gambar untuk ukuran yang diberikan.

— Erik Dahlström
sumber
1
Mungkin yang paling adil dan akurat secara teknis dari semua jawaban. SVG adalah format dokumen, dibuat baik di server (kebanyakan statis) atau di klien itlsef. Bingkai kanvas tidak lebih dari gambar. Jadi secara alami itu mengharuskan Anda untuk menggambar ulang yang memiliki API-nya.
— user568109
10

Dua hal yang paling menarik bagi saya untuk SVG dan Canvas adalah,

Kemampuan untuk menggunakan Canvas tanpa DOM, dimana SVG sangat bergantung pada DOM dan ketika kompleksitas meningkatkan kinerja melambat. Seperti dalam desain game.

Keuntungan menggunakan SVG adalah resolusinya tetap sama di seluruh platform yang tidak memiliki Canvas.

Lebih banyak detail disediakan di situs ini. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

— Sam007
sumber
4

Ini sangat tergantung pada kebutuhan / kebutuhan Anda.

  • Jika Anda hanya ingin menampilkan gambar / grafik di layar maka pendekatan yang disarankan adalah kanvas. (Contohnya adalah PNG, GIF, BMP dll.)

  • Jika Anda ingin memperluas fitur grafik Anda misalnya jika Anda mengarahkan mouse pada grafik ingin memperbesar area tertentu tanpa merusak kualitas tampilan maka Anda pilih SVG. (Contoh yang bagus adalah file AutoCAD, Visio, GIS).

Jika Anda ingin membangun alat pembuat diagram aliran dinamis dengan konektor bentuk, lebih baik memilih SVG daripada CANVAS.

  • Saat ukuran layar meningkat, kanvas mulai menurun karena semakin banyak piksel yang perlu digambar.

  • Saat jumlah objek meningkat di layar, SVG mulai
    menurun saat kami terus menambahkannya ke DOM.

Lihat juga: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

— Aji
sumber
3

SVG

Berdasarkan kasus penggunaan, SVG digunakan untuk logo, bagan karena grafik vektornya Anda gambar dan lupakan. Ketika port tampilan berubah seperti mengubah ukuran (atau zoom) itu akan menyesuaikan sendiri dan tidak perlu menggambar ulang.

Kanvas

Kanvas adalah bitmap (atau raster) yang dilakukan dengan melukis piksel ke layar. Ini digunakan untuk mengembangkan game atau pengalaman grafis ( https://www.chromeexperiments.com/webgl ) di area tertentu, ia mengecat piksel dan mengubahnya dengan menggambar ulang yang lain. Karena ini jenis raster, kita perlu menggambar ulang sepenuhnya saat port tampilan berubah.

Referensi

http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas

http://en.wikipedia.org/wiki/WebGL

http://vector-conversions.com/vectorizing/raster_vs_vector.html

— Purushoth
sumber
2

SVGadalah spesifikasi gambar seperti format file. SVG adalah dokumen. Anda dapat bertukar file SVG seperti file HTML. Selain itu, karena elemen SVG dan elemen HTML berbagi API DOM yang sama, JavaScript dapat digunakan untuk membuat DOM SVG dengan cara yang sama seperti membuat DOM HTML. Tetapi Anda tidak membutuhkan JavaScript untuk menghasilkan file SVG. Editor teks sederhana sudah cukup untuk menulis SVG. Tapi Anda membutuhkan setidaknya kalkulator untuk menghitung koordinat bentuk pada gambar.

CANVAShanyalah area menggambar. Itu perlu menggunakan JavaScript untuk menghasilkan konten kanvas. Anda tidak bisa bertukar kanvas. Ini bukan dokumen. Dan elemen kanvas bukanlah bagian dari pohon DOM. Anda tidak dapat menggunakan API DOM untuk memanipulasi konten kanvas. Sebagai gantinya Anda harus menggunakan API kanvas khusus untuk menggambar bentuk ke kanvas.

Keuntungan dari a SVGadalah, Anda dapat menukar gambar tersebut sebagai dokumen. Keuntungan dari CANVASis, yaitu memiliki JavaScript API yang lebih sedikit untuk menghasilkan konten.

Berikut adalah sebuah contoh, yang menunjukkan bahwa Anda dapat mencapai hasil yang serupa, tetapi cara melakukannya di JavaScript sangat berbeda.

// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();
svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}
<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>
Luaskan cuplikan

Seperti yang Anda lihat, hasilnya hampir sama, tetapi kode JavaScript-nya sangat berbeda.

SVG dibuat dengan DOM API menggunakan createElement, setAttributedan appendChild. Semua grafik ada dalam string atribut. SVG memiliki primitif yang lebih kuat. CANVAS misalnya tidak memiliki apa pun yang setara dengan jalur busur SVG. Contoh CANVAS mencoba meniru busur SVG dengan kurva Bezier. Dalam SVG Anda dapat menggunakan kembali elemen untuk mengubahnya. Di CANVAS Anda tidak dapat menggunakan kembali elemen. Sebagai gantinya, Anda harus menulis fungsi JavaScript untuk memanggilnya dua kali. SVG memiliki viewBoxyang memungkinkan untuk menggunakan koordinat yang dinormalisasi, yang menyederhanakan rotasi. Di CANVAS Anda harus menghitung sendiri koordinatnya berdasarkan clientWidthdanclientHeight. Dan Anda dapat mengatur gaya semua elemen SVG dengan CSS. Di CANVAS Anda tidak dapat mengatur gaya apa pun dengan CSS. Karena SVG adalah DOM, Anda dapat menetapkan penangan kejadian ke semua elemen SVG. Elemen di CANVAS tidak memiliki DOM dan tidak ada penangan kejadian DOM.

Namun di sisi lain kode CANVAS jauh lebih mudah dibaca. Anda tidak perlu peduli dengan ruang nama XML. Dan Anda bisa langsung memanggil fungsi grafik, karena Anda tidak perlu membangun DOM.

Pelajarannya jelas: jika Anda ingin menggambar beberapa grafik dengan cepat, gunakan CANVAS. Jika Anda perlu membagikan grafik, ingin menatanya dengan CSS atau ingin menggunakan event handler DOM dalam grafik Anda, buat SVG.

— ceving
sumber
1

menambahkan ke poin di atas:

SVG ringan untuk ditransfer melalui web jika dibandingkan dengan JPEG, GIF dll dan juga sangat diskalakan saat diubah ukurannya tanpa kehilangan Kualitas.

— Narayana Swamy
sumber
0

SVG
Ini adalah berbasis Model Objek.
Cocok untuk menggunakan area rendering yang luas.
SVG memberikan dukungan apa pun untuk penangan acara.
Modifikasi diperbolehkan melalui skrip dan CSS.
SVG memiliki skalabilitas yang lebih baik
SVG berbasis Vektor (terdiri dari bentuk).
SVG tidak cocok untuk grafik Game. SVG tidak bergantung pada resolusi.
SVG mampu untuk animasi API.
SVG cocok untuk pencetakan dengan kualitas tinggi dan resolusi apa pun.

Elemen kanvas

Ini berbasis piksel.

Cocok untuk menggunakan rendering kecil

Canvas tidak menyediakan bantuan apa pun untuk penangan acara.

Modifikasi hanya diperbolehkan melalui skrip.

Canvas memiliki skalabilitas yang buruk.

Kanvas berbasis Raster (terdiri dari piksel).

Canvas cocok untuk grafis game.

Kanvas sepenuhnya bergantung pada resolusi.

Canvas tidak memiliki API untuk animasi.

Kanvas tidak cocok untuk pencetakan kualitas tinggi dan resolusi tinggi.

— Vasundhara
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.