เอสวีจี

เอสวีจี (; "ภาพกราฟิกส์เวกเตอร์ปรับขนาดได้") เป็นภาพกราฟิกส์เวกเตอร์ที่ใช้ XML สำหรับกำหนดกราฟิกสองมิติโดยรองรับการโต้ตอบและภาพเคลื่อนไหว มาตรฐาน SVG เป็น มาตรฐานเปิด ที่พัฒนาโดย เวิลด์ไวด์เว็บคอนซอร์เทียม ตั้งแต่ปี 1999

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

การนำไปใช้ในช่วงแรกถูกจำกัดเนื่องจากขาดการสนับสนุนใน Internet Explorer เวอร์ชันเก่า อย่างไรก็ตาม ในปี 2011 เบราว์เซอร์เดสก์ท็อปหลักทั้งหมดเริ่มรองรับ SVG การรองรับเบราว์เซอร์แบบเนทีฟมีข้อดีหลายประการ เช่น ไม่ต้องใช้ปลั๊กอิน ช่วยให้สามารถผสมผสาน SVG กับเนื้อหาอื่น ๆ ได้ และปรับปรุงความน่าเชื่อถือในการเรนเดอร์และสคริปต์ การรองรับ SVG บนมือถือนั้นมีหลากหลายรูปแบบ โดยมีอุปกรณ์และเบราว์เซอร์ที่แตกต่างกันรองรับ SVG Tiny 1.1 หรือ 1.2 SVG สามารถผลิตได้โดยใช้โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์และเรนเดอร์เป็นรูปแบบแรสเตอร์ ในแอปพลิเคชันบนเว็บ Inline SVG อนุญาตให้ฝังเนื้อหา SVG ภายในเอกสาร HTML

แม้จะมีข้อดี แต่ SVG ก็อาจก่อให้เกิดความเสี่ยงด้านความปลอดภัยได้หากใช้กับรูปภาพ เนื่องจากสามารถโฮสต์สคริปต์หรือ CSS ได้ ซึ่งอาจนำไปสู่การโจมตีด้วยสคริปต์ข้ามไซต์หรือช่องโหว่อื่น ๆ

 ความเป็นมา 
SVG ได้รับการพัฒนาภายใน เวิลด์ไวด์เว็บคอนซอร์เทียม (World Wide Web Consortium, W3C) ตั้งแต่ปี 1999 หลังจากมีการส่งข้อเสนอการแข่งขันหกภาษาสำหรับภาษากราฟิกแบบเวกเตอร์ไปยังสมาคมระหว่างปี 1998 (ดูด้านล่าง)

คณะทำงาน SVG ในยุคแรก ๆ ตัดสินใจที่จะไม่พัฒนาผลงานเชิงพาณิชย์ใด ๆ แต่เพื่อสร้าง ภาษามาร์กอัป ใหม่ที่ได้รับแจ้งแต่ไม่ได้อิงจากภาษาใด ๆ เลย"Secret Origin of SVG". 

SVG ได้รับการพัฒนาโดย คณะทำงาน W3C SVG เริ่มต้นในปี 1998 หลังจากได้รับผลงานกราฟิกเวกเตอร์ที่แข่งขันกันหกรายการในปีนั้น:

 แผนผังเว็บจาก CCLRC
 PGML จาก Adobe Systems, IBM, Netscape และ Sun Microsystems
 VML โดย Autodesk, Hewlett-Packard, Macromedia, Microsoft และ Vision
 ภาษามาร์กอัปกราฟิกไฮเปอร์ (HGML) โดย Orange UK และ PRP
 WebCGM จาก Boeing, PTC, InterCAP Graphics Systems, Inso Corporation, CCLRC และ Xerox
 DrawML จาก Excosoft AB"Secret Origin of SVG". 

Chris Lilley จาก W3C เป็นประธานคณะทำงานในขณะนั้น

