ไฟล์ SVG คืออะไร
ไฟล์ SVG คืออะไร?
ไฟล์ SVG เป็นไฟล์กราฟิกแบบเวกเตอร์สเกลาร์ที่ใช้รูปแบบข้อความ XML เพื่ออธิบายลักษณะที่ปรากฏของรูปภาพ คำว่า Scalable หมายถึงความจริงที่ว่า SVG สามารถปรับขนาดเป็นขนาดต่างๆ ได้โดยไม่สูญเสียคุณภาพใดๆ คำอธิบายที่เป็นข้อความของไฟล์ดังกล่าวทำให้เป็นอิสระจากความละเอียด เป็นหนึ่งในรูปแบบที่ใช้มากที่สุดสำหรับการสร้างเว็บไซต์และพิมพ์กราฟิกเพื่อให้สามารถปรับขนาดได้ รูปแบบสามารถใช้ได้กับกราฟิกสองมิติเท่านั้น ไฟล์ SVG สามารถดู/เปิดได้ในเบราว์เซอร์สมัยใหม่เกือบทั้งหมด รวมถึง Chrome, Internet Explorer, Firefox และ Safari
ประวัติย่อ
ข้อกำหนดของ SVG พร้อมใช้งานเป็นมาตรฐานแบบเปิดโดย World Wide Web Consortium (W3C) ตั้งแต่ปี 1999 ก่อนหน้านี้ ข้อกำหนดรูปแบบไฟล์ที่คล้ายกันในหกรูปแบบที่แตกต่างกันถูกส่งไปยัง W3C จนถึงปี 1998 การอัปเดตถูกนำไปใช้กับข้อกำหนดในปี 2011 และเป็นเวอร์ชัน 1.1 . ในปี 2559 SVG 2 ได้รับการเผยแพร่เป็นเวอร์ชันใหม่กว่า รวมถึงคุณลักษณะต่างๆ นอกเหนือจากใน SVG 1.1
ข้อมูลจำเพาะของรูปแบบไฟล์
SVG Document Object Model (DOM) วางรากฐานสำหรับข้อกำหนดและอินเทอร์เฟซทั้งหมดที่สอดคล้องกับส่วนเฉพาะของข้อกำหนด ผู้ดู SVG ต้องใช้อินเทอร์เฟซ SVG DOM ตามที่กำหนดไว้ในข้อกำหนดเฉพาะของ W3C DOM เปิดเผยอินเทอร์เฟซที่หลากหลายสำหรับประเภทข้อมูลและองค์ประกอบต่างๆ
รูปร่าง SVG
SVG มีองค์ประกอบรูปร่างที่กำหนดไว้ล่วงหน้าซึ่งนักพัฒนาสามารถใช้ได้:
- สี่เหลี่ยมผืนผ้า
- วงกลม
- วงรี
- เส้น
- โพลีไลน์
- รูปหลายเหลี่ยม
- เส้นทาง
ตามรูปร่างและข้อกำหนดเหล่านี้ พื้นที่การทำงานของ SVG มีดังต่อไปนี้
เส้นทาง - เส้นทางใช้เพื่อแสดงโครงร่างรูปทรงเรียบง่ายและรูปทรงประกอบ การเข้ารหัสใช้เพื่อกำหนดลักษณะการทำงาน ตัวอย่างเช่น M ใช้สำหรับ Move To, L ใช้สำหรับ Line To, Z ใช้สำหรับปิดเส้นทาง เป็นต้น
รูปทรงพื้นฐาน - เส้นทางเส้นตรงและเส้นทางที่ประกอบด้วยชุดของส่วนของเส้นตรงที่เชื่อมต่อกัน (เส้นหลายเส้น) รวมทั้งรูปหลายเหลี่ยมปิด วงกลม และวงรีสามารถวาดได้ สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมมุมมนเป็นองค์ประกอบมาตรฐานเช่นกัน
ข้อความ - การแสดงข้อความจะแสดงเป็นข้อมูลอักขระ XML ซึ่งสามารถใช้เอฟเฟ็กต์ภาพมากมายกับข้อความได้ ข้อกำหนดนี้อนุญาตให้จัดการข้อความสองทิศทาง ข้อความแนวตั้ง และอักขระตามเส้นทางโค้ง
การระบายสี - สามารถเติมรูปร่างและ/หรือร่างโครงร่างด้วยสี การไล่ระดับสี หรือลวดลาย ทำให้สามารถทำให้ทึบแสงหรือมีความโปร่งใสระดับใดก็ได้ คุณลักษณะปลายเส้น เช่น หัวลูกศรหรือสัญลักษณ์ที่ปรากฏที่จุดยอดของรูปหลายเหลี่ยมจะแสดงด้วยเครื่องหมาย
สี - ข้อกำหนด SVG อนุญาตให้ใช้สีกับองค์ประกอบ SVG ที่มองเห็นได้ทั้งหมด ไม่ว่าจะโดยตรงหรือผ่านการเติม การลากเส้น และคุณสมบัติอื่นๆ สามารถใช้รหัสสีต่างๆ เพื่อระบุ เช่น สีดำหรือสีน้ำเงิน การแสดงเลขฐานสิบหก ทศนิยม หรือเป็นเปอร์เซ็นต์ของรูปแบบ RGB
การไล่ระดับสีและรูปแบบ - รูปร่างในไฟล์ SVG สามารถเติมหรือจัดกรอบด้วยสีทึบ การไล่ระดับสี หรือรูปแบบการทำซ้ำ
เอฟเฟ็กต์ตัวกรอง - เป็นชุดการทำงานของกราฟิกที่ใช้กับกราฟิกเวกเตอร์ต้นฉบับเพื่อสร้างผลลัพธ์ที่แก้ไข
การโต้ตอบ - ผู้ใช้สามารถโต้ตอบกับไฟล์ SVG โดยเปลี่ยนโฟกัส คลิกเมาส์ เลื่อนหรือซูมภาพ การโต้ตอบช่วยให้รูปภาพ SVG โต้ตอบกับผู้ใช้ได้หลายวิธีตามที่กล่าวไว้ข้างต้น
การเชื่อมโยง - เป็นไปได้ที่รูปภาพ SVG จะมีไฮเปอร์ลิงก์ไปยังเอกสารอื่น สิ่งนี้ทำได้โดยใช้ XML Linking Language หรือ XLink สิ่งนี้ทำให้สามารถสร้างสถานะมุมมองเฉพาะที่ใช้ในการซูมเข้า/ออกจากพื้นที่เฉพาะ หรือเพื่อจำกัดมุมมองเฉพาะองค์ประกอบ
การเขียนสคริปต์ - คล้ายกับ HTML ทุกแง่มุมของเอกสาร SVG สามารถเข้าถึงได้สำหรับการจัดการโดยใช้สคริปต์ วัตถุ SVG DOM ให้คำแนะนำสำหรับการบรรลุสิ่งนี้โดยใช้องค์ประกอบและแอตทริบิวต์ SVG สคริปต์จะอยู่ในองค์ประกอบแท็ก script และสามารถเรียกใช้ตามเหตุการณ์ของตัวชี้ แป้นพิมพ์ หรือเอกสารได้ตามต้องการ
ภาพเคลื่อนไหว - องค์ประกอบ DOM , และ ให้คุณรวมแอนิเมชั่นสำหรับเนื้อหา SVG แน่นอนว่าสิ่งนี้ไม่สามารถทำได้โดยไม่ต้องใช้สคริปต์และตัวจับเวลาในตัว ภาพเคลื่อนไหวเหล่านี้สามารถต่อเนื่องและสามารถวนซ้ำได้ในขณะเดียวกันก็ตอบสนองต่อเหตุการณ์ของผู้ใช้
แบบอักษร - ข้อความใน SVG สามารถอ้างอิงไฟล์แบบอักษรภายนอก เช่น แบบอักษรของระบบ หากไม่มีแบบอักษรดังกล่าว ข้อความใน 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>
โค้ดบรรทัดต่อไปนี้แสดงวิธีใช้ บล็อกสำหรับแสดงข้อความเป็น SVG
<svg height#"30" width#"200">
<text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>