เอสวีจี
นามสกุลไฟล์	.svg,.svgz
สื่อประเภทอินเทอร์เน็ต	image/svg+xml[ 1 ] [ 2 ]
ตัวระบุประเภทมาตรฐาน (UTI)	public.svg-image
พัฒนาโดย	ดับเบิลยู3ซี
การเผยแพร่ครั้งแรก	4 กันยายน 2544 ( 4 กันยายน 2544 )
รุ่นล่าสุด	1.1 (ฉบับที่สอง) 16 สิงหาคม 2554 ( 16 สิงหาคม 2554 )
ประเภทของรูปแบบ	กราฟิกเวกเตอร์
ขยายจาก	อีเอ็มแอลอี
มาตรฐาน	W3C SVG
รูปแบบเปิด ?	ใช่
เว็บไซต์	www.w3.org/Graphics/SVG/​​​​​

Scalable Vector Graphics ( SVG ) เป็น รูปแบบ กราฟิกเวกเตอร์แบบXMLสำหรับกำหนด กราฟิก สองมิติโดยรองรับการโต้ตอบและแอนิเมชัน ข้อกำหนด SVG เป็นมาตรฐานเปิดที่พัฒนาโดยWorld Wide Web Consortiumตั้งแต่ปี 1999

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

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

กลุ่มทำงาน SVG ในช่วงแรกตัดสินใจที่จะไม่พัฒนาข้อเสนอเชิงพาณิชย์ใดๆ แต่จะสร้างภาษามาร์กอัป ใหม่ ที่ได้รับข้อมูลจาก แต่ไม่ได้อิงตามข้อเสนอเหล่านั้นโดยตรง^{[ 3 ]}

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

• แผนผังเว็บ จากCCLRC ^{[ 4 ]}
• PGMLจากAdobe Systems , IBM , NetscapeและSun Microsystems ^{[ 5 ]}
• VMLโดยAutodesk , Hewlett-Packard , Macromedia , MicrosoftและVision ^{[ 6 ]}
• ภาษา Hyper Graphics Markup Language (HGML) โดยOrange UKและPRP ^{[ 7 ]}
• WebCGMจากBoeing , PTC , InterCAP Graphics Systems, Inso Corporation , CCLRCและXerox ^{[ 8 ]}
• DrawML จาก Excosoft AB ^{[ 3 ]}

ในขณะนั้น คริส ลิลลีย์จาก W3C เป็นประธานคณะทำงานดัง กล่าว

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

ข้อกำหนด SVG ได้รับการอัปเดตเป็นเวอร์ชัน 1.1 ในปี 2011 Scalable Vector Graphics 2 กลายเป็นW3C Candidate Recommendationเมื่อวันที่ 15 กันยายน 2016 SVG 2 มีคุณสมบัติใหม่หลายอย่างเพิ่มเติมจากคุณสมบัติของ SVG 1.1 และ SVG Tiny 1.2 ^{[ 9 ]}

• SVG 1.0 กลายเป็นข้อแนะนำของ W3Cเมื่อวันที่ 4 กันยายน พ.ศ. 2544 ^{[ 10 ]}
• SVG 1.1 กลายเป็นข้อแนะนำของ W3C เมื่อวันที่ 14 มกราคม พ.ศ. 2546 ^{[ 11 ]}ข้อกำหนด SVG 1.1 ได้รับการแบ่งเป็นโมดูลเพื่อให้สามารถกำหนดชุดย่อยเป็นโปรไฟล์ได้ นอกเหนือจากนี้แล้ว ยังมีความแตกต่างเพียงเล็กน้อยระหว่าง SVG 1.1 และ SVG 1.0
  • SVG TinyและSVG Basic (Mobile SVG Profiles) กลายเป็นข้อแนะนำของ W3C เมื่อวันที่ 14 มกราคม พ.ศ. 2546 โดยได้รับการอธิบายว่าเป็นโปรไฟล์ของ SVG 1.1 ^{[ 12 ]}
• SVG Tiny 1.2 กลายเป็นข้อแนะนำของ W3C เมื่อวันที่ 22 ธันวาคม พ.ศ. 2551 ^{[ 13 ]}เดิมทีร่างขึ้นเป็นโปรไฟล์ของ SVG Full 1.2 ที่วางแผนไว้ (ซึ่งต่อมาถูกยกเลิกและแทนที่ด้วย SVG 2) ^{[ 14 ]}แต่ต่อมาได้รับการปรับปรุงใหม่ให้เป็นข้อกำหนดแบบสแตนด์อโลน โดยทั่วไปแล้วได้รับการสนับสนุนค่อนข้างน้อย
• SVG 1.1 ฉบับที่สอง ซึ่งรวมการแก้ไขข้อผิดพลาดและการชี้แจงทั้งหมด แต่ไม่มีคุณสมบัติใหม่เพิ่มเติมจาก SVG 1.1 เดิม ได้รับการเผยแพร่เมื่อวันที่ 16 สิงหาคม 2554 ^{[ 15 ]}
• SVG Tiny 1.2 Portable/Secure ซึ่งเป็นชุดย่อยที่มีความปลอดภัยมากกว่าของโปรไฟล์ SVG Tiny 1.2 ที่ได้รับการแนะนำเป็นมาตรฐานร่างของ IETF เมื่อวันที่ 29 กรกฎาคม 2020 ^{[ 16 ]}หรือที่รู้จักกันในชื่อ SVG Tiny P/S SVG Tiny 1.2 Portable/Secure เป็นข้อกำหนดของมาตรฐานร่างBIMI ^{[ 17 ]}

