ไฟล์ 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>

อ้างอิง

See Also