Mẫu SVG

Thử nghiệm trực tiếp với ví dụ này

Ví dụ dưới đây sẽ chèn mã SVG trực tiếp vào mã HTML.

Firefox, Internet Explorer 9, Google Chrome, Opera và Safari đều hỗ trợ làm như vậy.

Mẫu SVG

SVG hình dạng cơ bản

Hình tròn
Hình chữ nhật
Hình vuông không mờ
Hình vuông không mờ với độ mờ 2
Hình vuông có góc tròn
Ellipse
Ba ellipse chồng lên nhau
Hai ellipse
Đường thẳng
Hình đa giác có ba cạnh
Hình đa giác có bốn cạnh
Ngôi sao
Một ngôi sao khác
Đường gấp
Một đường gấp khác
Đường dẫn
Đường cong Bezier hai lần
Viết đoạn văn
Chuyển động văn bản
Văn bản nhiều dòng
Văn bản làm liên kết
Định nghĩa màu của đường, văn bản hoặc viền (stroke)
Định nghĩa độ rộng của đường, văn bản hoặc viền (stroke-width)
Định nghĩa các loại kết thúc khác nhau của đường mở (stroke-linecap)
Định nghĩa nét đứt (stroke-dasharray)

Bộ lọc SVG

feGaussianBlur - Hiệu ứng mờ
feOffset - Dịch chuyển một hình vuông, sau đó trộn hình ảnh gốc vào hình ảnh dịch chuyển
feOffset - Mờ hóa hình ảnh bị dịch chuyển
feOffset - Làm bóng đen
feOffset - Xử lý bóng bằng màu nào đó
Bộ lọc feBlend
Bộ lọc 1
Bộ lọc 2
Bộ lọc 3
Bộ lọc 4
Bộ lọc 5
Bộ lọc 6

SVG gradient

Ellipse có độ sáng từ vàng đến đỏ theo hướng ngang
Ellipse có độ sáng từ vàng đến đỏ theo hướng dọc
Ellipse và văn bản có độ sáng từ vàng đến đỏ theo hướng ngang
Ellipse có độ sáng từ trắng đến xanh dương theo hướng trục
Một ellipse có độ sáng từ trắng đến xanh dương theo hướng trục

SVG các thứ khác

Hình vuông xuất hiện và biến mất lặp lại trong 5 giây
Một hình vuông có thể thay đổi màu sắc và tăng lên liên tục
Ba hình vuông có thể thay đổi màu sắc
Di chuyển văn bản theo đường dẫn chuyển động
Di chuyển, quay và thu nhỏ văn bản theo đường dẫn chuyển động
Di chuyển, quay và thu nhỏ văn bản theo đường dẫn chuyển động + vuông tăng dần thay đổi màu
Chuyển động quay elip