มาตรฐาน SVG ได้รับการอัปเดตเป็นเวอร์ชัน 1.1 ในปี 2011 Scalable Vector Graphics 2 กลายเป็น คำแนะนำสำหรับผู้สมัคร W3C เมื่อวันที่ 15 กันยายน 2016 SVG 2 รวมคุณสมบัติใหม่หลายประการ นอกเหนือจาก SVG 1.1 และ SVG Tiny 1.2

 เวอร์ชัน 1.x 

 SVG 1.0 กลายเป็น คำแนะนำของ W3C เมื่อวันที่ 4 กันยายน 2001
 SVG 1.1 กลายเป็นคำแนะนำของ W3C เมื่อวันที่ 14 มกราคม 2003 ข้อกำหนด SVG 1.1 ได้รับการทำให้เป็นโมดูลเพื่อให้สามารถกำหนดชุดย่อยเป็นโปรไฟล์ได้ นอกเหนือจากนี้ SVG 1.1 และ SVG 1.0 มีความแตกต่างน้อยมาก
 SVG Tiny และ SVG Basic (โปรไฟล์ SVG บนมือถือ) กลายเป็นคำแนะนำของ W3C เมื่อวันที่ 14 มกราคม 2003 สิ่งเหล่านี้ถูกอธิบายว่าเป็นโปรไฟล์ของ SVG 1.1 
 SVG Tiny 1.2 กลายเป็นคำแนะนำของ W3C เมื่อวันที่ 22 ธันวาคม 2008 ในตอนแรกมันถูกร่างเป็นโปรไฟล์ของ SVG เต็ม 1.2 ที่วางแผนไว้ (ซึ่งตั้งแต่นั้นมาถูกทิ้งเพื่อสนับสนุน SVG 2)  แต่ต่อมาได้รับการปรับโครงสร้างใหม่เป็นข้อกำหนดแบบสแตนด์อโลน โดยทั่วไปได้รับการสนับสนุนไม่ดี
 SVG 1.1 Second Edition ซึ่งรวมถึงข้อผิดพลาดและการชี้แจงทั้งหมด แต่ไม่มีฟีเจอร์ใหม่ใน SVG 1.1 ดั้งเดิมที่เผยแพร่เมื่อวันที่ 16 สิงหาคม 2011
 SVG Tiny 1.2 Portable/Secure ซึ่งเป็นชุดย่อยที่ปลอดภัยยิ่งขึ้นของโปรไฟล์ SVG Tiny 1.2 ที่เปิดตัวเป็นมาตรฐานร่าง IETF เมื่อวันที่ 29 กรกฎาคม 2020  มีชื่อเรียกอีกอย่างว่า SVG Tiny P/S SVG Tiny 1.2 Portable/Secure เป็นข้อกำหนดของมาตรฐานร่าง BIMI

 เวอร์ชัน 2 
SVG 2 ลบหรือเลิกใช้คุณลักษณะบางอย่างของ SVG 1.1 และรวมเอาคุณลักษณะใหม่จาก HTML5 และ รูปแบบแบบอักษร Web Open : 

 ตัวอย่างเช่น SVG 2 จะลบองค์ประกอบแบบอักษรหลายอย่าง เช่น glyph และ altGlyph (แทนที่ด้วยรูปแบบแบบอักษร WOFF)
 xml:space แอตทริบิวต์เลิกใช้แล้วเพื่อสนับสนุน CSS
 เพิ่มฟีเจอร์ HTML5 เช่น translate และ data-* แล้ว
 คุณสมบัติการจัดการข้อความจาก SVG Tiny 1.2 มีคำอธิบายประกอบว่าจะรวมไว้ด้วย แต่ยังไม่ได้ทำให้เป็นทางการในข้อความ  คุณสมบัติอื่นๆ ของ 1.2 นั้นถูกคัดสรรมาอย่างดี "Appendix K: Changes from SVG 1.1".  แต่ SVG 2 ไม่ใช่ชุดที่เหนือกว่าของ SVG Tiny 1.2 โดยทั่วไป