SVG 2 ลบหรือยกเลิกคุณสมบัติบางอย่างของ SVG 1.1 และรวมคุณสมบัติใหม่จากHTML5และWeb Open Font Format (WOFF) ไว้ด้วย: ^{[ 18 ]}

• ตัวอย่างเช่น SVG 2 ลบองค์ประกอบฟอนต์หลายอย่าง เช่นglyphและaltGlyph(แทนที่ด้วย WOFF)
• คุณสมบัติ นี้xml:spaceเลิกใช้แล้ว และควรใช้ CSS แทน
• มีการเพิ่มคุณสมบัติของ HTML5 เช่นtranslateและ แอตทริบิวต์ต่างๆdata-*
• คุณสมบัติการจัดการข้อความจาก SVG Tiny 1.2 ได้รับการระบุว่าจะรวมอยู่ด้วย แต่ยังไม่ได้กำหนดเป็นข้อความอย่างเป็นทางการ^{[ 19 ]}คุณสมบัติอื่นๆ ของ 1.2 บางส่วนได้รับการเลือกสรร^{[ 18 ]}แต่ SVG 2 ไม่ใช่ซูเปอร์เซ็ตของ SVG Tiny 1.2 โดยทั่วไป

SVG 2 เข้าสู่ขั้นตอนคำแนะนำของผู้สมัครเมื่อวันที่ 15 กันยายน 2016 ^{[ 20 ]}และฉบับแก้ไขได้รับการเผยแพร่เมื่อวันที่ 7 สิงหาคม 2018 และ 4 ตุลาคม 2018 ^{[ 21 ]}ฉบับร่างล่าสุดได้รับการเผยแพร่เมื่อวันที่ 14 กันยายน 2025 ^{[ 22 ]}

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

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

SVG ใช้CSSสำหรับการจัดรูปแบบและJavaScriptสำหรับการเขียนสคริปต์ ข้อความ รวมถึงการทำให้เป็นสากลและการแปลเป็นภาษาท้องถิ่นซึ่งปรากฏในรูปแบบข้อความธรรมดาภายใน SVG DOM ช่วยเพิ่มการเข้าถึงกราฟิก SVG ^{[ 15 ]}

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

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

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

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

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

ในปี พ.ศ. 2546 3GPPซึ่งเป็นกลุ่มมาตรฐานโทรคมนาคมระหว่างประเทศ ได้นำ SVG Tiny มาใช้เป็นรูปแบบสื่อกราฟิกเวกเตอร์บังคับสำหรับโทรศัพท์รุ่นต่อไป SVGT เป็นรูปแบบกราฟิกเวกเตอร์ที่จำเป็น และการรองรับ SVGB เป็นทางเลือกสำหรับMultimedia Messaging Service (MMS) และ Packet-switched Streaming Service ^{[ 26 ] [ 27 ] [ 28 ]}ต่อมาได้มีการเพิ่มเป็นรูปแบบที่จำเป็นสำหรับกราฟิกเวกเตอร์ใน 3GPP IP Multimedia Subsystem (IMS) ^{[ 29 ]}

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

SVGT 1.2 เพิ่ม microDOM (μDOM) การจัดสไตล์ และการเขียนสคริปต์^{[ 25 ]} 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 ที่ได้มาตรฐานจะแสดงรูปภาพที่ถูกบีบอัด^{[ 31 ]}ไฟล์ SVGZ โดยทั่วไปจะมีขนาด 20 ถึง 50 เปอร์เซ็นต์ของขนาดดั้งเดิม^{[ 32 ]} W3C จัดเตรียมไฟล์ SVGZ เพื่อทดสอบการปฏิบัติตามมาตรฐาน^{[ 33 ]}

ข้อกำหนด SVG 1.1 กำหนดพื้นที่การทำงานหรือชุดคุณลักษณะ 14 รายการ: ^{[ 11 ]}

เส้นทาง

รูปทรงพื้นฐานหรือรูปทรงผสมจะถูกวาดด้วยเส้นโค้งหรือเส้นตรง ซึ่งสามารถเติมสี กำหนดขอบเขต หรือใช้เป็นเส้นตัดได้เส้นทางเหล่านี้มีการเขียนโค้ดที่กระชับ

