SVG ในหน้าเว็บ HTML

ไฟล์ SVG สามารถใช้แบตทิ้งต่าง ๆ ให้เข้าไปในเอกสาร HTML ได้ทางต่อไปนี้: <embed>、<object> หรือ <iframe>

SVG ในหน้าเว็บ HTML

ต่อไปนี้ คุณจะเห็นวิธีสามที่แตกต่างกันในการใช้งานไฟล์ SVG ในหน้าเว็บ HTML

ใช้แบตทิ้ง <embed>

<embed> แบตทิ้งได้รับการสนับสนุนโดยทุกเครื่องนอนที่แพร่หลาย และอนุญาตให้ใช้สคริปต์

หมายเหตุ:ในขณะที่ใช้แบตทิ้ง <embed> ในหน้าเว็บ HTML คือวิธีที่ Adobe SVG Viewer แนะนำ! แต่หากต้องการสร้าง XHTML ตามมาตราฐาน ไม่สามารถใช้ <embed> ได้ แน่นอน ไม่มีแบตทิ้ง <embed> ในมาตราฐาน HTML ใดๆ

ระบุข้อความ

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

หมายเหตุ:คุณสมบัติ pluginspage บอกทางยูรี่ของการดาวน์โหลดปลั๊กอิน

ใช้แบตทิ้ง <object>

<object> แบตทิ้งเป็นแบตทิ้งมาตรฐานของ HTML 4 และได้รับการสนับสนุนโดยทุกเครื่องนอนที่ใหม่ขึ้น ข้อบกพร่องของมันคือไม่อนุญาตให้ใช้สคริปต์。

หมายเหตุ:หากคุณได้ติดตั้ง Adobe SVG Viewer รุ่นล่าสุด ในขณะที่ใช้แบตทิ้ง <object> ไฟล์ SVG จะไม่ทำงาน (อย่างน้อยไม่ทำงานใน IE)!

ระบุข้อความ

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

หมายเหตุ:attribute codebase จะนำไปสู่ URL ที่ดาวน์โหลดปลั๊กอิน

ใช้ <iframe> แบบ

ตามที่แสดงใน <iframe> สามารถทำงานในบราวเซอร์ส่วนใหญ่

ระบุข้อความ

<iframe src="rect.svg" width="300" height="100">
</iframe>

ฉันคาดหวัง...

ถ้าสามารถเพิ่ม SVG อันหนึ่งอันอื่นไปที่ HTML โดยการอ้างอิงเมื่อเข้าถึงนามสำหรับ SVG นั้นจะเป็นสิ่งที่ดีมาก นี่เหมือนนี้:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black">
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>