การสร้างลิงค์ไปยังไฟล์ SVG

เผยแพร่แล้ว: 2022-12-04

เมื่อสร้างลิงก์ใน HTML จะใช้ แอตทริบิวต์ href เพื่อระบุปลายทางของลิงก์ สำหรับลิงก์ไปยังไฟล์ SVG ควรตั้งค่าแอตทริบิวต์ href เป็น URL ของไฟล์ SVG หากไฟล์ SVG อยู่บนเซิร์ฟเวอร์เดียวกันกับไฟล์ HTML สามารถระบุ URL ได้โดยใช้เส้นทางสัมพัทธ์ ตัวอย่างเช่น หากไฟล์ SVG อยู่ในไดเร็กทอรีเดียวกันกับไฟล์ HTML คุณสามารถตั้งค่าแอตทริบิวต์ href เป็นชื่อไฟล์ของไฟล์ SVG ได้ หากไฟล์ SVG อยู่บนเซิร์ฟเวอร์อื่น สามารถระบุ URL ได้โดยใช้เส้นทางที่แน่นอน เส้นทางที่สมบูรณ์คือ URL แบบเต็มของไฟล์ SVG รวมถึงโปรโตคอล http:// หรือ https:// เมื่อลิงก์ไปยังไฟล์ SVG สามารถใช้องค์ประกอบเพื่อระบุขนาดของภาพ SVG ได้ แอตทริบิวต์ความกว้างและความสูงใช้เพื่อระบุความกว้างและความสูงของภาพ SVG ในหน่วยพิกเซล นอกจากนี้ยังสามารถใช้องค์ประกอบเพื่อระบุแอตทริบิวต์ viewBox แอตทริบิวต์ viewBox ใช้เพื่อกำหนดระบบพิกัดของภาพ SVG ค่าสี่ค่าของแอตทริบิวต์ viewBox แสดงถึงพิกัด x ขั้นต่ำ พิกัด y ขั้นต่ำ ความกว้าง และความสูงของภาพ SVG หากไม่ได้ระบุแอตทริบิวต์ viewBox ภาพ SVG จะแสดงตามขนาดปกติ หากระบุแอตทริบิวต์ viewBox รูปภาพ SVG จะถูกปรับขนาดให้พอดีกับ viewBox ที่ระบุ

สามารถระบุลิงก์ไปยังเนื้อหาภายในเอกสารได้ และทรัพยากรภายนอกสามารถเข้าถึงได้โดยใช้ SVG เมื่อใช้ HTML ฉันสามารถสร้างลิงก์จากเอกสารหนึ่งไปยังอีกเอกสารหนึ่งได้โดยใช้องค์ประกอบและแอตทริบิวต์ href ดังตัวอย่างต่อไปนี้ ลิงก์จะอยู่ใต้หัวข้อ นี่คือประเภทของฟังก์ชันที่สามารถจัดเตรียมได้โดยใช้ XLink ซึ่งเป็นเทคโนโลยี คุณต้องเพิ่มคำนำหน้า XLink และแอตทริบิวต์ xlink:type=simple ในเอกสารของคุณเพื่อใช้ XLink คุณสามารถกำหนดประเภทของลิงค์ที่คุณต้องการและเหตุผลที่คุณต้องการให้อ้างอิงถึง เมื่อใช้ค่าแทนที่ ลิงก์จะแสดงในหน้าต่างใหม่หรือแท็บ นอกจากนี้ยังเป็นไปได้โดยการรวมองค์ประกอบมุมมองและตัวระบุส่วนย่อย ซึ่งสามารถเชื่อมโยงไปยังส่วนประกอบเฉพาะของเอกสาร