ตัวอย่างเช่นM(สำหรับ "ย้ายไปยัง") จะนำหน้าพิกัด ตัวเลข xและy เริ่มต้น และ(สำหรับ "ลากเส้นไปยัง") จะนำหน้าจุดที่จะลากเส้นไป นอกจากนี้ ตัวอักษรคำสั่งเพิ่มเติม ( , , , , และ) จะนำหน้าข้อมูลที่ใช้ในการวาด เส้นโค้ง Bézierและเส้นโค้งวงรี ต่างๆ ใช้สำหรับปิดเส้นทางLCSQTAZ

ในทุกกรณี พิกัดสัมบูรณ์จะตามหลังคำสั่งตัวพิมพ์ใหญ่ และพิกัดสัมพัทธ์จะใช้ตามหลังตัวพิมพ์เล็กที่เทียบเท่ากัน^{[ 34 ]}

รูปทรงพื้นฐาน

สามารถวาดเส้นทางเส้นตรงและเส้นทางที่ประกอบด้วยส่วนของเส้นตรงที่เชื่อมต่อกัน (โพลีไลน์) รวมถึงรูปหลายเหลี่ยมปิด วงกลม และวงรีได้ นอกจากนี้ สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมผืนผ้ามุมโค้งมนก็เป็นองค์ประกอบมาตรฐานเช่นกัน^{[ 35 ]}

ข้อความ

ข้อความอักขระ Unicode ที่รวมอยู่ในไฟล์ SVG จะแสดงเป็น ข้อมูลอักขระ XMLเอฟเฟกต์ภาพหลายอย่างเป็นไปได้ และข้อกำหนด SVG จะจัดการข้อความแบบสองทิศทางโดยอัตโนมัติ (เช่น สำหรับการประกอบข้อความภาษาอังกฤษและภาษาอาหรับ) ข้อความแนวตั้ง (เช่น ภาษาจีนหรือภาษาญี่ปุ่น) และอักขระตามเส้นโค้ง (เช่น ข้อความรอบขอบตราประทับใหญ่ของสหรัฐอเมริกา ) ^{[ 36 ]}

จิตรกรรม

รูปทรง SVG สามารถเติมสีและใส่เส้นขอบ (ระบายสี ไล่ระดับสี หรือลวดลาย) ได้ สีที่เติมอาจเป็นสีทึบหรือมีความโปร่งใสในระดับใดก็ได้

"เครื่องหมาย" คือคุณลักษณะปลายเส้น เช่น หัวลูกศร หรือสัญลักษณ์ที่สามารถปรากฏที่จุดยอดของรูปหลายเหลี่ยม^{[ 37 ]}

สี

สามารถใช้สีกับองค์ประกอบ SVG ที่มองเห็นได้ทั้งหมด ไม่ว่าจะโดยตรงหรือผ่าน คุณสมบัติ fill, stroke, และคุณสมบัติอื่นๆ สีจะถูกระบุในลักษณะเดียวกับในCSS2กล่าวคือ ใช้ชื่อเช่นblackหรือblueในรูปแบบเลขฐานสิบหกเช่น#2f0หรือ#22ff00ในรูปแบบเลขฐานสิบ เช่นrgb(255,255,127)หรือเป็นเปอร์เซ็นต์ในรูปrgb(100%,100%,50%)แบบ^{[ 38 ]}

การไล่ระดับสีและลวดลาย

รูปทรง SVG สามารถเติมหรือกำหนดเส้นขอบด้วยสีทึบดังที่แสดงด้านบน หรือด้วยการไล่ระดับสีหรือด้วยลวดลายที่ซ้ำกัน การไล่ระดับสีสามารถเป็นแบบเส้นตรงหรือแบบรัศมี (วงกลม) และสามารถใช้สีได้จำนวนเท่าใดก็ได้ รวมถึงการทำซ้ำด้วย นอกจากนี้ยังสามารถระบุการไล่ระดับสีความทึบได้อีกด้วย ลวดลายจะอิงตามวัตถุกราฟิกแบบแรสเตอร์หรือเวกเตอร์ที่กำหนดไว้ล่วงหน้า ซึ่งสามารถทำซ้ำได้ใน ทิศทาง xต่างๆyการไล่ระดับสีและลวดลายสามารถสร้างภาพเคลื่อนไหวและสคริปต์ได้^{[ 39 ]}

