SVG และ HTML5 Canvas แตกต่างกันอย่างไร

Question 1

SVG และ HTML5 Canvas แตกต่างกันอย่างไร ดูเหมือนทั้งคู่จะทำแบบเดียวกันกับฉัน โดยพื้นฐานแล้วพวกเขาทั้งคู่วาดภาพเวกเตอร์โดยใช้จุดพิกัด

ฉันขาดอะไรไป? อะไรคือความแตกต่างที่สำคัญระหว่าง SVG และ HTML5 Canvas เหตุใดฉันจึงควรเลือกอย่างใดอย่างหนึ่ง

Question 2

ดู Wikipedia: http://en.wikipedia.org/wiki/Canvas_element

SVG เป็นมาตรฐานก่อนหน้านี้สำหรับการวาดรูปร่างในเบราว์เซอร์ อย่างไรก็ตาม SVG อยู่ในระดับที่สูงขึ้นโดยพื้นฐานเนื่องจากรูปร่างที่วาดแต่ละรูปจะถูกจดจำเป็นวัตถุในกราฟฉากหรือ DOM ซึ่งจะแสดงผลเป็นบิตแมปในเวลาต่อมา ซึ่งหมายความว่าหากแอตทริบิวต์ของออบเจ็กต์ SVG มีการเปลี่ยนแปลงเบราว์เซอร์จะแสดงฉากใหม่โดยอัตโนมัติ

ในตัวอย่างด้านบนเมื่อวาดรูปสี่เหลี่ยมผืนผ้าแล้วระบบจะลืมความจริงที่ว่ามันถูกวาดขึ้น หากต้องเปลี่ยนตำแหน่งฉากทั้งหมดจะต้องได้รับการวาดใหม่รวมถึงวัตถุใด ๆ ที่อาจถูกสี่เหลี่ยมปิดทับ แต่ในกรณี SVG ที่เทียบเท่ากันเราสามารถเปลี่ยนแอตทริบิวต์ตำแหน่งของสี่เหลี่ยมผืนผ้าได้และเบราว์เซอร์จะกำหนดวิธีการทาสีใหม่ นอกจากนี้ยังสามารถวาดผ้าใบเป็นเลเยอร์แล้วสร้างเลเยอร์ที่ต้องการขึ้นมาใหม่ได้

ภาพ SVG จะแสดงใน XML และสามารถสร้างและดูแลฉากที่ซับซ้อนได้ด้วยเครื่องมือแก้ไข XML

กราฟฉาก SVG ช่วยให้ตัวจัดการเหตุการณ์สามารถเชื่อมโยงกับวัตถุได้ดังนั้นรูปสี่เหลี่ยมผืนผ้าอาจตอบสนองต่อเหตุการณ์ onClick ในการรับฟังก์ชันการทำงานเดียวกันกับแคนวาสเราต้องจับคู่พิกัดของการคลิกเมาส์ด้วยตนเองกับพิกัดของสี่เหลี่ยมที่วาดเพื่อตรวจสอบว่ามีการคลิกหรือไม่

ตามแนวคิด canvas เป็นโปรโตคอลระดับล่างที่อาจสร้าง SVG [จำเป็นต้องอ้างอิง] อย่างไรก็ตามนี่ไม่ใช่ (โดยปกติ) แต่เป็นมาตรฐานอิสระ สถานการณ์มีความซับซ้อนเนื่องจากมีไลบรารีกราฟฉากสำหรับ Canvas และ SVG มีฟังก์ชันการจัดการบิตแมป

อัปเดต: ฉันใช้ SVG เนื่องจากความสามารถของภาษามาร์กอัป - สามารถประมวลผลโดย XSLT และสามารถเก็บมาร์กอัปอื่น ๆ ไว้ในโหนดได้ ในทำนองเดียวกันฉันสามารถถือ SVG ในมาร์กอัป (เคมี) ของฉันได้ สิ่งนี้ทำให้ฉันสามารถจัดการแอตทริบิวต์ SVG (เช่นการแสดงผล) โดยการรวมกันของมาร์กอัป สิ่งนี้อาจเป็นไปได้ใน Canvas แต่ฉันสงสัยว่ามันยากกว่านี้มาก

