最新のWeb開発のチュートリアル

HTML5 SVG

❮前 次の章❯

SVGとは何ですか？

  • SVGはスケーラブルベクターグラフィックスの略です
  • SVGは、Web用グラフィックスを定義するために使用されます
  • SVGはW3C勧告です

スケーラブルベクターグラフィックス（SVG）は、インタラクティブとアニメーションのためのサポートを有する2次元グラフィックスのためのXMLベースのベクター画像フォーマットです。 SVGの仕様は、1999年以来、World Wide Webコンソーシアム（W3C）によって開発されたオープンスタンダードです。

SVG画像とその振る舞いは、XMLテキストファイルで定義されています。 これは、彼らが、検索インデックスを付け、スクリプト、および圧縮することができることを意味します。 XMLファイル、SVG画像を作成し、任意のテキストエディタで編集することができ、同様のソフトウェアを描くと。

すべての主要な近代的なWebブラウザ - を含むMozilla Firefoxのは、Internet Explorer、Google Chromeの、オペラ、サファリ、およびMicrosoft SVGレンダリングのサポートをエッジは、持っています。

HTML <svg>要素

HTML <svg>要素(introduced in HTML5) SVGグラフィックスのための容器です。

SVGは、描画パス、ボックス、円、テキスト、グラフィックイメージのためのいくつかの方法があります。

ブラウザのサポート

表中の数字は完全にサポートする最初のブラウザのバージョンを指定<svg>要素を。

素子
<svg> 4.0 9.0 3.0 3.2 10.1

SVGサークル

例

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
»それを自分で試してみてください

SVG長方形

RGB（0,0,0） ">

例


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

»それを自分で試してみてください

SVG角丸長方形

申し訳ありませんが、お使いのブラウザはインラインSVGをサポートしていません。

例


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

»それを自分で試してみてください

SVGスター

申し訳ありませんが、お使いのブラウザはインラインSVGをサポートしていません。

例


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

»それを自分で試してみてください

SVGロゴ

SVGは申し訳ありませんが、お使いのブラウザはインラインSVGをサポートしていません。

例


<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>
  Sorry, your browser does not support inline SVG.
</svg>

»それを自分で試してみてください

SVGとの違いCanvas

SVGはXMLで2Dグラフィックスを記述するための言語です。

Canvasその場で、2Dグラフィックスを描画する(with a JavaScript) 。

SVGは、すべての要素がSVG DOM内で利用可能であることを意味し、XMLベースです。 あなたは、要素のためのJavaScriptのイベントハンドラを添付することができます。

SVGにおいては、各描画された形状は、オブジェクトとして記憶されます。 SVGオブジェクトの属性が変更された場合、ブラウザが自動的に形状を再レンダリングすることができます。

キャンバスは、画素毎にレンダリングされます。 グラフィックが描かれた後のキャンバスに、それはブラウザによって忘れられています。 その位置を変更する必要がある場合は、シーン全体をグラフィックでカバーされているかもしれないオブジェクトを含め、再描画する必要があります。

キャンバスとSVGの比較

以下の表は、キャンバスとSVGの間にいくつかの重要な違いを示しています。

Canvas SVG
  • 解像度に依存
  • イベントハンドラのサポートはありません
  • 悪いテキストのレンダリング機能
  • あなたは、結果として得られる画像を保存することができます.pngまたは.jpg
  • グラフィックを多用するゲームに適し
  • 解像度に依存しません
  • イベントハンドラのサポート
  • 大規模なレンダリング領域を持つアプリケーションに最適(Google Maps)
  • スローレンダリング複雑な場合(anything that uses the DOM a lot will be slow)
  • ゲームアプリケーションに適していません

SVGの詳細については、私たちのお読みくださいSVGのチュートリアルを 。

❮前 次の章❯