ตั้งแต่ปี 2008 มีการพูดคุยกัน^{[ 40 ] [ 41 ]}ในหมู่ผู้ใช้ SVG มืออาชีพว่า สามารถเพิ่ม gradient meshesหรือdiffusion curvesลงในข้อกำหนด SVG ได้อย่างมีประโยชน์ มีการกล่าวว่า "การแสดงผลแบบง่ายๆ [โดยใช้ diffusion curves] สามารถแสดงผลการแรเงาที่ละเอียดอ่อนมากได้" ^{[ 42 ]}และ "ภาพ diffusion curve มีคุณภาพและประสิทธิภาพการเขียนโค้ดเทียบเท่ากับ gradient meshes แต่สร้างได้ง่ายกว่า (ตามที่ศิลปินหลายคนที่เคยใช้ทั้งสองเครื่องมือกล่าวไว้) และสามารถจับภาพจากบิตแมปได้โดยอัตโนมัติอย่างสมบูรณ์" ^{[ 43 ]}ร่างปัจจุบันของ SVG 2 มี gradient meshes รวมอยู่ด้วย^{[ 44 ]}

การตัด การมาสก์ และการประกอบภาพ

องค์ประกอบกราฟิก รวมถึงข้อความ เส้นทาง รูปทรงพื้นฐาน และการผสมผสานของสิ่งเหล่านี้ สามารถใช้เป็นโครงร่างเพื่อกำหนดทั้ง บริเวณ ภายในและภายนอก ที่สามารถระบายสี (ด้วยสี การไล่ระดับสี และลวดลาย) ได้อย่างอิสระ เส้นทางการตัดที่ทึบแสงทั้งหมดและมาสก์ โปร่งแสงบางส่วน จะถูกรวมเข้าด้วยกันเพื่อคำนวณสีและความทึบแสงของทุกพิกเซลของภาพสุดท้ายโดยใช้การผสมอัลฟา^{[ 45 ]}

เอฟเฟกต์ตัวกรอง^{[ 46 ]}

เอฟเฟ็กต์ฟิลเตอร์ประกอบด้วยชุดของการดำเนินการทางกราฟิกที่ใช้กับภาพเวกเตอร์ต้นฉบับที่กำหนด เพื่อสร้างผลลัพธ์แบบบิตแมปที่ ได้รับการดัดแปลง

ปฏิสัมพันธ์

รูปภาพ SVG สามารถโต้ตอบกับผู้ใช้ได้หลายวิธี นอกเหนือจากไฮเปอร์ลิงก์ดังที่กล่าวไว้ด้านล่างแล้ว ส่วนใดส่วนหนึ่งของรูปภาพ SVG ยังสามารถตอบสนองต่อเหตุการณ์ อินเทอร์เฟซผู้ใช้ได้ เช่น การเปลี่ยนแปลงโฟกัสการคลิกเมาส์ การเลื่อนหรือการซูมภาพ และเหตุการณ์ตัวชี้ แป้นพิมพ์ และเอกสารอื่นๆ ตัวจัดการเหตุการณ์อาจเริ่มต้น หยุด หรือเปลี่ยนแปลงแอนิเมชัน ตลอดจนเรียกใช้สคริปต์เพื่อตอบสนองต่อเหตุการณ์ดังกล่าว^{[ 47 ]}

การเชื่อมโยง

รูปภาพ SVG สามารถมีไฮเปอร์ลิงก์ไปยังเอกสารอื่นได้โดยใช้XLinkโดยการใช้<view>ส่วนประกอบหรือตัวระบุส่วนย่อย URL สามารถเชื่อมโยงไปยังไฟล์ SVG ที่เปลี่ยนแปลงพื้นที่ที่มองเห็นได้ของเอกสาร ซึ่งช่วยให้สามารถสร้างสถานะการมองเห็นเฉพาะที่ใช้ในการซูมเข้า/ออกในพื้นที่เฉพาะหรือจำกัดการมองเห็นเฉพาะองค์ประกอบใดองค์ประกอบหนึ่งได้ สิ่งนี้มีประโยชน์เมื่อสร้างสไปรท์การ สนับสนุน XLinkร่วมกับ<use>ส่วนประกอบยังช่วยให้สามารถเชื่อมโยงและนำส่วนประกอบภายในและภายนอกกลับมาใช้ใหม่ได้ ซึ่งช่วยให้นักเขียนโค้ดสามารถทำงานได้มากขึ้นด้วยมาร์กอัปที่น้อยลงและทำให้โค้ดสะอาดขึ้น^{[ 48 ]}

การเขียนสคริปต์

ทุกแง่มุมของเอกสาร SVG สามารถเข้าถึงและจัดการได้โดยใช้สคริปต์ในลักษณะเดียวกับ HTML ภาษาสคริปต์เริ่มต้นคือJavaScriptและมี วัตถุ Document Object Model (DOM) ที่กำหนดไว้สำหรับองค์ประกอบและแอตทริบิวต์ SVG ทุกรายการ สคริปต์จะถูกล้อมรอบด้วยองค์ประกอบ สคริปต์<script>สามารถทำงานได้เพื่อตอบสนองต่อเหตุการณ์ตัวชี้ เหตุการณ์แป้นพิมพ์ และเหตุการณ์เอกสารตามที่ต้องการ^{[ 49 ]}

แอนิเมชั่น

