HTML <svg> タグ

Paglilinaw at paggamit

<svg> Ang tag na <svg> ay nagtutukoy bilang container ng SVG graphics.

Mayroong maraming paraan para sa pagpipinta ng mga daan, bintana, bilog, teksto at larawan sa SVG.

Kung gusto mong matuto ng higit pa tungkol sa SVG, basahin ang aming SVG チュートリアル。

Mga pangalawang pagbabasa:

Tuturuan sa HTML:HTML SVG

Tuturuan sa SVG:SVG チュートリアル

Mga halimbawa

Halimbawa 1

Istrahula ang bilog:

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

自分で試してみる

Halimbawa 2

Istrahula ang parilyaring

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

自分で試してみる

Halimbawa 3

Istrahula ang may malaking sulok na parisukat:

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

自分で試してみる

Halimbawa 4

Istrahula ang bituin:

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

自分で試してみる

Halimbawa 5

Istrahula ang SVG logo:

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

自分で試してみる

ブラウザのサポート

このテーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

クロム エッジ ファイアフォックス サファリ オペラ
クロム エッジ ファイアフォックス サファリ オペラ
4.0 9.0 3.0 3.2 10.1