SVG 2 มาถึงขั้นตอนการแนะนำผู้สมัครเมื่อวันที่ 15 กันยายน 2016  และเวอร์ชันที่แก้ไขแล้วได้รับการเผยแพร่เมื่อวันที่ 7 สิงหาคม 2018 และ 4 ตุลาคม 2018  ร่างล่าสุดเผยแพร่เมื่อวันที่ 08 มีนาคม 2023

 คุณสมบัติ 
SVG รองรับการโต้ตอบ แอนิเมชั่น และความสามารถด้านกราฟิกที่หลากหลาย ทำให้เหมาะสำหรับทั้งโปรแกรมประยุกต์บนเว็บและสิ่งพิมพ์ ภาพ SVG สามารถบีบอัดได้ด้วยอัลกอริธึม gzip ส่งผลให้ไฟล์ SVGZ โดยทั่วไปมีขนาดเล็กกว่าต้นฉบับ 20-50% SVG ยังรองรับข้อมูลเมตา ซึ่งช่วยให้จัดทำดัชนี ค้นหา และดึงเนื้อหา SVG ได้ดียิ่งขึ้น

SVG อนุญาตให้ใช้วัตถุกราฟิกได้สามประเภท: รูปร่างกราฟิกแบบเวกเตอร์ (เช่น เส้นทางที่ประกอบด้วยเส้นตรงและเส้นโค้ง) รูปภาพบิตแมป และข้อความ ออบเจ็กต์กราฟิกสามารถจัดกลุ่ม จัดรูปแบบ แปลง และรวมเป็นออบเจ็กต์ ที่แสดงผล ก่อนหน้านี้ได้ ชุดคุณสมบัติประกอบด้วย การแปลง แบบซ้อน เส้นทางการตัด อัลฟ่ามาสก์ เอฟเฟกต์ฟิลเตอร์ และออบเจ็กต์เทมเพลต ภาพวาด SVG สามารถมีปฏิสัมพันธ์ และสามารถรวม ภาพเคลื่อนไหว กำหนดไว้ในองค์ประกอบ SVG XML หรือผ่านการ เขียนสคริปต์ ที่เข้าถึง SVG Document Object Model (DOM)

SVG ใช้ CSS สำหรับการจัดรูปแบบและ JavaScript สำหรับการเขียนสคริปต์ ข้อความ รวมถึงสากลวิวัตน์และเทศวิวัตน์ ที่ปรากฏเป็นข้อความธรรมดาภายใน SVG DOM ช่วยเพิ่ม ความสามารถในการเข้าถึง กราฟิก SVG"Scalable Vector Graphics (SVG) 1.1 (Second Edition)". 

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

 การเขียนสคริปต์และแอนิเมชัน 
ภาพวาด SVG สามารถเป็นไดนามิกและโต้ตอบได้ การปรับเปลี่ยนองค์ประกอบตามเวลาสามารถอธิบายได้ใน SMIL หรือสามารถตั้งโปรแกรมใน ภาษาสคริปต์ (เช่น JavaScript) W3C แนะนำ SMIL อย่างชัดเจนเป็นมาตรฐานสำหรับแอนิเมชั่นใน SVG

ชุด ตัวจัดการเหตุการณ์ ที่หลากหลาย เช่น "onmouseover" และ "onclick" สามารถกำหนดให้กับออบเจ็กต์กราฟิก SVG ใด ๆ เพื่อใช้การกระทำและเหตุการณ์ต่าง ๆ ได้

 โปรไฟล์มือถือ 
เนื่องจากความต้องการของอุตสาหกรรม โปรไฟล์มือถือสองโปรไฟล์จึงถูกนำมาใช้กับ SVG 1.1: SVG Tiny (SVGT) และ SVG Basic (SVGB)