Question 3

SVG เปรียบเสมือนโปรแกรม "วาด" รูปวาดถูกระบุเป็นคำแนะนำในการวาดสำหรับแต่ละรูปร่างและสามารถเปลี่ยนแปลงส่วนใดส่วนหนึ่งของรูปร่าง ภาพวาดเป็นแบบเน้นรูปร่าง

Canvas เป็นเหมือนโปรแกรม "ระบายสี" เมื่อพิกเซลเข้าสู่หน้าจอนั่นคือภาพวาดของคุณ คุณไม่สามารถเปลี่ยนรูปร่างได้ยกเว้นโดยเขียนทับด้วยพิกเซลอื่น ภาพวาดเน้นพิกเซล

ความสามารถในการเปลี่ยนภาพวาดเป็นสิ่งสำคัญมากสำหรับบางโปรแกรม เช่นการร่างแอพเครื่องมือสร้างไดอะแกรมเป็นต้น SVG จึงได้เปรียบตรงนี้

ความสามารถในการควบคุมแต่ละพิกเซลเป็นสิ่งสำคัญสำหรับโปรแกรมศิลปะบางโปรแกรม

การได้รับประสิทธิภาพภาพเคลื่อนไหวที่ยอดเยี่ยมสำหรับการจัดการของผู้ใช้ผ่านการลากเมาส์ทำได้ง่ายกว่าด้วย Canvas มากกว่า SVG

พิกเซลเดียวบนหน้าจอคอมพิวเตอร์มักจะใช้ข้อมูล 4 ไบต์และหน้าจอคอมพิวเตอร์ทุกวันนี้ใช้เวลาหลายเมกะไบต์ ดังนั้น Canvas อาจไม่สะดวกหากคุณต้องการให้ผู้ใช้แก้ไขรูปภาพแล้วอัปโหลดอีกครั้ง

ในทางตรงกันข้ามการวาดรูปทรงจำนวนหนึ่งที่ครอบคลุมทั้งหน้าจอโดยใช้ SVG จะใช้เวลาไม่กี่ไบต์ดาวน์โหลดได้อย่างรวดเร็วและสามารถอัปโหลดอีกครั้งได้อย่างง่ายดายโดยมีข้อดีเหมือนกันที่ไปในทิศทางนั้นเมื่อเทียบกับทิศทางอื่น SVG จึงเร็วกว่า Canvas

Google ติดตั้ง Google Maps กับ SVG ซึ่งทำให้เว็บแอปมีประสิทธิภาพที่ยอดเยี่ยมและการเลื่อนที่ราบรื่น

Question 4

สรุประดับสูงของ Canvas เทียบกับ SVG

ผ้าใบ

ตามพิกเซล (ไดนามิก. png)
องค์ประกอบ HTML เดียว (ตรวจสอบองค์ประกอบในเครื่องมือสำหรับนักพัฒนาคุณสามารถดูได้เฉพาะแท็กผ้าใบ)
แก้ไขผ่านสคริปต์เท่านั้น
รูปแบบเหตุการณ์ / การโต้ตอบกับผู้ใช้เป็นแบบละเอียด (x, y)
ประสิทธิภาพจะดีกว่ากับพื้นผิวที่เล็กกว่าวัตถุจำนวนมาก (> 10k) หรือทั้งสองอย่าง

SVG

รูปร่างตาม
องค์ประกอบกราฟิกหลายรายการซึ่งกลายเป็นส่วนหนึ่งของ DOM
แก้ไขผ่านสคริปต์และ CSS
รูปแบบเหตุการณ์ / การโต้ตอบกับผู้ใช้เป็นนามธรรม (rect, path)
ประสิทธิภาพจะดีกว่ากับวัตถุจำนวนน้อย (<10k) พื้นผิวที่ใหญ่กว่าหรือทั้งสองอย่าง

