En son web geliştirme öğreticiler
 

SVG Örnekler


Deneyin-it Yourself Örnekler

Aşağıdaki örnekler HTML koduna doğrudan SVG kodu gömmek.

Bu Firefox, Internet Explorer 9, Google Chrome, Opera ve Safari tarafından desteklenmektedir.


SVG Örnekler

SVG Temel Şekiller

Bir daire
Bir dikdörtgen
Opaklığa sahip bir dikdörtgen
Opaklık 2 olan bir dikdörtgen
Köşeleri yuvarlatılmış bir dikdörtgen
bir elips
Birbirinin üstüne üç elips
İki elips
bir çizgi
Üç tarafı olan bir çokgen
Dört kenarlı bir poligon
Bir yıldız
Başka bir yıldız
bir Çoklu çizgi
Başka Çoklu çizgi
Bir yol
Bir ikinci dereceden Bezier eğrisi
Bir metni yazın
Bir metin döndürme
Birkaç hatlarda Metin
Bir bağlantı olarak Metin
Bir çizgi, metin veya anahat rengini tanımlar (stroke)
Bir çizgi, metin veya çerçeve genişliğini tanımlar (stroke-width)
Açık bir yola uçlarının farklı tanımlar (stroke-linecap)
Kesik tanımlar hatları (stroke-dasharray)

SVG Filtreleri

feGaussianBlur - bulanıklık efekti
feOffset - ofseti görüntünün üst bölümde, harman, bir dikdörtgen ofset
feOffset - ofset görüntü bulanıklığını
feOffset - gölge siyah yapmak
feOffset - Bir renk olarak gölge tedavi
Bir feBlend filtresi
Filtre 1
Filtre 2
Filtre 3
Filtre 4
Filtre 5
Filtre 6

SVG Gradyanları

Sarıdan kırmızıya yatay doğrusal bir gradyanı ile bir elips
Sarıdan kırmızıya dikey bir lineer gradyan ile bir elips
Sarıdan kırmızıya yatay doğrusal bir gradyanı ile bir elips, bir metin
Mavi, beyaz bir radyal gradyan ile bir elips
Mavi, beyaz bir radyal gradyan ile bir başka elips

SVG Çeşitli

Defalarca 5 saniye boyunca solup Dikdörtgen
Rengi değişir Büyüyen dikdörtgen
Rengi değişir Üç dikdörtgenler
Bir hareket yolu boyunca metni taşıyın
Bir hareket yolu boyunca, Taşı döndürme ve ölçek metni
Taşıyabilir, döndürebilir ve ölçek bir hareket yolu boyunca metin + büyüyen dikdörtgen rengi değişecek
üç nokta Döner