ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
 

SVGเกี่ยวกับการสอน


SVG ย่อมาจาก Scalable กราฟิกแบบเวกเตอร์

SVG กำหนดกราฟิกแบบเวกเตอร์ที่อยู่ในรูปแบบ XML


ตัวอย่างในแต่ละบท

กับของเรา "ลองมันเอง" Editor คุณสามารถแก้ไข SVG และคลิกที่ปุ่มเพื่อดูผลลัพธ์

ตัวอย่าง SVG

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
ลองตัวเอง»

สิ่งที่คุณควรรู้แล้ว

ก่อนที่คุณจะดำเนินการต่อคุณควรมีความเข้าใจพื้นฐานบางอย่างต่อไปนี้:

  • HTML
  • XML พื้นฐาน

หากคุณต้องการที่จะศึกษาวิชาเหล่านี้แรกพบบทเรียนเกี่ยวกับเรา หน้าแรก


SVG คืออะไร?

  • SVG ย่อมาจาก Scalable กราฟิกแบบเวกเตอร์
  • SVG ใช้เพื่อกำหนดกราฟิกแบบเวกเตอร์ที่ใช้สำหรับเว็บ
  • SVG กำหนดกราฟิกในรูปแบบ XML
  • SVG กราฟิกจะไม่สูญเสียคุณภาพใดถ้าพวกเขาจะซูมหรือปรับขนาด
  • ทุกองค์ประกอบและแอตทริบิวต์ในไฟล์ SVG ทุกคนสามารถเป็นภาพเคลื่อนไหว
  • SVG เป็นคำแนะนำ W3C
  • SVG ทำงานร่วมกับมาตรฐาน W3C อื่น ๆ เช่น DOM และ XSL

SVG เป็นคำแนะนำ W3C

SVG 1.0 กลายเป็นคำแนะนำของ W3C เกี่ยวกับ 4 กันยายน 2001

SVG 1.1 กลายเป็นคำแนะนำของ W3C เกี่ยวกับ 14 มกราคม 2003

SVG 1.1 (Second Edition) กลายเป็นคำแนะนำของ W3C เกี่ยวกับ 16 สิงหาคม 2011


ข้อดี SVG

ข้อดีของการใช้ SVG มากกว่ารูปแบบภาพอื่น ๆ (เช่น JPEG และ GIF) มีดังนี้:

  • ภาพ SVG สามารถสร้างและแก้ไขด้วยโปรแกรมแก้ไขข้อความใด ๆ
  • ภาพ SVG สามารถค้นหา, การจัดทำดัชนีสคริปต์และการบีบอัด
  • ภาพ SVG สามารถปรับขนาดได้
  • ภาพ SVG สามารถพิมพ์ที่มีคุณภาพสูงที่ความละเอียดใด ๆ
  • ภาพ SVG เป็น zoomable (and the image can be zoomed without degradation)
  • SVG เป็นมาตรฐานเปิด
  • ไฟล์ SVG เป็น XML บริสุทธิ์

คู่แข่งหลักเพื่อ SVG เป็นแฟลช

ข้อได้เปรียบที่ใหญ่ที่สุด SVG มีมากกว่า Flash เป็นการปฏิบัติตามมาตรฐานอื่น ๆ (eg XSL and the DOM) แฟลชอาศัยเทคโนโลยีที่เป็นกรรมสิทธิ์ที่ไม่ได้เป็นโอเพนซอร์ส


สร้าง SVG แสดงสินค้า

ภาพ SVG สามารถสร้างขึ้นด้วยโปรแกรมแก้ไขข้อความใด ๆ แต่ก็มักจะเป็นความสะดวกมากขึ้นในการสร้างภาพ SVG กับโปรแกรมการวาดภาพเหมือน Inkscape