SVG チュートリアル

SVG は、Scalable Vector Graphics の略です。

SVG は、XML 形式でベクトルベースのグラフィックスを定義します。


各章の例

"Try it Yourself" を使用すると、SVG を編集して、ボタンを押すせばその結果を表示することができます。

SVG の例

<html>
<body>

<h1>My first SVG</h1>

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

</body>
</html>
Try it Yourself »

前提条件

このチュートリアルは、次に関しては基本的に理解していることを前提にしています:

こちらを先に学習したい場合は、ホームページからチュートリアルを探してください。.


SVG とは?


SVG は W3C 勧告

SVG 1.0 は、2001年9月4日 に W3C 勧告となりました。

SVG 1.1 は、2003年1月14日 に W3C 勧告となりました。

SVG 1.1(第2版)は、2011年8月16日 に W3C 勧告となりました。


SVG の利点

他の画像形式(JPEG や GIF など)よりも SVG を使用する利点は次のとおりです:

SVG の主な競争相手は Flash です。

Flash を超える SVG の最大の利点は、他の規格(例えば、XSL や DOM)に準拠しています。 Flash は、オープンソースではない独自の技術に依存しています。


SVG 画像の作成

SVG 画像は、テキストエディタで作成することができますが、Inkscape のような 描画プログラムで作成する方が便利です。