หากคุณต้องการกำหนดพื้นที่เฉพาะภายในไฟล์ที่ผู้ใช้สามารถซูมเข้าหรือออกได้ การใช้สิ่งนี้จะเป็นประโยชน์ เสียงและวิดีโอสามารถฝังลงใน SVG Tiny 1.2 และใหม่กว่าได้ แต่สิ่งนี้ไม่ได้ใช้กันอย่างแพร่หลาย จำเป็นต้องมีองค์ประกอบการใช้งานเพื่อแทรกส่วนย่อย SVG ลงในเอกสาร นอกจากนี้ยังสามารถใช้ภาพแรสเตอร์ เช่น PNG และ JPEG แทน ไฟล์ VNG ในลักษณะเดียวกับที่แอตทริบิวต์ alt ของ HTML ทำ องค์ประกอบ desc สามารถแสดงข้อความแสดงแทนได้ เมื่อโปรแกรมอ่านหน้าจอสามารถรองรับ SVG ได้ ก็จะเป็นประโยชน์สำหรับพวกเขา

องค์ประกอบ 'เส้นทาง' ใน SVG กำหนดเส้นทาง รูปร่างที่พวกเขาอธิบายเรียกว่าเส้นทางที่เทียบเท่า ซึ่งก็คือเส้นทางโดยทั่วไป เส้นทางขององค์ประกอบ 'เส้นทาง' เป็นเพียงเส้นทางเอง (ตรงข้ามกับเส้นทางขององค์ประกอบ 'เส้นทาง')

เส้นทาง>=div-เส้นทาง-เนื้อหา-แม่แบบ-ชื่อ เส้นทางสามารถกำหนดเป็นผลลัพธ์ขององค์ประกอบ *เส้นทาง สามารถเข้าถึงข้อมูลเส้นทางได้โดยใช้คำสั่งต่อไปนี้: M = moveto L หมายถึง lineto

หากต้องการทำให้เส้นทางนี้เคลื่อนไหวราวกับว่ากำลังวาดอย่างช้าๆ และราบรื่นบนหน้าจอ คุณต้องใช้แอตทริบิวต์ stroke-dasharray ซึ่งเท่ากับความยาวเส้นทาง กล่าวอีกนัยหนึ่ง ความยาวของเส้นประแต่ละเส้นและช่องว่างในเส้นโค้งเส้นประต้องสอดคล้องกับความยาวของเส้นทางทั้งหมด

บนเว็บ ให้สร้างลิงก์ไปยังสถานที่และเลือกข้อความหรือรูปภาพที่คุณต้องการใช้เป็นลิงก์ คุณสามารถป้อน CtrlK โดยกดปุ่ม Enter หรือคลิกลิงก์ในเมนูทางลัดเพื่อคลิกขวาที่ข้อความหรือรูปภาพ แทรกลิงก์ของคุณลงในช่องที่อยู่โดยใช้ช่องแทรกไฮเปอร์ลิงก์หรือพิมพ์หรือวาง

Svg สามารถมี URL ได้หรือไม่

Svg สามารถมี URL ได้หรือไม่
ภาพโดย: https://iconfinder.com

ฟังก์ชัน href กำหนด URL ที่อ้างถึงองค์ประกอบหรือส่วนย่อยภายในเอกสาร SVG ที่ถูกโคลน องค์ประกอบ HTML ที่มีค่า href เช่น use> ยังสามารถอ้างถึงไฟล์ sva ทั้งหมดโดยไม่ต้องใช้ส่วนย่อยใดๆ

ไขปริศนาการเขียนโปรแกรมที่เกี่ยวข้องกับเนื้อหาและ URL การใช้ SVG เพื่อใช้เอฟเฟ็กต์กราฟิกกับเนื้อหา HTML พร้อมใช้งานแล้วในเบราว์เซอร์สมัยใหม่ ตัวเลือกสามตัวเลือก ได้แก่ มาสก์ เส้นทางคลิป และตัวกรอง ( X)HTML เป็นไฟล์ที่สามารถเชื่อมโยงกับเนื้อหาภายนอกและไปยังเอกสาร และ SVG สามารถเชื่อมโยงกับเนื้อหาเดียวกันได้ รูปภาพสามารถใช้เป็นภาพพื้นหลังใน CSS เช่นเดียวกับ PNG, JPG หรือ GIF เมื่อใช้รูปภาพเป็นลิงก์ใน HTML ให้ใช้แท็ก <img> และแอตทริบิวต์ href แอตทริบิวต์ xlink:href กำหนด IRI สำหรับการอ้างอิงทรัพยากร


