กวดวิชา 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