SVG Örnekleri
- Önceki Sayfa SVG Düzlü Geçişler
- Sonraki Sayfa SVG Referans Kılavuzu
Örnekleri kendiniz deneyin
Aşağıdaki örnek SVG kodunu doğrudan HTML koduna entegre eder.
Firefox, Internet Explorer 9, Google Chrome, Opera ve Safari bunu destekler.
SVG Örnekleri
SVG temel şekiller
- Daire
- Uzun rectangle
- Şeffaflık olan rectangle
- Şeffaflık 2 olan rectangle
- Küçük köşeli rectangle
- Elips
- Üç elips birbirine gömülü
- İki elips
- Çizgi
- Üç kenarlı çokgen
- Dört kenarlı çokgen
- Yıldız
- Diğer bir yıldız
- Çizgi
- Diğer bir çizgi
- Yol
- İkinci dereceden Bézier eğrisi
- Bir parça metin yazma
- Metni döndürme
- Çok satırlı metin
- Bağlantılı metin
- Çizgi, metin veya kontur rengini tanımlama (stroke)
- Çizgi, metin veya kontur genişliğini tanımlama (stroke-width)
- Açık yolda farklı türdeki bitişlerin tanımlama (stroke-linecap)
- Dolgu çizgisi (stroke-dasharray) tanımlama
SVG Filtreler
- feGaussianBlur - Yumuşatma etkisi
- feOffset - Bir rectangle kaydırın ve orijinal resmi kaydırılmış resmin üstüne karıştırın
- feOffset - Yumuşakta kaydırılan gölgeli resmi
- feOffset - Gölgeleri siyah yapın
- feOffset - Gölgeleri belirli bir renge işleyin
- feBlend filtresi
- Filtre 1
- Filtre 2
- Filtre 3
- Filtre 4
- Filtre 5
- Filtre 6
SVG geçiş
- Beyazdan maviye yatay lineer geçişli bir elips
- Beyazdan maviye dikey lineer geçişli bir elips
- Beyazdan maviye yatay lineer geçişli bir elips ve metin
- Beyazdan maviye radyal geçişli bir elips
- Beyazdan maviye radyal geçişli bir elips
SVG karışıklık
- 5 saniye içinde tekrar tekrar ortadan kaybolan üçgenimsi şekil
- Renk değiştiren sürekli büyüyen üçgenimsi şekil
- Renk değiştiren üçgenimsi şekil
- Metni Hareket Yolunu Takip Ederek Döndür
- Metni Hareket Yolunu Takip Ederek Döndür ve Genişlet
- Metni Hareket Yolunu Takip Ederek Döndür ve Genişlet, Renk Değiştiren Artan Dikdörtgen
- Dönen Elips
- Önceki Sayfa SVG Düzlü Geçişler
- Sonraki Sayfa SVG Referans Kılavuzu