เป็นไปได้ไหมที่จะวาดเส้นทางใด ๆ ใน Svg?

ใช่ เป็นไปได้ที่จะวาดเส้นทางใดก็ได้ใน svg นี่เป็นเพราะ svg รองรับทั้งองค์ประกอบเส้นทางและองค์ประกอบเส้น ซึ่งเมื่อรวมกันแล้วสามารถสร้างรูปร่างที่คุณต้องการได้ นอกจากนี้ svg ยังรองรับองค์ประกอบรูปหลายเหลี่ยม ซึ่งสามารถใช้สร้างรูปทรงที่ซับซ้อนมากขึ้นได้

เส้นทางของออบเจกต์ถูกกำหนดด้วยคำสั่ง moveto, lineto, curveto (ทั้งเบซิเออร์ลูกบาศก์และกำลังสอง), ส่วนโค้ง และคำสั่ง closepath เส้นทางแบบผสม (เช่น เส้นทางที่มีเส้นทางย่อยหลายเส้นทาง) สามารถให้เอฟเฟกต์ต่างๆ เช่น รูโดนัทปรากฏบนวัตถุได้ บทนี้อธิบายไวยากรณ์ ลักษณะการทำงาน และอินเทอร์เฟซ DOM ของ เส้นทาง SVG คำสั่งข้อมูลพาธประกอบด้วยชุดคำสั่งตามด้วยบรรทัดเดียว ไวยากรณ์ของข้อมูลพาธมีความกระชับเพื่อให้ดาวน์โหลดได้อย่างมีประสิทธิภาพและมีขนาดไฟล์น้อยที่สุด เส้นทางสามารถแบ่งออกเป็นหลายบรรทัดได้หากมีอักขระขึ้นบรรทัดใหม่เพื่อให้อ่านได้ง่ายขึ้น ขณะแยกวิเคราะห์ บรรทัดในมาร์กอัปที่อยู่ภายในอักขระจะถูกทำให้เป็นมาตรฐานเป็นอักขระเว้นวรรค

มีการใช้สตริงในสตริงข้อมูลเส้นทางเพื่อระบุรูปร่าง ข้อผิดพลาดของข้อมูลเส้นทางได้รับการจัดการตามกฎในส่วนการจัดการข้อผิดพลาดข้อมูลเส้นทางของคลาสสตริง หากมี กลุ่มข้อมูลพาธ (หากมี) จะต้องตามด้วยคำสั่งย้ายไปยัง เส้นตรงจะถูกวาดโดยอัตโนมัติจากจุดปัจจุบันไปยังจุดเริ่มต้นของเส้นทางย่อยปัจจุบัน ส่วนเส้นทางนี้อาจสั้นถึงศูนย์ไมล์ Closepaths ใช้ 'stroke-linejoin' เป็นค่าเริ่มต้นสำหรับเซ็กเมนต์เริ่มต้น ดังนั้นจุดสิ้นสุดของพาธย่อยจะถูกรวมเมื่อเซ็กเมนต์เริ่มต้นเริ่มต้นขึ้น เมื่อพาธแรกและพาธสุดท้ายไม่ถูกรวมเข้าด้วยกันเพื่อสร้างพาธย่อยแบบปิด เส้นทางเหล่านั้นจะทำงานแตกต่างไปจากเมื่อพาธแรกและพาธสุดท้าย

