SVG nedir?
- SVG Ölçeklenebilir Vektör Grafikleri açılımı
- SVG Web için grafik tanımlamak için kullanılır
- SVG W3C için genelde önerilir
HTML <svg> Eleman
HTML <svg> elemanı (introduced in HTML5) SVG grafikler için bir kaptır.
SVG çizim yolları, kutular, daireler, metin ve grafik görüntüler için çeşitli yöntemler vardır.
Tarayıcı Desteği
Tablodaki rakamlar tamamen destekleyen ilk tarayıcı sürümü belirtmek <svg> elemanı.
| Eleman | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Çember
Örnek
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html> Kendin dene " SVG Dikdörtgen
Örnek
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
Kendin dene " SVG Yuvarlak Dikdörtgen
Örnek
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Kendin dene " SVG Yıldız
Örnek
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"
/>
</svg>
Kendin dene " SVG Logo
Örnek
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>
Kendin dene " SVG ve Arasındaki Farklar Canvas
SVG XML 2D grafik açıklayan bir dildir.
Canvas anında, 2D grafik çizen (with a JavaScript) .
SVG her eleman SVG DOM içinde mevcuttur, yani XML tabanlı olduğunu. Bir element için JavaScript olay işleyicileri ekleyebilirsiniz.
SVG olarak, her bir çekilmiş şekil bir nesne olarak anılmaktadır. Bir SVG nesnenin nitelikleri değiştirilirse, tarayıcı otomatik şekil yeniden oluşturabilir.
Tuval piksel piksel oluşturulur. Grafik çizilir kez tuval olarak, bu tarayıcı tarafından unutulur. pozisyonu değiştirilmelidir olursak tüm sahne grafiği kapsamında olabilecek tüm nesneleri de dahil yeniden çizilmesi gerekmektedir.
Tuval ve SVG Karşılaştırılması
Aşağıdaki tablo Tuval ve SVG arasında bazı önemli farklılıklar gösterir:
| Canvas | SVG |
|---|---|
|
|
SVG hakkında daha fazla bilgi edinmek için lütfen okuyun SVG Eğitimi .