สำหรับความแตกต่างโดยละเอียดโปรดอ่านhttp://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Question 5

มีความแตกต่างในสิ่งที่เป็นและสิ่งที่พวกเขาทำเพื่อคุณ

SVG เป็นรูปแบบเอกสารสำหรับกราฟิกเวกเตอร์ที่ปรับขนาดได้
Canvas เป็น javascript API สำหรับวาดภาพกราฟิกเวกเตอร์เป็นบิตแมปที่มีขนาดเฉพาะ

ในการอธิบายรายละเอียดเล็กน้อยเกี่ยวกับรูปแบบเทียบกับ API:

ด้วย svg คุณสามารถดูบันทึกและแก้ไขไฟล์ด้วยเครื่องมือต่างๆมากมาย ด้วยผืนผ้าใบที่คุณเพิ่งวาดและไม่มีสิ่งใดที่จะเก็บไว้เกี่ยวกับสิ่งที่คุณเพิ่งทำนอกจากภาพที่ได้บนหน้าจอ คุณสามารถทำให้เคลื่อนไหวได้ทั้งสองอย่าง SVG จะจัดการการวาดใหม่ให้คุณได้โดยเพียงแค่ดูองค์ประกอบและแอตทริบิวต์ที่ระบุในขณะที่ผ้าใบคุณต้องวาดแต่ละเฟรมด้วยตัวเองโดยใช้ API คุณสามารถปรับขนาดได้ทั้งสองอย่าง แต่ SVG จะทำโดยอัตโนมัติในขณะที่ใช้ผ้าใบอีกครั้งคุณต้องออกคำสั่งวาดใหม่สำหรับขนาดที่กำหนด

Question 6

สองสิ่งที่โดนใจฉันมากที่สุดสำหรับ SVG และ Canvas คือ

ความสามารถในการใช้ Canvas โดยไม่ต้องใช้ DOM โดยที่ SVG ขึ้นอยู่กับ DOM เป็นอย่างมากและเมื่อความซับซ้อนเพิ่มขึ้นประสิทธิภาพจะช้าลง ชอบในการออกแบบเกม

ข้อดีของการใช้ SVG คือความละเอียดยังคงเหมือนเดิมในทุกแพลตฟอร์มที่ไม่มีใน Canvas

รายละเอียดเพิ่มเติมมีให้ในไซต์นี้ http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Question 7

ขึ้นอยู่กับความต้องการ / ความต้องการของคุณ

หากคุณต้องการเพียงแค่แสดงภาพ / แผนภูมิบนหน้าจอแนวทางที่แนะนำคือผ้าใบ (ตัวอย่างเช่น PNG, GIF, BMP เป็นต้น)
หากคุณต้องการขยายคุณสมบัติของกราฟิกของคุณเช่นหากคุณวางเมาส์บนแผนภูมิต้องการขยายพื้นที่บางส่วนโดยไม่ทำให้คุณภาพการแสดงผลเสียให้คุณเลือก SVG (ตัวอย่างที่ดีคือ AutoCAD, Visio, ไฟล์ GIS)

หากคุณต้องการสร้างเครื่องมือสร้างไดอะแกรมโฟลว์แบบไดนามิกที่มีตัวเชื่อมต่อรูปร่างควรเลือก SVG แทน CANVAS

เมื่อขนาดของหน้าจอเพิ่มขึ้นผืนผ้าใบจะเริ่มลดลงเนื่องจากต้องวาดพิกเซลมากขึ้น
เมื่อจำนวนวัตถุบนหน้าจอเพิ่มขึ้น SVG จะเริ่ม
ลดระดับลงเมื่อเราเพิ่มวัตถุเหล่านั้นลงใน DOM อย่างต่อเนื่อง

โปรดอ้างอิง: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

Question 8

SVG

