Contoh SVG
- Hal Sebelumnya Transisi Radial SVG
- Hal Berikutnya Panduan Referensi SVG
Coba sendiri contoh ini
Contoh di bawah ini akan menggabungkan kode SVG langsung ke kode HTML.
Firefox, Internet Explorer 9, Google Chrome, Opera, dan Safari semua mendukung hal ini.
Contoh SVG
Bentuk dasar SVG
- Bola
- Persegi
- Segiempat yang tak terlihat
- Segiempat dengan kecerahan 2
- Segiempat dengan sudut yang melengkung
- Eliips
- Tiga eliips yang bertumpuk
- Dua eliips
- Garis
- Poligon yang memiliki tiga sisi
- Poligon yang memiliki empat sisi
- Bintang
- Bintang lainnya
- Lurah
- Lurah lainnya
- Lurah
- Garis Belah ketiga
- Menulis teks
- Teks berputar
- Teks berbaris
- Teks yang berfungsi sebagai tautan
- Definisi warna garis, teks, atau kontur (stroke)
- Definisi lebar garis, teks, atau kontur (stroke-width)
- Definisi jenis akhir jalur yang terbuka (stroke-linecap)
- Definisi garis garis (stroke-dasharray)
Filter SVG
- feGaussianBlur - Effek penghalusan
- feOffset - Menggeser segiempat, lalu menggabungkan gambar asli ke atas gambar yang dihaluskan
- feOffset - Mengobati gambar yang dihaluskan
- feOffset - Membuat bayangan menjadi hitam
- feOffset - Mengobati bayangan dengan warna
- Filter feBlend
- Filter 1
- Filter 2
- Filter 3
- Filter 4
- Filter 5
- Filter 6
Graiangan SVG
- Eliips dengan gelombang linear horizontal dari kuning ke merah
- Eliips dengan gelombang linear vertikal dari kuning ke merah
- Eliips dan teks dengan gelombang linear horizontal dari kuning ke merah
- Eliips dengan gelombang radial dari putih ke biru
- Eliips yang memiliki gelombang radial dari putih ke biru
Variasi SVG
- Segiempat yang menghilang berulang-ulang dalam 5 detik
- Sebuah segiempat berwarna yang berubah dan terus bertambah
- Tiga segiempat berwarna yang berubah
- Pindah teks sepanjang jalur gerak
- Pindah, berputar, dan skala teks
- Pindah, berputar, dan skala teks + warna berubah berkelanjutan persegi yang tumbuh
- Putar Ellips
- Hal Sebelumnya Transisi Radial SVG
- Hal Berikutnya Panduan Referensi SVG
