ฝัง SVG ใน HTML - นี่คือวิธี

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

รวมภาพ SVG เข้ากับ HTML โดยตรง

มีหลายวิธีในการรวม SVG เข้ากับ HTML อย่างไรก็ตามส่วนใหญ่มีข้อบกพร่องบางอย่าง

• มันง่ายมากที่จะรวม SVG โดยใช้ "" หากต้องการทำสิ่งนี้เพียงเปิด SVG ของคุณในเครื่องมือแก้ไขรหัส (เช่น Notepad ++) และคัดลอกรหัสลงในรหัส HTML ของคุณ
• ซอร์สโค้ดของไฟล์ HTML ของคุณอาจใช้เวลานานมากเนื่องจาก SVG ใช้พื้นที่มาก

รวม SVG เป็นส่วนประกอบรูปภาพใน HTML

วิธีง่ายๆในการฝังไฟล์ SVG ใน HTML คือการใช้แท็ก "img"

• ด้วยแท็ก "img" คุณสามารถฝัง SVG ได้เหมือนกับภาพอื่น ๆ แม้ว่าจะง่าย แต่ก็ป้องกันการใช้ JavaScript และลิงก์ภายใน SVG

แทรก SVG ด้วย fallback ใน HTML

ตัวเลือกนี้เหมาะถ้าคุณใช้ไฟล์ SVG แต่ยังต้องการให้รูปภาพทั่วไปสำหรับเบราว์เซอร์รุ่นเก่า

• คุณสามารถใช้แท็ก "image" ภายในแท็ก "SVG" ซึ่งคุณมีทั้ง SVG จริงและรูปภาพอื่นที่มี "xlink: href" และแอตทริบิวต์ "src" เบราว์เซอร์ที่ไม่รองรับ SVG จะไม่สนใจแอตทริบิวต์ "xlink: href" คนอื่น ๆ ทั้งหมดเอาท์พุทภาพ SVG

เคล็ดลับที่เป็นประโยชน์อื่น ๆ จะบอกวิธีเปิดไฟล์ SVG ในคอมพิวเตอร์ของคุณ