ตัวอย่าง SVG

ตัวอย่างออนไลน์

ตัวอย่างต่อไปนี้เป็นรหัส SVG ฝังโดยตรงลงในโค้ด HTML

Google Chrome, Firefox, Internet Explorer9 และ Safari ได้รับการสนับสนุน

หมายเหตุ: ตัวอย่างต่อไปนี้จะไม่ทำงานที่โอเปร่าแม้ว่า Opera สนับสนุน SVG - มันไม่สนับสนุน SVG โดยตรงในรหัส HTML

ตัวอย่าง SVG

SVG พื้นฐานรูปทรง

วงกลม

สี่เหลี่ยมผืนผ้า

สี่เหลี่ยมทึบแสง

ทึบแสงรูปสี่เหลี่ยม 2

รูปสี่เหลี่ยมที่มีมุมโค้งมน

รูปไข่

และกองอยู่บนสามจุด

สองจุด

บรรทัด

สามเหลี่ยม

รูปสี่เหลี่ยม

ดาว

ดาวอื่น

แตกบรรทัด

อีกเส้น

เส้นทาง

โค้ง Bezier กำลังสอง

เขียนข้อความ

ข้อความที่หมุน

ข้อความบนเส้นทาง

ไม่กี่บรรทัดของข้อความ

ลิงก์ข้อความ

กำหนดเส้นข้อความหรือโครงร่างสี (สโต๊ค)

กำหนดความกว้างของเส้นข้อความหรือโครงร่าง (จังหวะกว้าง)

แอตทริบิวต์จังหวะ linecap กำหนดจุดสิ้นสุดของเส้นทางที่เปิดกว้างของประเภทที่แตกต่างกัน:

ความหมายของเส้นประ (จังหวะ dasharray)

กรอง SVG

feGaussianBlur - เบลอ

feOffset - ชดเชยโดยสี่เหลี่ยมแล้วด้านบนของภาพผสมชดเชยที่

feOffset - ภาพเบลอ Offset

feOffset - เพื่อให้ร่มเงาสีดำ

feOffset - สีเทาสีเคลือบ

กรอง feBlend

กรอง feColorMatrix

กรอง feComponentTransfer

feOffset, feFlood, feComposite, feMerge และ feMergeNode

กรอง feMorphology

กรอง 1

กรอง 2

กรอง 3

กรอง 4

กรอง 5

กรอง 6

SVG ไล่โทนสี

ลาดเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดงรูปไข่

ลาดเชิงเส้นในแนวตั้งจากสีเหลืองเป็นสีแดงรูปไข่

ลาดเชิงเส้นแนวนอนจากสีเหลืองเป็นรูปไข่สีแดงในข้อความและเพิ่ม

การไล่ระดับสีรัศมีจากสีขาวเป็นรูปไข่สีฟ้า

การไล่ระดับสีรัศมีจากสีขาวเป็นรูปไข่สีฟ้าอีก

SVG เบ็ดเตล็ด

ทำซ้ำกับ 5 วินาทีจางสี่เหลี่ยมผืนผ้า

และเปลี่ยนสีของสี่เหลี่ยมที่มีขนาดใหญ่

มันจะเปลี่ยนสีของสามสี่เหลี่ยม

การเคลื่อนไหวพร้อมข้อความเส้นทางการเคลื่อนย้าย

ไปตามเส้นทางการเคลื่อนไหวที่จะย้ายหมุนและข้อความขนาด

ไปตามเส้นทางการเคลื่อนไหวที่จะย้ายหมุนและข้อความขนาด + ค่อยๆขยายและเปลี่ยนสีรูปสี่เหลี่ยมผืนผ้า