เนื้อหา SVG สามารถสร้างแอนิเมชั่นได้โดยใช้ส่วนประกอบแอนิเมชั่นในตัว เช่น<animate><div>, <div> <animateMotion>และ<animateColor><div> เนื้อหาสามารถสร้างแอนิเมชั่นได้โดยการจัดการ DOM โดยใช้ ECMAScript และตัวจับเวลาในตัวของภาษาสคริปต์ แอนิเมชั่น SVG ได้รับการออกแบบให้เข้ากันได้กับSynchronized Multimedia Integration Language (SMIL) เวอร์ชันปัจจุบันและเวอร์ชันในอนาคต แอนิเมชั่นสามารถต่อเนื่อง วนซ้ำ และตอบสนองต่อเหตุการณ์ของผู้ใช้ได้ ดังที่กล่าวไว้ข้างต้น^{[ 50 ]}

แบบอักษร

เช่นเดียวกับ HTML และ CSS ข้อความใน SVG อาจอ้างอิงไฟล์ฟอนต์ภายนอก เช่น ฟอนต์ของระบบ หากไฟล์ฟอนต์ที่จำเป็นไม่มีอยู่ในเครื่องที่แสดงผลไฟล์ SVG ข้อความอาจไม่ปรากฏตามที่ตั้งใจไว้ เพื่อเอาชนะข้อจำกัดนี้ สามารถแสดงข้อความในฟอนต์ SVG ได้ โดยที่สัญลักษณ์ ที่จำเป็น จะถูกกำหนดไว้ใน SVG เป็นฟอนต์ จากนั้นจึงอ้างอิงจาก<text>องค์ประกอบ^{[ 51 ]}

เมตาเดตา

ตาม แนวคิด Semantic WebของW3C นั้น SVG อนุญาตให้ผู้เขียนให้ข้อมูลเมตาเกี่ยวกับเนื้อหา SVG ได้ ฟังก์ชันหลักคือองค์ประกอบ <metadata> ซึ่งสามารถอธิบายเอกสารโดยใช้ คุณสมบัติข้อมูลเมตา ของ Dublin Core (เช่น ชื่อเรื่อง ผู้สร้าง/ผู้เขียน หัวข้อ คำอธิบาย ฯลฯ) นอกจากนี้ยังสามารถใช้รูปแบบข้อมูลเมตาอื่นๆ ได้อีกด้วย ยิ่งไปกว่านั้น SVG ยังกำหนด องค์ประกอบ <metadata> และ<metadata> ซึ่งผู้เขียนสามารถให้ข้อมูลรายละเอียดที่เป็นข้อความธรรมดาภายในภาพ SVG เพื่อช่วยในการจัดทำดัชนี การค้นหา และการเรียกค้นข้อมูลด้วยวิธีการต่างๆ^{[ 52 ]}<metadata><title><desc>

เอกสาร SVG สามารถกำหนดส่วนประกอบต่างๆ ได้ เช่น รูปร่าง การไล่ระดับสี ฯลฯ และนำมาใช้ซ้ำได้ นอกจากนี้ รูปภาพ SVG ยังสามารถมีกราฟิกแบบแรสเตอร์เช่น รูปภาพ PNGและJPEGรวมทั้งรูปภาพ SVG เพิ่มเติมได้อีกด้วย

โค้ดนี้จะสร้างรูปทรงสีต่างๆ ตามที่แสดงในภาพ โดยไม่รวมตารางและป้ายกำกับ:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width= "391" height= "391" viewBox= "-70.5 -70.5 391 391" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" > <rect fill= "#fff" stroke= "#000" x= "-70" y= "-70" width= "390" height= "390" /> <g opacity= "0.8" > <rect <circle cx = "125" cy= "125" r= "75" fill= " orange " /> <polyline points = "50,150 50,200 200,200 200,100" stroke= "red" stroke - width = " 4" fill = "none " / > < line x1 = " 50" y1= "50" x2 = " 200 " y2 = " 200 " stroke = " blue" stroke-width= " 4" /> </g> </svg>

การใช้งาน SVG บนเว็บนั้นมีข้อจำกัดเนื่องจาก Internet Explorer (IE) เวอร์ชันเก่าไม่รองรับเว็บไซต์หลายแห่งที่ให้บริการภาพ SVG ก็ยังให้บริการภาพในรูปแบบแรสเตอร์ ด้วย เช่นกัน ไม่ว่าจะโดยอัตโนมัติผ่านการเจรจาเนื้อหาHTTP หรือโดยอนุญาตให้ผู้ใช้เลือกไฟล์โดยตรง

Konquerorเป็นเบราว์เซอร์แรกที่รองรับ SVG ในเวอร์ชัน 3.2 ในเดือนกุมภาพันธ์ พ.ศ. 2547 ^{[ 53 ]}ณ ปี พ.ศ. 2554 เบราว์เซอร์เดสก์ท็อปหลักๆ ทั้งหมด และเบราว์เซอร์รองๆ อีกมากมาย มีการรองรับ SVG ในระดับหนึ่ง การใช้งานของเบราว์เซอร์อื่นๆ ยังไม่สมบูรณ์ โปรดดูการเปรียบเทียบเอ็นจิ้นการจัดวางสำหรับรายละเอียดเพิ่มเติม