สิ่งเหล่านี้เป็นส่วนย่อยของมาตรฐาน SVG ฉบับเต็ม ซึ่งส่วนใหญ่มีไว้สำหรับ ตัวแทนผู้ใช้ ที่มีความสามารถจำกัด โดยเฉพาะอย่างยิ่ง SVG Tiny ถูกกำหนดไว้สำหรับอุปกรณ์มือถือที่มีข้อจำกัดสูง เช่น โทรศัพท์มือถือ ; มันไม่รองรับสไตล์หรือการเขียนสคริปต์ SVG Basic ถูกกำหนดไว้สำหรับอุปกรณ์เคลื่อนที่ระดับสูง เช่น สมาร์ทโฟน

ในปี พ.ศ. 2546 3GPP ซึ่งเป็นกลุ่มมาตรฐานโทรคมนาคมระหว่างประเทศ ได้นำ SVG Tiny มาใช้เป็นรูปแบบสื่อกราฟิกแบบเวกเตอร์ที่จำเป็นสำหรับโทรศัพท์รุ่นต่อไป SVGT เป็นรูปแบบกราฟิกเวกเตอร์ที่จำเป็น และการรองรับ SVGB เป็นทางเลือกสำหรับ บริการข้อความมัลติมีเดีย (MMS) และบริการสตรีมมิ่งแบบสลับแพ็คเก็ต มันเป็นภายหลัง เพิ่มเป็นรูปแบบที่จำเป็นสำหรับกราฟิกแบบเวกเตอร์ใน ระบบย่อยมัลติมีเดีย IP 3GPP (IMS)

โปรไฟล์มือถือทั้งสองไม่รองรับ Document Object Model (DOM) แบบเต็ม ในขณะที่มีเพียง SVG Basic เท่านั้นที่มีตัวเลือกการสนับสนุนสำหรับการเขียนสคริปต์ แต่เนื่องจากเป็นชุดย่อยที่เข้ากันได้อย่างสมบูรณ์ของมาตรฐานเต็มรูปแบบ กราฟิก SVG ส่วนใหญ่จึงยังสามารถเรนเดอร์โดยอุปกรณ์ที่รองรับเฉพาะ โปรไฟล์มือถือ

SVGT 1.2 เพิ่ม microDOM (μDOM) การออกแบบและการเขียนสคริปต์"SVG Tiny 1.2".  SVGT 1.2 ยังมีคุณสมบัติบางอย่างที่ไม่มีใน SVG 1.1 รวมถึงเส้นที่ไม่ปรับขนาด ซึ่งได้รับการสนับสนุนโดยการใช้งาน SVG 1.1 บางอย่าง เช่น Opera, Firefox และ WebKit เมื่อฐานโค้ดที่ใช้ร่วมกันระหว่างเบราว์เซอร์เดสก์ท็อปและมือถือเพิ่มขึ้น การใช้ SVG 1.1 บน SVGT 1.2 ก็เพิ่มขึ้นเช่นกัน

 การบีบอัด 
รูปภาพ SVG ซึ่งเป็นรูปแบบ XML ประกอบด้วยส่วนของข้อความที่ซ้ำกันจำนวนมาก ดังนั้นจึงเหมาะอย่างยิ่งสำหรับอัลกอริธึม การบีบอัดข้อมูลแบบไม่สูญเสียข้อมูล เมื่อรูปภาพ SVG ถูกบีบอัดด้วยอัลกอริธึม gzip รูปภาพนั้นจะถูกเรียกว่ารูปภาพ "SVGZ" และใช้นามสกุลไฟล์ .svgz ที่เกี่ยวข้อง ผู้ดู SVG 1.1 จะแสดงภาพที่บีบอัดSee  which states, "SVG implementations must correctly support gzip-encoded [RFC1952] and deflate-encoded [RFC1951] data streams, for any content type (including SVG, script files, images)." โดยทั่วไปไฟล์ SVGZ จะมีขนาด 20 ถึง 50 เปอร์เซ็นต์ของขนาดต้นฉบับ W3C มีไฟล์ SVGZ เพื่อทดสอบความสอดคล้องFor example, 

 ความปลอดภัย 
