SVG チュートリアル

SVG コース推薦：

SVG それは可縮尺ベクターグラフィック（Scalable Vector Graphics）を指します。 XML ベクターグラフィックの形式定義

各章の例

「実際に試してみる」エディタを使用してSVGを編集し、ボタンをクリックして結果を確認できます。

SVG インスタンス

<html>
<body>
<h1>私の最初の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 それは可縮尺ベクターグラフィックを指します
  • SVG ベクターグラフィックに基づくWebグラフィックを定義するために使用
  • SVG XML形式でグラフィックを定義
  • SVG ファイルの各要素と各属性にアニメーションを設定できます
  • SVG それはW3C推薦標準です
  • SVG 他のW3C標準と統合されています、例えば DOM および XSL

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 画像はどんなテキストエディタでも作成および編集ができます
  • SVG 画像は検索、索引、スクリプト化、圧縮ができます
  • SVG 画像は可拡張です
  • SVG 画像はどんな解像度でも高品質に印刷できます
  • SVG 画像は拡張可能です
  • SVG 画像は拡大やサイズ調整をしても品質が失われません
  • SVG それはオープン標準です
  • SVG ファイルは純粋な XML

を作成 SVG 画像

SVG 画像はどんなテキストエディタでも作成できますが、ドローイングプログラム（例えば InkscapeSVG イメージを作成することは通常より簡単です。