ตัวอย่าง SVG

SVG จะเขียนด้วย XML。

ตัวอย่าง SVG

ตัวอย่างดังนี้เป็นตัวอย่างของ SVG ไฟล์ที่เรียบง่าย ไฟล์ SVG จะต้องใช้นามสกุล .svg เพื่อบันทึก:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

ดูตัวอย่าง (ใช้เฉพาะเบรายเวอร์ที่สนับสนุน SVG)

（ถ้าต้องการดูรหัสต้นฉบับของ SVG โปรดเปิดตัวอย่างนี้ แล้วคลิกขวาที่หน้าต่าง เลือก “ดูรหัสต้นฉบับ”。）

การอธิบายรหัส:

บรรทัดแรกประกอบด้วย XML การประกาศ。โปรดจำได้ถึงคุณสมบัติ standalone! คุณสมบัตินี้กำหนดว่า SVG ไฟล์นี้เป็น “เดี่ยวๆ” หรือมีการอ้างอิงไฟล์ภายนอก。

standalone="no" หมายความว่า SVG เอกสารจะอ้างอิงไฟล์ภายนอก - ในที่นี้คือไฟล์ DTD。

บรรทัดที่สองและสามอ้างอิงตัวแปร SVG DTD ภายนอกนี้ DTD ตั้งอยู่ที่ “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” DTD ตั้งอยู่ที่ W3C ซึ่งมีทุกอิเลเมนต์ที่อนุญาตให้ใช้ SVG

รหัส SVG เริ่มต้นด้วยอิเลเมนต์ <svg> รวมถึงแบบเปิดต้อนรับ <svg> และแบบปิดต้อนรับ </svg> นี่เป็นอิเลเมนต์ราก เริ่มต้นด้วยแบบเปิดต้อนรับ <svg> และปิดต้อนรับ </svg> ค่าตั้งค่าสำหรับกำหนดความกว้างและความสูงของเอกสาร SVG ค่าตั้งค่าสำหรับกำหนดเวอร์ชัน SVG ที่ใช้ xmlns ค่าตั้งค่าสำหรับกำหนดชื่อพื้นที่ SVG

SVG <circle> ใช้สร้างวงกลม cx และ cy ค่าที่กำหนดตำแหน่ง x และ y ของจุดกลางวงกลม ถ้าละเลยทั้งสองค่า จุดกลางจะถูกตั้งเป็น (0, 0) r ค่าที่กำหนดเส้นกลม

ตัวแปร stroke และ stroke-width ควบคุมวิธีที่จะแสดงขอบรูปทรง stroke และ stroke-width ที่เราจะใช้เส้นกลมความกว้าง 2px ด้านขอบดำ

ตัวแปร fill กำหนดสีที่ภายในรูปทรง fill color ที่เราจะใช้สีแดง

บทบาทของแบบปิดต้อนรับคือปิด SVG อิเลเมนต์และเอกสารตัวเอง

หมายเหตุ：ทุกแบบเปิดต้อนรับต้องมีแบบปิดต้อนรับ!