ตัวอย่าง SVG

ลองด้วยตัวเองตัวอย่างนี้

ตัวอย่างด้านล่างจะใส่รหัสเอสวีเอ็กซ์เข้าไปในรหัส HTML

Firefox และ Internet Explorer 9 และ Google Chrome และ Opera และ Safari ทุกตัวต้องการทำตามนี้

ตัวอย่าง SVG

รูปทรงพื้นที่เอสวีเอ็กซ์

วงกลม
สี่เหลี่ยม
สี่เหลี่ยมหลากที่ไม่ทันที
สี่เหลี่ยมหลากที่มีอัตราความเป็นบริสุทธิ์ 2
สี่เหลี่ยมหลากที่มีมุมโต๊ะ
วงกลม
วงกลมสามที่หน้ากัน
วงกลมสอง
สาย
สามเหลี่ยม
สี่เหลี่ยมหลากที่มีสี่ขอบ
ดาว
ดาวอีกดวงหนึ่ง
เส้นทาง
เส้นทางแบบเฟิร์น
เส้นทาง
เส้นโค้งเบซเซอร์
เขียนข้อความ
ข้อความที่หมุน
ข้อความที่มีหลายบรรทัด
ข้อความที่เป็นลิงก์
กำหนดสีของเส้นทาง ข้อความ หรือ ขอบเขต (stroke)
กำหนดความกว้างของเส้นทาง ข้อความ หรือ ขอบเขต (stroke-width)
กำหนดทางของจุดปิดทางแบบต่าง ๆ ของเส้นทางที่เปิด (stroke-linecap)
กำหนดรูปแบบของรอยสาย (stroke-dasharray)

Filter SVG

feGaussianBlur - ทำให้มีปรากฏการณ์ที่เบาและกำลัง
feOffset - ย้ายสี่เหลี่ยมหลากมาก่อนแล้วผสมรูปส่วนแรกกับรูปที่ถูกย้าย
feOffset - ทำให้รูปที่ถูกมองเห็นมีเงาที่มีการเบาและกำลัง
feOffset - ทำให้เงามีสีดำ
feOffset - จัดการเงาด้วยสีบางตัว
ฟิลเตอร์ feBlend
ฟิลเตอร์ 1
ฟิลเตอร์ 2
ฟิลเตอร์ 3
ฟิลเตอร์ 4
ฟิลเตอร์ 5
ฟิลเตอร์ 6

เอสวีเอ็กซ์ การเปลี่ยนสี

วงกลมที่มีการเปลี่ยนสีทางเส้นทางแบบนิ้วเท้าจากเหลืองไปสีแดง
วงกลมที่มีการเปลี่ยนสีทางเส้นทางแบบนิ้วเท้าจากเหลืองไปสีแดง
วงกลมและข้อความที่มีการเปลี่ยนสีทางเส้นทางแบบนิ้วเท้าจากเหลืองไปสีแดง
วงกลมที่มีการเปลี่ยนสีทางทวีรัศมีจากขาวไปสีน้ำเงิน
วงกลมที่มีการเปลี่ยนสีทางทวีรัศมีจากขาวไปสีน้ำเงิน

เอสวีเอ็กซ์ สิ่งที่เกี่ยวข้อง

สี่เหลี่ยมหลากที่สูญตัวภายใน 5 วินาที
สี่เหลี่ยมหลากที่เปลี่ยนสีและเติบโตตลอดเวลา
สี่เหลี่ยมหลากที่เปลี่ยนสี
การเคลื่อนไหวข้อความตามเส้นทางการเคลื่อนไหว
การเคลื่อนไหว หมุนและขยายของข้อความตามเส้นทางการเคลื่อนไหว
การเคลื่อนไหว หมุนและขยายของข้อความตามเส้นทางการเคลื่อนไหว + สี่เหลี่ยมจัตุรัสที่เติมขนาดและเปลี่ยนสีตามเวลา
การหมุนไอเลิร์น