ขึ้นอยู่กับกรณีการใช้งาน SVG ใช้สำหรับโลโก้แผนภูมิเนื่องจากกราฟิกแบบเวกเตอร์ที่คุณวาดและลืมไป เมื่อพอร์ตมุมมองเปลี่ยนไปเช่นการปรับขนาดใหม่ (หรือการซูม) มันจะปรับตัวเองและไม่จำเป็นต้องวาดใหม่

ผ้าใบ

Canvas เป็นบิตแมป (หรือแรสเตอร์) ที่ทำได้โดยการวาดพิกเซลลงบนหน้าจอ ใช้เพื่อพัฒนาเกมหรือประสบการณ์ด้านกราฟิก ( https://www.chromeexperiments.com/webgl ) ในพื้นที่ที่กำหนดโดยจะวาดพิกเซลและเปลี่ยนแปลงโดยวาดใหม่อีกครั้ง เนื่องจากเป็นประเภทแรสเตอร์เราจึงต้องวาดใหม่ทั้งหมดเมื่อดูพอร์ตเปลี่ยนไป

ข้อมูลอ้างอิง

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

Question 9

SVGเป็นข้อกำหนดของภาพวาดเช่นรูปแบบไฟล์ SVG คือเอกสาร คุณสามารถแลกเปลี่ยนไฟล์ SVG เช่นไฟล์ HTML และนอกจากนี้เนื่องจากองค์ประกอบ SVG และองค์ประกอบ HTML ใช้ DOM API เดียวกันจึงเป็นไปได้ที่จะใช้ JavaScript เพื่อสร้าง SVG DOM ในลักษณะเดียวกับที่เป็นไปได้ในการสร้าง HTML DOM แต่คุณไม่จำเป็นต้องใช้ JavaScript ในการสร้างไฟล์ SVG โปรแกรมแก้ไขข้อความธรรมดาก็เพียงพอที่จะเขียน SVG แต่อย่างน้อยคุณต้องมีเครื่องคิดเลขเพื่อคำนวณพิกัดของรูปร่างในรูปวาด

CANVASเป็นเพียงพื้นที่วาดภาพ จำเป็นต้องใช้ JavaScript เพื่อสร้างเนื้อหาของผืนผ้าใบ คุณไม่สามารถแลกเปลี่ยนผ้าใบได้ มันไม่มีเอกสาร และองค์ประกอบของผืนผ้าใบไม่ได้เป็นส่วนหนึ่งของแผนผัง DOM คุณไม่สามารถใช้ DOM API เพื่อจัดการเนื้อหาของแคนวาสได้ แต่คุณต้องใช้ canvas API เฉพาะเพื่อวาดรูปทรงลงในผืนผ้าใบ

ข้อดีของ a SVGคือคุณสามารถแลกเปลี่ยนภาพวาดเป็นเอกสารได้ ข้อดีของCANVASมันคือมี JavaScript API ที่ละเอียดน้อยกว่าในการสร้างเนื้อหา

นี่คือตัวอย่างซึ่งแสดงให้เห็นว่าคุณสามารถได้ผลลัพธ์ที่คล้ายกัน แต่วิธีการทำใน JavaScript นั้นแตกต่างกันมาก

// 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>

ขยายข้อมูลโค้ด

อย่างที่คุณเห็นผลลัพธ์เกือบจะเหมือนกัน แต่โค้ด JavaScript นั้นแตกต่างกันอย่างสิ้นเชิง

SVG ถูกสร้างขึ้นด้วย DOM API โดยใช้createElement, และsetAttribute appendChildกราฟิกทั้งหมดอยู่ในสตริงแอตทริบิวต์ SVG มีพื้นฐานที่ทรงพลังกว่า ตัวอย่างเช่น CANVAS ไม่มีอะไรเทียบเท่ากับเส้นทางโค้ง SVG ตัวอย่าง CANVAS พยายามเลียนแบบส่วนโค้ง SVG ด้วยเส้นโค้ง Bezier ใน SVG คุณสามารถใช้องค์ประกอบซ้ำเพื่อเปลี่ยนองค์ประกอบได้ ใน CANVAS คุณไม่สามารถใช้องค์ประกอบซ้ำได้ แต่คุณต้องเขียนฟังก์ชัน JavaScript เพื่อเรียกมันสองครั้ง SVG มีviewBoxที่อนุญาตให้ใช้พิกัดปกติซึ่งช่วยลดความยุ่งยากในการหมุน ใน CANVAS คุณต้องคำนวณพิกัดด้วยตัวคุณเองตามclientWidthและclientHeight. และคุณสามารถจัดรูปแบบองค์ประกอบ SVG ทั้งหมดด้วย CSS ใน CANVAS คุณไม่สามารถจัดสไตล์อะไรได้ด้วย CSS เนื่องจาก SVG เป็น DOM คุณจึงสามารถกำหนดตัวจัดการเหตุการณ์ให้กับองค์ประกอบ SVG ทั้งหมดได้ องค์ประกอบใน CANVAS ไม่มี DOM และไม่มีตัวจัดการเหตุการณ์ DOM

แต่ในทางกลับกันรหัส CANVAS นั้นอ่านง่ายกว่ามาก คุณไม่จำเป็นต้องสนใจเกี่ยวกับช่องว่างชื่อ XML และคุณสามารถเรียกใช้ฟังก์ชันกราฟิกได้โดยตรงเนื่องจากคุณไม่จำเป็นต้องสร้าง DOM

บทเรียนมีความชัดเจน: หากคุณต้องการวาดภาพกราฟิกอย่างรวดเร็วให้ใช้ผ้าใบ หากคุณต้องการแบ่งปันกราฟิกเช่นต้องการจัดรูปแบบด้วย CSS หรือต้องการใช้ตัวจัดการเหตุการณ์ DOM ในกราฟิกของคุณให้สร้าง SVG

Question 10

เพิ่มในประเด็นข้างต้น:

SVG มีน้ำหนักเบาสำหรับการถ่ายโอนผ่านเว็บเมื่อเทียบกับ JPEG, GIF และอื่น ๆ และยังปรับขนาดได้มากเมื่อปรับขนาดโดยไม่สูญเสียคุณภาพ

Question 11

SVG
เป็น Object Model-based
เหมาะสำหรับการใช้พื้นที่การแสดงผลขนาดใหญ่
SVG ให้การสนับสนุนสำหรับตัวจัดการเหตุการณ์
อนุญาตให้แก้ไขผ่านสคริปต์และ CSS
SVG มีความสามารถในการปรับขนาดได้ดีขึ้น
SVG เป็นแบบเวกเตอร์ (ประกอบด้วยรูปร่าง)
SVG ไม่เหมาะสำหรับกราฟิกเกม SVG ไม่ขึ้นอยู่กับความละเอียด
SVG สามารถสำหรับภาพเคลื่อนไหว API
SVG เหมาะสำหรับการพิมพ์ที่มีคุณภาพสูงและความละเอียดใด ๆ

องค์ประกอบผ้าใบ

เป็นพิกเซล

เหมาะสำหรับการใช้การแสดงผลขนาดเล็ก

Canvas ไม่มีการขอความช่วยเหลือใด ๆ สำหรับตัวจัดการเหตุการณ์

อนุญาตให้แก้ไขผ่านสคริปต์เท่านั้น

ผ้าใบมีความสามารถในการปรับขนาดไม่ดี

Canvas เป็นแบบ Raster (ประกอบด้วยพิกเซล)

Canvas เหมาะสำหรับกราฟิกเกม

Canvas ขึ้นอยู่กับความละเอียดอย่างสมบูรณ์

Canvas ไม่มี API สำหรับภาพเคลื่อนไหว

แคนวาสไม่เหมาะสำหรับการพิมพ์คุณภาพสูงและความละเอียดสูง