การดำเนินการปิดพาธที่แบ่งเป็นหลายเซกเมนต์ไม่ได้รับการสนับสนุนเป็นคำสั่งใน Python ในขณะนี้ คำสั่งเหล่านี้สามารถใช้เพื่อกำหนดเส้นตรงจากจุดปัจจุบันไปยังอีกจุดหนึ่งได้ เมื่อใช้คำสั่งสัมพัทธ์ l จุดสิ้นสุดของบรรทัดคือ (cpy + y, cx) ในทิศทางของแกน x ที่เป็นบวก คำสั่ง h สัมพัทธ์ที่มีค่า x เป็นบวกจะวาดเส้นแนวนอน ห้าตัวอย่างแรกแสดงส่วนของเส้นทางลูกบาศก์เดี่ยวที่มีเส้นทางเบซิเยร์ลูกบาศก์ คำสั่ง elliptical arcs สามารถใช้งานได้ดังต่อไปนี้ ส่วนโค้งลงท้ายด้วยคำสั่งสัมพันธ์ (cpy x, cpy y)

ธงส่วนโค้งขนาดใหญ่และธงกวาดระบุว่าส่วนโค้งใดในสี่ส่วนถูกวาดในตัวอย่างต่อไปนี้ การประมวลผล EBNF ต้องใช้การผลิตที่กำหนดมากที่สุดเท่าที่จะเป็นไปได้ เพื่อที่จะหยุด ณ จุดที่ตัวละครไม่เป็นไปตามข้อกำหนดของการผลิตอีกต่อไป เมื่อคุณสมบัติ D มีค่าเป็นศูนย์ การแสดงผลจะถูกปิดใช้งาน เมื่อคำนวณรูปร่างหมวกและใช้เครื่องหมาย ทิศทางเริ่มต้นของขอบเขตของเซ็กเมนต์จะถูกแทนที่ ถ้า ry หรือ rx เป็น 0 ส่วนโค้งนี้ถือเป็นส่วนของเส้นตรง (lineto) สำหรับการดำเนินการปรับขนาดนี้ ดูภาคผนวกสำหรับสูตรทางคณิตศาสตร์ ไม่จำเป็นต้องทำให้ส่วนเส้นทางไม่ถูกต้องโดยมีความยาวเป็นศูนย์ อย่างไรก็ตาม ในบางกรณี อาจมีผลกระทบต่อการแสดงผล

ผู้เขียนสามารถคำนวณความยาวทั้งหมดของเส้นทางได้โดยใช้แอตทริบิวต์ 'pathLength' ซึ่งช่วยให้ตัวแทนผู้ใช้สามารถปรับขนาดการคำนวณระยะทางตามเส้นทางได้ ในการย้ายองค์ประกอบของคอมโพเนนต์ การดำเนินการหนึ่งรายการต้องมีความยาวเป็นศูนย์ คำสั่ง Lineto, Curveto และ Arcto ล้วนมีผลโดยตรงต่อการคำนวณความยาวพาธ

ความยาวของเส้นทางของคุณ

กล่าวอีกนัยหนึ่ง ตัวอย่างเช่น ตัวแทนผู้ใช้ได้คำนวณความยาวทั้งหมดของพาธเป็นค่าที่ตัวแทนผู้ใช้คำนวณสำหรับความยาวทั้งหมด

เส้นทาง Svg

เส้นทางเป็นรูปร่างพื้นฐานใน svg กำหนดโดยจุดเริ่มต้นและจุดสิ้นสุด ตลอดจนจุดควบคุมอื่นๆ จุดควบคุมช่วยให้คุณกำหนดความโค้งของเส้นทางได้

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

ตัวอย่างลิงค์ Svg

ตัวอย่างลิงก์ svg จะเป็นรูปภาพของลิงก์ที่เมื่อคลิกแล้วจะนำคุณไปยังเว็บไซต์

URL เป็นตัวย่อทั่วไปสำหรับตัวระบุ uri ที่ใช้ในความหมายทั่วไป URL คือลำดับของอักขระจาก Universal Character Set [UNICODE] เช่นที่แสดงด้านล่าง ในการแมป URL กับ URI ข้อกำหนดเฉพาะของ URL จะทำหน้าที่เป็นพื้นฐาน แทนที่จะใช้ URI ในเอกสาร XML เพื่อระบุทรัพยากร สามารถใช้ URL ได้ ไลบรารี SVG ใช้การอ้างอิง URL ไปยังวัตถุอื่นๆ ที่หลากหลาย ทั้งแบบสัมบูรณ์และแบบสัมพัทธ์ ค่า URL มักจะใช้ในแอตทริบิวต์ 'href' เพื่อระบุความสัมพันธ์เชิงโครงสร้างระหว่างสององค์ประกอบ เมื่อพูดถึงประเภทข้อมูล URL ไม่จำเป็นต้องระบุแอตทริบิวต์ <url>; เพราะไม่ต้องใช้วิธีการนำเสนอ