Firefox เวอร์ชันก่อนหน้าบางเวอร์ชัน (เช่น เวอร์ชันระหว่าง 1.5 ถึง 3.6 ^{[ 54 ]} ) รวมถึงเว็บเบราว์เซอร์อื่นๆ ที่ล้าสมัยแล้วบางเบราว์เซอร์ที่สามารถแสดงกราฟิก SVG ได้ จำเป็นต้องฝังภาพเหล่านั้นไว้ใน องค์ประกอบ <img> <object>หรือ<iframe><img>เพื่อแสดงผลแบบบูรณาการเป็นส่วนหนึ่งของหน้าเว็บ HTML แทนที่จะใช้วิธีมาตรฐานในการรวมภาพด้วย <img> <img>[ ^{55 ] อย่างไรก็ตาม}สามารถรวมภาพ SVG ไว้ในหน้า XHTML ได้โดยใช้ เนมสเป ซXML ^{[ 56 ]}

Tim Berners-Leeผู้คิดค้นเวิลด์ไวด์เว็บวิจารณ์ Internet Explorer เวอร์ชันแรกๆ ว่าไม่รองรับ SVG ^{[ 57 ]}

• Opera (ตั้งแต่เวอร์ชัน 8.0) รองรับมาตรฐาน SVG 1.1 Tiny ในขณะที่ Opera 9 รองรับ SVG 1.1 Basic และ SVG 1.1 Full บางส่วน ส่วน Opera 9.5 รองรับ SVG Tiny 1.2 บางส่วน และยังรองรับ SVGZ (SVG แบบบีบอัด) อีกด้วย
• เบราว์เซอร์ที่ใช้เอนจินการจัดวางGecko (เช่นFirefox , Flock , CaminoและSeaMonkey ) ต่างก็มีการรองรับข้อกำหนด SVG 1.1 Full ไม่สมบูรณ์มาตั้งแต่ปี 2005 เว็บไซต์ของ Mozilla มีภาพรวมของโมดูลที่รองรับใน Firefox ^{[ 58 ]}และโมดูลที่อยู่ระหว่างการพัฒนา^{[ 59 ]} Gecko 1.9 ซึ่งรวมอยู่ในFirefox 3.0เพิ่มการรองรับข้อกำหนด SVG เพิ่มเติม (รวมถึงตัวกรอง) ^{[ 60 ]}
• Pale Moonซึ่งใช้ เอนจินการจัดวางภาพ Goanna (ซึ่งเป็นเวอร์ชันดัดแปลงของ เอนจิน Gecko ) รองรับไฟล์ SVG
• เบราว์เซอร์ที่ใช้WebKit (เช่นSafariของApple , Google ChromeและOmniWebของThe Omni Group ) มีการรองรับข้อกำหนด SVG 1.1 Full ไม่สมบูรณ์มาตั้งแต่ปี 2006 ^{[ 61 ]}
• Amayaรองรับไฟล์ SVG เพียงบางส่วน
• Internet Explorer 8และเวอร์ชันเก่ากว่าไม่รองรับ SVG ^{[ 62 ] [ 63 ]} IE9 (วางจำหน่ายเมื่อวันที่ 14 มีนาคม 2011) รองรับชุดคุณสมบัติพื้นฐานของ SVG ^{[ 64 ]} IE10 ขยายการรองรับ SVG โดยเพิ่มตัวกรอง SVG 1.1 ^{[ 65 ]}
• Microsoft Edge Legacyรองรับ SVG 1.1 ^{[ 66 ]}
• โปรแกรมMaxthon Cloud Browserรองรับไฟล์ SVG ด้วยเช่นกัน

มีข้อดีหลายประการสำหรับการสนับสนุนแบบเนทีฟและเต็มรูปแบบ: ไม่จำเป็นต้องใช้ ปลั๊กอินสามารถผสม SVG กับเนื้อหาอื่น ๆ ในเอกสารเดียวได้อย่างอิสระ และการเรนเดอร์และการเขียนสคริปต์มีความน่าเชื่อถือมากขึ้น^{[ 67 ]}

การรองรับ SVG อาจมีข้อจำกัดอยู่ที่ SVGT บนสมาร์ทโฟน รุ่นเก่าหรือมีข้อจำกัดมากกว่า หรืออาจมีข้อจำกัดหลักอยู่ที่ระบบปฏิบัติการของเครื่องนั้นๆAdobe Flash Liteรองรับ SVG Tiny มาตั้งแต่เวอร์ชัน 1.1 แล้ว ในงานประชุม SVG Open 2005 ทาง Sunได้สาธิตการใช้งาน SVG Tiny 1.1 บนมือถือสำหรับ แพลตฟอร์ม Connected Limited Device Configuration (CLDC) ^{[ 68 ]}

