SVG ใน HTML
ไฟล์ SVG สามารถฝังตัวในเอกสาร HTML ผ่านทางแท็กต่อไปนี้: <embed> <object> หรือ <iframe>
รหัส SVG สามารถฝังโดยตรงลงในหน้า HTML หรือคุณสามารถเชื่อมโยงโดยตรงกับไฟล์ SVG
โดยใช้ <embed> แท็ก
<embed>:
- ข้อดี: เบราว์เซอร์ที่สำคัญทั้งหมดได้รับการสนับสนุนและช่วยให้การเขียนสคริปต์
- จุดด้อย: ไม่แนะนำสำหรับการใช้งานใน HTML4 และ XHTML ( แต่ได้รับอนุญาตใน HTML5)
ไวยากรณ์:
<embed src="circle1.svg" type="image/svg+xml" />
ผล:
โดยใช้ <object> แท็ก
<object>:
- ข้อดี: เบราว์เซอร์ที่สำคัญทั้งหมดได้รับการสนับสนุนและการสนับสนุนสำหรับ HTML4, XHTML และมาตรฐาน HTML5
- ข้อเสีย: ไม่อนุญาตให้มีการใช้งานสคริปต์
ไวยากรณ์:
<object data="circle1.svg"
type="image/svg+xml"></object>
ผล:
ใช้แท็ก <iframe>
<iframe>:
- ข้อดี: เบราว์เซอร์ที่สำคัญทั้งหมดได้รับการสนับสนุนและช่วยให้การเขียนสคริปต์
- จุดด้อย: ไม่แนะนำสำหรับการใช้งานใน HTML4 และ XHTML ( แต่ได้รับอนุญาตใน HTML5)
ไวยากรณ์:
<iframe src="circle1.svg"></iframe>
ผล:
SVG ฝังโดยตรงลงในโค้ด HTML
Firefox, Internet Explorer9, Google Chrome และ Safari คุณสามารถฝังรหัส SVG โดยตรงในรูปแบบ HTML
หมายเหตุ: SVG สามารถฝังโดยตรงลงในโรงละครโอเปร่า
ตัวอย่าง
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
ลอง»
เชื่อมโยงไปยังไฟล์ SVG
นอกจากนี้คุณยังสามารถเชื่อมโยงไปยังป้ายชื่อกับไฟล์ SVG <a>: การเชื่อมโยงไปยังไฟล์ SVG
นอกจากนี้คุณยังสามารถเชื่อมโยงไปยังป้ายกับไฟล์ SVG <a> A:
<a href="circle1.svg">View SVG file</a>
ผล:
ดูไฟล์ SVG