วิธีการใส่ SVG Graphics ลงบนเว็บเพจของคุณ

SVG หรือ Scalable Vector Graphics ช่วยให้คุณวาดภาพที่ซับซ้อนมากขึ้นและแสดงผลบนหน้าเว็บ แต่คุณไม่สามารถใช้แท็ก SVG และแทงลงใน HTML ของคุณได้ พวกเขาจะไม่ปรากฏขึ้นและหน้าของคุณจะไม่ถูกต้อง แต่คุณต้องใช้หนึ่งในสามวิธี

ใช้แท็ก Object เพื่อฝัง SVG

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

สำหรับความเข้ากันได้ของ cross-browser คุณควรใส่แอตทริบิวต์ type ซึ่งควรอ่าน:

ประเภท = "image / SVG + XML"

และ codebase สำหรับเบราว์เซอร์ที่ไม่รองรับ (Internet Explorer 8 และรุ่นที่ต่ำกว่า) codebase ของคุณจะชี้ไปที่ปลั๊กอิน SVG สำหรับเบราว์เซอร์ที่ไม่สนับสนุน SVG ปลั๊กอินที่ใช้กันมากที่สุดคือจาก Adobe ที่ http://www.adobe.com/svg/viewer/install/ อย่างไรก็ตามปลั๊กอินนี้ไม่ได้รับการสนับสนุนจาก Adobe อีกต่อไป ตัวเลือกหนึ่งคือปลั๊กอิน Ssrc SVG จาก Savarese Software Research ที่ http://www.savarese.com/software/svgplugin/

วัตถุของคุณจะมีลักษณะดังนี้:

เคล็ดลับการใช้วัตถุสำหรับ SVG

• ตรวจสอบให้แน่ใจว่าความกว้างและความสูงอย่างน้อยเท่ากับภาพที่คุณฝังอยู่ มิฉะนั้นรูปภาพของคุณอาจถูกตัดทอน
• SVG ของคุณอาจแสดงอย่างไม่ถูกต้องหากคุณไม่ได้รวมประเภทเนื้อหาที่ถูกต้อง (ประเภท = "image / SVG + XML") ดังนั้นฉันจึงไม่แนะนำให้ปล่อยทิ้งไว้
• คุณสามารถใส่ข้อมูลสำรองไว้ภายใน วัตถุ แท็กสำหรับเบราว์เซอร์ที่จะไม่แสดงไฟล์ SVG
• นอกจากนี้คุณยังสามารถตั้งค่าแหล่งที่มาของ SVG และชนิดเนื้อหาในพารามิเตอร์ นี้อาจทำงานได้ดีขึ้นใน IE 6 และ 7:

classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

โปรดทราบว่านี้ต้อง classid เพื่อให้การทำงาน

ดู SVG ในตัวอย่างแท็กวัตถุ

ฝัง SVG ด้วยแท็กฝัง

อีกตัวเลือกหนึ่งสำหรับ SVG คือการใช้แท็ก คุณใช้แอตทริบิวต์เดียวกันกับแท็กวัตถุรวมทั้งความกว้าง <ความสูงชนิดและ codebase> ข้อแตกต่างเพียงอย่างเดียวคือแทนที่จะใช้ ข้อมูลคุณวาง URL ของเอกสาร SVG ในแอตทริบิวต์ src

การฝังของคุณจะมีลักษณะดังนี้:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

เคล็ดลับสำหรับการใช้ Embed สำหรับ SVG

• แท็กฝังไม่ถูกต้อง HTML4 แต่เป็น HTML5 ที่ถูกต้องดังนั้นถ้าคุณใช้ใน HTML4 หน้าคุณควรจำไว้ว่าหน้าเว็บของคุณจะไม่ตรวจสอบ
• ใช้ชื่อโดเมน quoalified อย่างเต็มที่ในแอตทริบิวต์ src เพื่อให้สามารถใช้ร่วมกันได้ดีที่สุด
• นอกจากนี้ยังมีรายงานบางฉบับที่ใช้แท็กฝังกับปลั๊กอินของ Adobe จะขัดข้อง Mozilla เวอร์ชัน 1.0 ถึง 1.4

ดู SVG ในตัวอย่างแท็กฝัง

ใช้ iframe เพื่อรวม SVG

Iframes เป็นอีกวิธีหนึ่งที่ง่ายในการใส่ภาพ SVG ลงในหน้าเว็บของคุณ เพียงต้องการแอตทริบิวต์สามอย่าง ได้แก่ ความกว้างและความสูงตามปกติและ src ที่ชี้ไปยังตำแหน่งของไฟล์ SVG ของคุณ

iframe ของคุณจะมีลักษณะดังนี้:

เคล็ดลับการใช้ iframe สำหรับ SVG

iframe จะแสดงด้วยเส้นขอบรอบ ๆ ภาพของคุณยกเว้นกรณีที่คุณลบเส้นขอบด้วยสไตล์เช่น

style = "border: none;"

iframe ไม่ได้ระบุตำแหน่งปลั๊กอินดังนั้นหากเบราว์เซอร์ของลูกค้าไม่มีปลั๊กอินพวกเขาอาจไม่เห็นอะไรเลยหรืออาจเห็นข้อความแสดงข้อผิดพลาด

ดู SVG ในตัวอย่างแท็ก iframe