อบรม SVG

SVG คอร์สที่แนะนำ

SVG หมายถึง Scalable Vector Graphics (Scalable Vector Graphics) XML กำหนดรูปภาพที่ซ้อนตัวด้วยเส้นโค้ง

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

ด้วยการใช้เครื่องมือ 'ลองทดสอบเอง' ของเรา คุณสามารถแก้ไข SVG และกดปุ่มเพื่อดูผลลัพธ์

ตัวอย่าง SVG

<html>
<body>
<h1>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 Vector Graphics
  • SVG ใช้กำหนดรูปภาพเว็บที่ซ้อนตัวด้วยเส้นโค้ง
  • SVG รูปภาพที่กำหนดด้วย XML
  • SVG ทุกองค์ประกอบและทุกคุณสมบัติในไฟล์สามารถตั้งแอนิเมชันได้
  • SVG เป็นมาตรฐานแนะนำโดย W3C
  • SVG เฉพาะมาตรฐาน W3C อื่นๆ อย่างเช่น DOM และ XSL

SVG เป็นมาตรฐานแนะนำโดย W3C

SVG 1.0 กลายเป็นมาตรฐานแนะนำโดย W3C ในวันที่ 4 กันยายน 2001

SVG 1.1 กลายเป็นมาตรฐานแนะนำโดย W3C ในวันที่ 14 มกราคม 2003

SVG 1.1 (รุ่นที่ 2) กลายเป็นมาตรฐานแนะนำโดย W3C ในวันที่ 16 สิงหาคม 2011

SVG ข้อย่อยๆ ของมันคือ：

เมื่อเทียบกับรูปภาพแบบ JPEG และ GIF โดยที่ใช้ SVG ข้อย่อยๆ ของมันคือ：

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

สร้าง SVG รูปภาพ

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