HTML <svg> etiketi

Tanım ve Kullanım

<svg> etiketi, SVG grafiklerinin kapısı olarak tanımlanır.

SVG, çizgi, çerçeve, daire, metin ve grafik görseller çizmek için çeşitli yöntemler sunar.

SVG hakkında daha fazla bilgi öğrenmek için lütfen bizim SVG Eğitimi。

Daha fazla bilgi için lütfen:

HTML Eğitimi:HTML SVG

SVG Eğitimi:SVG Eğitimi

Örnek

Örnek 1

Daire çizmek:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Kendiniz Deneyin

Örnek 2

Dikdörtgen çizmek:

<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>

Kendiniz Deneyin

Örnek 3

Körüklü köşeli çizgi çizmek:

<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>

Kendiniz Deneyin

Örnek 4

Yıldız çizmek:

<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>

Kendiniz Deneyin

Örnek 5

SVG logo'yu çizmek:

<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>
</svg>

Kendiniz Deneyin

Tarayıcı Desteği

Tablo'daki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1