เนื่องจาก SVG เป็นรูปแบบเอกสาร ซึ่งคล้ายกับ HTML จึงทำให้ HTML สามารถโฮสต์สคริปต์หรือ CSS ได้ นี่เป็นปัญหาเมื่อผู้โจมตีสามารถอัปโหลดไฟล์ SVG ไปยังเว็บไซต์ เช่น รูปโปรไฟล์ และไฟล์นั้นถือเป็นภาพปกติ แต่มีเนื้อหาที่เป็นอันตราย ตัวอย่างเช่น หากไฟล์ SVG ถูกปรับใช้เป็นภาพพื้นหลัง CSS หรือโลโก้บนเว็บไซต์บางแห่ง หรือในแกลเลอรีรูปภาพบางแห่ง เมื่อรูปภาพถูกโหลดในเบราว์เซอร์ ไฟล์นั้นจะเปิดใช้งานสคริปต์หรือเนื้อหาอื่น ๆ สิ่งนี้สามารถล็อคเบราว์เซอร์ (การโจมตีหัวเราะพันล้าน) แต่ยังอาจนำไปสู่ การฉีด HTML และการโจมตี สคริปต์ข้ามไซต์ W3C จึงกำหนดข้อกำหนดบางประการเมื่อมีการใช้ SVG สำหรับรูปภาพ: SVG Security

W3C ระบุว่า Inline SVG (ไฟล์ SVG ที่โหลดบนเว็บไซต์) ถือว่ามีความเสี่ยงด้านความปลอดภัยน้อยกว่า เนื่องจากเนื้อหาเป็นส่วนหนึ่งของเอกสารที่มีขนาดใหญ่กว่า ดังนั้นการเขียนสคริปต์และ CSS จึงไม่ใช่เรื่องที่ไม่คาดคิด"SVG Security - W3C Wiki". 

 งานที่เกี่ยวข้อง 
มาตรฐาน MPEG-4 ตอนที่ 20 - การแสดงฉากแอปพลิเคชันน้ำหนักเบา (LASeR) และรูปแบบการรวมกลุ่มอย่างง่าย (SAF) อิงจาก SVG Tiny  ได้รับการพัฒนาโดย MPEG ( ISO/IEC JTC 1 /SC29/WG11) และเผยแพร่เป็น ISO/IEC 14496-20:2006  ความสามารถของ SVG ได้รับการปรับปรุงใน MPEG-4 ตอนที่ 20 ด้วยคุณสมบัติหลักสำหรับบริการมือถือ เช่น การอัปเดตแบบไดนามิก การเข้ารหัสไบนารี การแสดงแบบอักษรที่ล้ำสมัย  SVG ยังได้รับการรองรับใน MPEG-4 ตอนที่ 11 ใน รูปแบบ Extensible MPEG-4 Textual (XMT) ซึ่งเป็นการแสดงข้อความของเนื้อหามัลติมีเดีย MPEG-4 โดยใช้ XML 

 ดูเพิ่ม 

 องค์ประกอบแคนวาส
 เปรียบเทียบรูปแบบไฟล์กราฟิก
 การเปรียบเทียบซอฟต์แวร์แปลงแรสเตอร์เป็นเวกเตอร์
 การเปรียบเทียบโปรแกรมแก้ไขกราฟิกแบบเวกเตอร์
 คอมพิวเตอร์กราฟิกส์
 เมตาไฟล์กราฟิกคอมพิวเตอร์
 รูปแบบไฟล์ภาพ
 ความละเอียดอิสระ

 อ้างอิง 

 แหล่งข้อมูลอื่น 
  specifications, list of implementations
 W3C SVG primer W3C Primer (ฉบับร่าง) under auspices of SVG Interest Group
 MDN - SVG: Scalable Vector Graphics

หมวดหมู่:มาตรฐานเวิลด์ไวด์เว็บคอนซอร์เทียม
หมวดหมู่:รูปแบบไฟล์ภาพกราฟิกส์
หมวดหมู่:รูปแบบไฟล์คอมพิวเตอร์