โทรศัพท์มือถือที่ใช้Opera Mobileรวมถึง เบราว์เซอร์ในตัวของ iPhoneก็รองรับ SVG ด้วยเช่นกัน อย่างไรก็ตาม แม้ว่าจะใช้เอนจินWebKit แต่ เบราว์เซอร์ในตัวของAndroid ก็ไม่รองรับ SVG ก่อนเวอร์ชัน 3.0 (Honeycomb) ^{[ 69 ]}ก่อนเวอร์ชัน 3.0 Firefox Mobile 4.0b2 (เบต้า) สำหรับ Android เป็นเบราว์เซอร์แรกที่ทำงานบน Android ที่รองรับ SVG โดยค่าเริ่มต้น^{[ 70 ]}

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

BlackBerryของRIMมีการรองรับ SVG Tiny 1.1 ในตัวตั้งแต่เวอร์ชัน 5.0 ^{[ 71 ]} การสนับสนุนยังคงมีอยู่สำหรับเบราว์เซอร์ BlackBerry Torchที่ใช้ WebKit ใน OS 6 และ 7 ^{[ 72 ]}

แพลตฟอร์ม S60ของNokiaมีการรองรับ SVG ในตัว ตัวอย่างเช่น ไอคอนโดยทั่วไปจะถูกเรนเดอร์โดยใช้เอ็นจิ้น SVG ของแพลตฟอร์ม Nokia ยังเป็นผู้นำกลุ่มผู้เชี่ยวชาญ JSR 226: Scalable 2D Vector Graphics API ซึ่งกำหนด Java ME API สำหรับการนำเสนอและการจัดการ SVG API นี้ได้รับการนำไปใช้ใน S60 Platform 3rd Edition Feature Pack 1 และรุ่นต่อๆ ไป^{[ 73 ]}โทรศัพท์ Series 40บาง รุ่น ยังรองรับ SVG ด้วย (เช่นNokia 6280 ) ^{[ 74 ]}

โทรศัพท์Sony Ericssonส่วนใหญ่ ที่ขึ้นต้นด้วย รุ่น K700 (เรียงตามวันที่วางจำหน่าย) รองรับ SVG Tiny 1.1 โทรศัพท์ที่ขึ้นต้นด้วยรุ่นK750ยังรองรับคุณสมบัติเพิ่มเติม เช่น ความโปร่งใสและการไล่ระดับสี โทรศัพท์ที่ใช้แพลตฟอร์ม Sony Ericsson Java Platform-8รองรับ JSR 226

Windows Phoneรองรับไฟล์ SVG มาตั้งแต่เวอร์ชัน 7.5 แล้ว

SVG ยังได้รับการสนับสนุนบนอุปกรณ์พกพาต่างๆ จากMotorola , Samsung , LGและSiemens mobile / BenQ-Siemens อีก ด้วย eSVG ซึ่งเป็นไลบรารีการเรนเดอร์ SVG ที่เขียนขึ้นสำหรับ อุปกรณ์ ฝังตัวเป็น หลัก มีให้บริการบนแพลตฟอร์มมือถือบางแพลตฟอร์ม^{[ 75 ] [ 76 ]}

ภาพ SVG สามารถเขียนโค้ดด้วยมือหรือสร้างขึ้นโดยใช้โปรแกรมแก้ไขกราฟิกเวกเตอร์ เช่นInkscape , Adobe Illustrator , Adobe AnimateหรือCorelDRAWและแสดงผลเป็นรูปแบบภาพแรสเตอร์ทั่วไป เช่นPNGโดยใช้ซอฟต์แวร์เดียวกัน นอกจากนี้ โปรแกรมแก้ไขเช่นInkscapeและBoxy SVGยังมีเครื่องมือในการติดตามภาพแรสเตอร์ไปยังเส้นโค้ง Bézier โดยทั่วไป ^จะใช้แบ็กเอนด์การติดตามภาพ เช่น potrace [ ^{77 ]} autotrace และ imagetracerjs

สามารถตั้งโปรแกรมซอฟต์แวร์ให้แสดงผลภาพ SVG ได้โดยใช้ไลบรารีเช่นlibrsvg ซึ่ง GNOMEใช้มาตั้งแต่ปี 2000 และBatikกับThorVG ใช้ มาตั้งแต่ปี 2020 สำหรับระบบที่มีขนาดเล็ก นอกจากนี้ ภาพ SVG ยังสามารถแปลงเป็นรูปแบบภาพยอดนิยมอื่นๆ ได้ตามต้องการโดยใช้ImageMagickซึ่งเป็นยูทิลิตี้แบบบรรทัดคำสั่งฟรี (ซึ่งก็ใช้ librsvg อยู่เบื้องหลังเช่นกัน)

