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