ลองมัน Yourself ตัวอย่าง
ตัวอย่างด้านล่างฝังโค้ด SVG โดยตรงในรหัส HTML
นี้ได้รับการสนับสนุนโดย Firefox, Internet Explorer 9, Google Chrome, Opera และ Safari
ตัวอย่าง SVG
SVG พื้นฐานรูปทรง
วงกลม
สี่เหลี่ยมผืนผ้า
รูปสี่เหลี่ยมที่มีความทึบแสง
รูปสี่เหลี่ยมที่มีความทึบ 2
รูปสี่เหลี่ยมที่มีมุมโค้งมน
วงรี
สามจุดด้านบนของแต่ละอื่น ๆ
สองจุด
บรรทัด
รูปหลายเหลี่ยมที่มีสามด้าน
รูปหลายเหลี่ยมที่มีสี่ด้าน
ดวงดาว
ดาวอื่น
เส้น
อีกเส้น
เส้นทาง
กำลังสองโค้ง Bezier
เขียนข้อความ
หมุนข้อความ
ข้อความหลายบรรทัด
ข้อความเป็นลิงค์
กำหนดสีของเส้นข้อความหรือโครงร่าง (stroke)
กำหนดความกว้างของสายข้อความหรือโครงร่าง (stroke-width)
กำหนดประเภทต่าง ๆ ตอนจบเส้นทางที่เปิด (stroke-linecap)
เส้นประกำหนด (stroke-dasharray)
กรอง SVG
feGaussianBlur - ผลเบลอ
feOffset - ชดเชยสี่เหลี่ยมผืนผ้าแล้วผสมผสานเดิมด้านบนของภาพชดเชย
feOffset - ภาพเบลอชดเชย
feOffset - ให้เงาสีดำ
feOffset - รักษาเงาเป็นสี
กรอง feBlend
กรอง 1
กรอง 2
กรอง 3
กรอง 4
กรอง 5
กรอง 6
SVG การไล่ระดับสี
วงรีที่มีความลาดชันเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดง
วงรีที่มีความลาดชันเชิงเส้นในแนวตั้งจากสีเหลืองเป็นสีแดง
วงรีที่มีความลาดชันเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดงและข้อความ
วงรีที่มีการไล่ระดับสีรัศมีจากสีขาวเป็นสีฟ้า
วงรีอื่นที่มีการไล่ระดับสีรัศมีจากสีขาวเป็นสีฟ้า
SVG อื่น ๆ
สี่เหลี่ยมผืนผ้าที่ซ้ำ ๆ จางหายไปกว่า 5 วินาที
สี่เหลี่ยมเจริญเติบโตที่จะเปลี่ยนสี
สามสี่เหลี่ยมที่จะเปลี่ยนสี
ย้ายข้อความไปตามเส้นทางการเคลื่อนไหว
ย้าย, หมุน, และข้อความขนาดตามเส้นทางการเคลื่อนไหว
ย้าย, หมุน, และข้อความขนาดตามเส้นทางการเคลื่อนไหว + สี่เหลี่ยมผืนผ้าที่กำลังเติบโตที่จะเปลี่ยนสี
หมุนวงรี