สำหรับแอปพลิเคชันบนเว็บ โหมดการใช้งานที่เรียกว่า Inline SVG ช่วยให้สามารถฝังเนื้อหา SVG ลงในเอกสาร HTML โดยใช้<svg>แท็กได้ จากนั้นจึงสามารถใช้ความสามารถด้านกราฟิกเพื่อสร้างส่วนติดต่อผู้ใช้ที่ซับซ้อนได้ เนื่องจาก SVG และ HTML ใช้บริบท การจัดการเหตุการณ์ และ CSS ร่วมกัน

การใช้งาน SVG อื่นๆ ได้แก่ การฝังเพื่อใช้ในการประมวลผลคำ (เช่น กับLibreOffice ) และการจัดพิมพ์บนเดสก์ท็อป (เช่นScribus ) การพล็อตกราฟ (เช่นgnuplot ) และการนำเข้าเส้นทาง (เช่น สำหรับใช้ในGIMPหรือBlender ) บริการแอปพลิเคชันMicrosoft 365และMicrosoft Office 2019ให้การสนับสนุนการส่งออก^{[ 78 ]}การนำเข้าและการแก้ไขรูปภาพ SVG ตัวระบุประเภทสากลสำหรับ SVG ที่ Apple ใช้คือและ public.svg-imageสอดคล้องกับpublic.imageและpublic.xml

ในฐานะรูปแบบเอกสาร เช่นเดียวกับเอกสาร HTML นั้น SVG สามารถรองรับสคริปต์หรือ CSS ได้ นี่เป็นปัญหาเมื่อผู้โจมตีสามารถอัปโหลดไฟล์ SVG เช่น รูปโปรไฟล์ ไปยังเว็บไซต์ และไฟล์นั้นจะถูกมองว่าเป็นรูปภาพปกติ แต่มีเนื้อหาที่เป็นอันตราย^{[ 79 ]}ตัวอย่างเช่น หากไฟล์ SVG ถูกนำไปใช้เป็นภาพพื้นหลัง CSS หรือโลโก้บนเว็บไซต์บางแห่ง หรือในแกลเลอรีรูปภาพบางแห่ง เมื่อโหลดรูปภาพในเบราว์เซอร์ มันจะเปิดใช้งานสคริปต์หรือเนื้อหาอื่นๆ ซึ่งอาจทำให้เบราว์เซอร์หยุดทำงาน ( การโจมตี Billion laughs ) แต่ก็อาจนำไปสู่ การโจมตี แบบ HTML injectionและcross-site scripting ได้เช่นกัน ดังนั้น W3C จึงกำหนดข้อกำหนดบางประการเมื่อใช้ SVG สำหรับรูปภาพเท่านั้น: ความปลอดภัยของ SVG ^{[ 80 ]}

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

มาตรฐาน MPEG -4 Part 20 – Lightweight Application Scene Representation (LASeR) และ Simple Aggregation Format (SAF)นั้นมีพื้นฐานมาจาก SVG Tiny ^{[ 81 ]}ได้รับการพัฒนาโดยMPEG ( ISO/IEC JTC 1 /SC29/WG11) และเผยแพร่เป็น ISO/IEC 14496-20:2006 ^{[ 82 ]}ความสามารถของ SVG ได้รับการปรับปรุงใน MPEG-4 Part 20 ด้วยคุณสมบัติหลักสำหรับบริการมือถือ เช่น การอัปเดตแบบไดนามิก การเข้ารหัสแบบไบนารี และการแสดงแบบอักษรที่ทันสมัย^{​​[ 83 ]} SVG ยังได้รับการรองรับในMPEG-4 Part 11ในรูปแบบ Extensible MPEG-4 Textual (XMT)ซึ่งเป็นการแสดงเนื้อหามัลติมีเดีย MPEG-4 ในรูปแบบข้อความโดย^ใช้ XML [ ^{84 ]}

แม้ว่า SVG จะได้รับการยอมรับอย่างกว้างขวางในตลาดในฐานะมาตรฐานที่ใช้กันอย่างแพร่หลายสำหรับกราฟิกเวกเตอร์ที่ปรับขนาดได้ แต่ไฟล์เหล่านี้ยังไม่ได้รับการสนับสนุนโดยตรงใน Windows ดังนั้นผู้ใช้จึงต้องดาวน์โหลดโปรแกรมแสดงตัวอย่าง SVG สำหรับ File Explorer หรือใช้โปรแกรมสำรวจไฟล์อื่นที่มีการรองรับโดยตรง

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

• ข้อกำหนด หน้าเว็บ SVG ของ W3Cและรายการการใช้งาน
• คู่มือ เบื้องต้นเกี่ยวกับ SVG ของ W3C (ฉบับร่าง) ภายใต้การดูแลของกลุ่มผู้สนใจ SVG
• MDN - SVG: กราฟิกเวกเตอร์ที่ปรับขนาดได้