ใน HTML5 คุณสามารถฝัง SVG ได้โดยตรงในหน้า HTML ของคุณ
SVG ฝังโดยตรงหน้าเว็บ HTML
นี่คือตัวอย่างของกราฟิก SVG เรียบง่าย:
และนี่คือรหัส HTML:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"
/>
</svg>
</body>
</html> ลองตัวเอง» SVG Code explanation:
- รูปภาพ SVG เริ่มต้นด้วย <svg> องค์ประกอบ
- ความกว้างและความสูงแอตทริบิวต์ของ <svg> องค์ประกอบที่กำหนดความกว้างและความสูงของภาพ SVG
- <circle> องค์ประกอบที่จะใช้ในการวาดวงกลม
- แอตทริบิวต์ cx และ cy กำหนดพิกัด X และ Y ศูนย์ของวงกลม หาก cx และ cy จะถูกตัดออก, ศูนย์วงกลมมีการตั้งค่า (0, 0)
- r แอตทริบิวต์กำหนดรัศมีของวงกลม
- แอตทริบิวต์โรคหลอดเลือดสมองและโรคหลอดเลือดสมองที่มีความกว้างควบคุมวิธีการที่ร่างของรูปร่างจะปรากฏขึ้น เราตั้งเค้าร่างของวงกลมกับ 4px สีเขียว "ชายแดน"
- fill แอตทริบิวต์หมายถึงสีภายในวงกลม เราตั้งเติมสีเป็นสีเหลือง
- ปิด </svg> แท็กปิดรูปภาพ SVG
หมายเหตุ: เนื่องจาก SVG ถูกเขียนในรูปแบบ XML องค์ประกอบทั้งหมดจะต้องปิดอย่างถูกต้อง!