หาก URL ของคุณไม่เป็นไปตามข้อกำหนด คุณจะไม่สามารถสร้างเอกสาร SVG ได้ ข้อกำหนด URL เป็นผู้นำโดยแอปพลิเคชันใด ๆ สามารถตรวจสอบค่าเป็นการอ้างอิง URL ซึ่งเป็นสาเหตุที่ข้อกำหนดนี้ไม่จำเป็น ลิงก์หรือทรัพยากรได้รับการอธิบายในรูปแบบของมนุษย์โดยใช้แอตทริบิวต์ 'xlink:title' สามารถใช้เพื่อเพิ่มชื่อให้กับแอปพลิเคชันที่ใช้โดยผู้ใช้ที่มีความบกพร่องทางการมองเห็น หรือเพื่อรวมข้อความช่วยเหลือเมื่อตัวชี้เมาส์วางเหนือทรัพยากรเริ่มต้น จำเป็นต้องมีการสร้างแอตทริบิวต์ 'href' โดยตัวสร้าง SVG ที่ถูกต้อง โดยไม่มี ต้องละเว้นแอตทริบิวต์ใน XLink เอกสารคงที่ที่มีการอ้างอิง URL เดียวกันอาจทำให้การอ้างอิง URL กลับสู่สถานะที่ยังไม่ได้แก้ไข ตัวแทนผู้ใช้ต้องพยายามแก้ไข URL อีกครั้งเพื่อระบุทรัพยากร

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

ลิงก์ HTML มีชุดแอตทริบิวต์ของตัวเองในข้อกำหนดแยกต่างหาก ในขณะที่ XLink กำหนดลิงก์ใน SVG 1.1 เพื่อให้แน่ใจว่าลิงก์ทั้งหมดใช้งานได้และคำสั่งแป้นพิมพ์ถูกใช้เพื่อดำเนินการ ตัวแทนผู้ใช้ต้องทำให้สามารถโฟกัสได้ ลิงค์ไม่ซ้อนกัน หากองค์ประกอบ 'a' เป็นองค์ประกอบที่สืบทอดมาจากองค์ประกอบอื่น ตัวแทนผู้ใช้จะต้องละเว้นแอตทริบิวต์ href และถือว่าองค์ประกอบนั้นไม่ได้ใช้งาน ทรัพยากรระยะไกลอาจเป็นทรัพยากรบนเว็บใดๆ ก็ได้ (เช่น รูปภาพ คลิปวิดีโอ เสียงบรรยาย โปรแกรม เอกสาร HTML หรือองค์ประกอบในเอกสารปัจจุบัน) นอกเหนือจากสิ่งต่อไปนี้อย่างน้อยหนึ่งอย่าง ในการตอบสนองต่อการเปิดใช้งานลิงก์ของผู้ใช้ (เช่น การคลิกด้วยเมาส์ การพิมพ์แป้นพิมพ์ และการพูดคำสั่ง) ตัวแทนผู้ใช้ควรพยายามดึงเอกสารทรัพยากร แสดง หรือดาวน์โหลดโดยเร็วที่สุด ต่อไปนี้เป็นวิธีทั่วไปในการระบุชิ้นส่วน ตามข้อกำหนด CSS Object Model (CSSOM) ส่วนของตัวระบุสามารถใช้ url-escape ได้ หากตั้งเครื่องหมายอัฒภาคเป็น%3B URL (คั่นด้วยเครื่องหมายอัฒภาค) สามารถเคลื่อนไหวได้โดยใช้ฟังก์ชันนี้

Svg ภายในแท็ก Anchor

