SVGチュートリアル
SVGはScalableVectorGraphicsの略です。
SVGは、ベクターベースのグラフィックをXML形式で定義します。
各章の例
「TryitYourself」エディターを使用すると、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>
あなたがすでに知っておくべきこと
続行する前に、次の基本的な知識が必要です。
- HTML
- 基本的なXML
これらのテーマを最初に学習したい場合は、 ホームページでチュートリアルを見つけてください。
SVGとは何ですか？
- SVGはScalableVectorGraphicsの略です
- SVGは、Web用のベクターベースのグラフィックスを定義するために使用されます
- SVGはグラフィックをXML形式で定義します
- SVGファイルのすべての要素とすべての属性をアニメーション化できます
- SVGはW3C勧告です
- SVGは、DOMやXSLなどの他のW3C標準と統合されます
SVGはW3C勧告です
SVG 1.0は、2001年9月4日にW3C勧告になりました。
SVG 1.1は、2003年1月14日にW3C勧告になりました。
SVG 1.1（Second Edition）は、2011年8月16日にW3C勧告になりました。
SVGの利点
他の画像形式（JPEGやGIFなど）よりもSVGを使用する利点は次のとおりです。
- SVG画像は、任意のテキストエディタで作成および編集できます
- SVG画像は、検索、インデックス作成、スクリプト作成、および圧縮が可能です
- SVG画像はスケーラブルです
- SVG画像は、任意の解像度で高品質で印刷できます
- SVG画像はズーム可能です
- SVGグラフィックは、ズームまたはサイズ変更しても品質が低下することはありません
- SVGはオープンスタンダードです
- SVGファイルは純粋なXMLです
SVG画像の作成
SVG画像は任意のテキストエディタで作成できますが、 Inkscapeなどの描画プログラムを使用してSVG画像を作成する方が便利な場合がよくあります 。