HTML SVG Grafikleri
SVG, vektör tabanlı grafikleri XML biçiminde tanımlar.
SVG nedir?
- SVG, Ölçeklenebilir Vektör Grafikleri anlamına gelir
- SVG, Web için grafikleri tanımlamak için kullanılır
- SVG, bir W3C önerisidir
HTML <svg> Öğesi
HTML <svg>öğesi, SVG grafikleri için bir kapsayıcıdır.
SVG'nin yollar, kutular, daireler, metin ve grafik görüntüleri çizmek için çeşitli yöntemleri vardır.
Tarayıcı Desteği
Tablodaki sayılar,
<svg>öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Çemberi
Ö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>
SVG Dikdörtgeni
Ö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>
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>
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>
SVG Logosu
Ö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>
SVG ve Canvas Arasındaki Farklar
SVG, XML'de 2B grafikleri tanımlamak için kullanılan bir dildir.
Tuval, anında (bir JavaScript ile) 2D grafikler çizer.
SVG, XML tabanlıdır; bu, her öğenin SVG DOM içinde mevcut olduğu anlamına gelir. Bir öğe için JavaScript olay işleyicileri ekleyebilirsiniz.
SVG'de çizilen her şekil bir nesne olarak hatırlanır. Bir SVG nesnesinin öznitelikleri değiştirilirse, tarayıcı şekli otomatik olarak yeniden oluşturabilir.
Kanvas, piksel piksel işlenir. Tuvalde, grafik çizildikten sonra tarayıcı tarafından unutulur. Konumunun değiştirilmesi gerekiyorsa, grafiğin kapsadığı nesneler de dahil olmak üzere tüm sahnenin yeniden çizilmesi gerekir.
Canvas ve SVG Karşılaştırması
Aşağıdaki tablo Canvas ve SVG arasındaki bazı önemli farklılıkları göstermektedir:
| Canvas | SVG |
|---|---|
|
|
SVG Eğitimi
SVG hakkında daha fazla bilgi edinmek için lütfen SVG Eğitimimizi okuyun .