หากคุณต้องการเพิ่ม SVG ในแท็กสมอเรือ มีบางสิ่งที่คุณต้องจำไว้ ขั้นแรก ตรวจสอบให้แน่ใจว่า SVG ถูกบันทึกเป็นไฟล์ของตัวเอง จากนั้น เปิดไฟล์ในโปรแกรมแก้ไขข้อความและเพิ่มโค้ดต่อไปนี้: a href=”path/to/ file.svg”>ข้อความลิงก์ สุดท้าย บันทึกไฟล์และอัปโหลดไปยังเว็บไซต์ของคุณ

ลิงค์ Svg

SVG (Scalable Vector Graphics) เป็นรูปแบบภาพเวกเตอร์ที่รองรับภาพเคลื่อนไหวและการโต้ตอบ รูปภาพ SVG และลักษณะการทำงานถูกกำหนดไว้ในไฟล์ XML ไฟล์เหล่านี้สามารถสร้างและแก้ไขได้ด้วยโปรแกรมแก้ไขข้อความ แต่มักจะสร้างด้วยซอฟต์แวร์วาดภาพ

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

ส่วนย่อยของเอกสาร SVG มีองค์ประกอบ >glyphRef> ที่อ้างอิงเป็นสัญลักษณ์สำรอง xlink:href กำหนดการอ้างอิงไปยังทรัพยากรภายนอกที่มีโค้ดของสคริปต์ หากองค์ประกอบนี้ไม่มีการหยุดการไล่ระดับสีที่กำหนดไว้ และองค์ประกอบที่อ้างอิงมี (อาจเป็นเพราะแอตทริบิวต์ xlink:attr ของมันเอง) องค์ประกอบนี้จะสืบทอดการหยุดการไล่ระดับสีจากองค์ประกอบนั้น องค์ประกอบที่สืบทอดมารวมถึงแอตทริบิวต์ใดๆ และทั้งหมดที่ไม่ได้กำหนดไว้ในองค์ประกอบที่อ้างอิง

องค์ประกอบของ Svg: คอนเทนเนอร์อเนกประสงค์สำหรับลิงก์และรูปร่าง

เนื่องจาก HTML ใช้องค์ประกอบคอนเทนเนอร์ sva จึงให้ลิงก์ไปยังข้อความ (เช่น HTML) แก่คุณในขณะเดียวกันก็สามารถใช้รูปร่างใดก็ได้ สิ่งเดียวที่จำเป็นในการเชื่อมโยงไปยังข้อความคือแท็ก * ที่ล้อมรอบข้อความ แท็กนี้สามารถใช้เพื่อล้อมรอบรูปร่างที่เรียบง่ายกว่าหรือเส้นทางที่ซับซ้อนกว่า นอกจากนี้ยังสามารถใช้เพื่อล้อมรอบองค์ประกอบ SVG เดียวหรือกลุ่มขององค์ประกอบ แท็กลิงก์ [a] สามารถใช้เพื่อสร้างลิงก์ไปยังรูปภาพในไฟล์.VNG เป็นไปได้ที่จะอ้างถึงรูปภาพโดยใช้แท็ก *img หรือโดยใช้แท็ก *a เพื่ออ้างถึง URL สิ่งนี้เป็นจริงสำหรับแผนภูมิ ไดอะแกรม และภาพประกอบเช่นกัน เมื่อคุณใช้แท็ก *svg คุณสามารถสร้างกราฟิกที่สามารถแสดงบนเว็บไซต์หรือส่งต่อไปยังผู้รับทางอีเมล นอกจาก แอตทริบิวต์ของลิงก์ แล้ว ยังมีการใช้ xlink:href การอ้างอิงถึงทรัพยากร ตามแอตทริบิวต์ xlink:href จะเรียกว่า IRI เป็นไปไม่ได้ที่จะบอกว่าความหมายที่แท้จริงของลิงก์นั้นขึ้นอยู่กับบริบทที่ใช้ เนื่องจาก SVG 2 ขจัดความต้องการ xlink เนมสเปซ การใช้ href แทน xlink:href ก็เพียงพอแล้ว