คู่มือการศึกษา HTML5+SVG พื้นฐาน SVG

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

สารานุกรม Baidu:

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

SVG หมายถึงกราฟิกเวกเตอร์ที่ปรับขนาดได้ (กราฟิกเวกเตอร์ที่ปรับขนาดได้)

SVG ใช้เพื่อกำหนดกราฟิกที่ใช้เวกเตอร์สำหรับเครือข่าย

SVG กำหนดกราฟิกในรูปแบบ XML

ภาพ SVG จะไม่สูญเสียคุณภาพกราฟิกเมื่อขยายขนาดหรือเปลี่ยนขนาด

SVG เป็นมาตรฐานสำหรับ World Wide Web Alliance

SVG นั้นมีทั้งหมดที่มีมาตรฐาน W3C เช่น DOM และ XSL

SVG

SVG เป็นภาษาที่ใช้ XML เพื่ออธิบายกราฟิก 2D

SVG ขึ้นอยู่กับ XML ซึ่งหมายความว่าทุกองค์ประกอบใน SVG DOM นั้นมีอยู่ คุณสามารถแนบตัวจัดการเหตุการณ์ JavaScript เข้ากับองค์ประกอบ

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

คุณสมบัติ:

ไม่มีการพึ่งพาความละเอียด

สนับสนุนตัวจัดการเหตุการณ์

ดีที่สุดสำหรับแอปพลิเคชันที่มีพื้นที่แสดงผลขนาดใหญ่ (เช่น Google Maps)

ความซับซ้อนสูงสามารถชะลอการเรนเดอร์ (ไม่มีแอปพลิเคชันที่ใช้งานมากเกินไป DOM)

ไม่เหมาะสำหรับแอปพลิเคชันเกม

ผ้าใบ

Canvas วาดกราฟิก 2D ผ่าน JavaScript

ผ้าใบแสดงผลพิกเซลด้วยพิกเซล

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

คุณสมบัติ:

ขึ้นอยู่กับความละเอียด

ไม่รองรับตัวจัดการเหตุการณ์

ความสามารถในการแสดงข้อความที่อ่อนแอ

ความสามารถในการบันทึกภาพผลลัพธ์ในรูปแบบ. png หรือ. jpg

ดีที่สุดสำหรับเกมที่ใช้ภาพมากซึ่งหลายเกมมักถูกทาสีใหม่

คัดลอกรหัส