กราฟิก HTML

กราฟิก หน้าแรก

Google Maps

แนะนำแผนที่ แผนที่พื้นฐาน การวางซ้อนแผนที่ กิจกรรมของแผนที่ การควบคุมแผนที่ ประเภทแผนที่ แผนที่อ้างอิง

กวดวิชา SVG

บทนำ SVG SVG ใน HTML SVG สี่เหลี่ยมผืนผ้า SVG Circle SVG วงรี สาย SVG รูปหลายเหลี่ยม SVG SVG Polyline เส้นทาง SVG ข้อความ SVG SVG ลากเส้น บทนำตัวกรอง SVG เอฟเฟกต์เบลอ SVG SVG Drop Shadows SVG ลิเนียร์ SVG Radial ตัวอย่าง SVG ข้อมูลอ้างอิง SVG

กวดวิชาผ้าใบ

แนะนำผ้าใบ ภาพวาดบนผืนผ้าใบ พิกัดผ้าใบ ผ้าใบไล่โทนสี ข้อความผ้าใบ ภาพแคนวาส อ้างอิงผ้าใบ

นาฬิกาผ้าใบ

แนะนำนาฬิกา หน้าปัดนาฬิกา ตัวเลขนาฬิกา เข็มนาฬิกา นาฬิกาเริ่ม

เกม HTML

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

กวดวิชา SVG

SVG ย่อมาจาก Scalable Vector Graphics

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


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

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


SVG เป็นคำแนะนำของ W3C

SVG 1.0 กลายเป็นคำแนะนำของ W3C เมื่อวันที่ 4 กันยายน พ.ศ. 2544

SVG 1.1 กลายเป็นคำแนะนำของ W3C เมื่อวันที่ 14 มกราคม พ.ศ. 2546

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


ข้อดีของ SVG

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

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

การสร้างภาพ SVG

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