HTML5 インライン SVG チュートリアルと Canvas との違い-H5 チュートリアル-php.cn

HTML5 インライン SVG チュートリアルと Canvas との違い

零下一度

リリース： 2017-05-15 10:41:39

オリジナル

1528 人が閲覧しました

SVGとは何ですか?

SVGはスケーラブルベクターグラフィックスのことですSVGはWeb用のベクターベースのグラフィックを定義するために使用されます

SVGはグラフィックを定義するために

XML

形式を使用しますSVG画像は拡大またはサイズ変更されます

SVGはWorld Wide Webですコンソーシアム標準

SVG の利点

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

SVG 画像はテキストを含めて編集できます

SVG 画像は検索、インデックス付け、スクリプト作成、または圧縮が可能

SVGはスケーラブルです

SVG画像はどの解像度でも高品質で印刷できます

SVGはさまざまな画質で使用できますドロップされるケースは拡大されます

ブラウザのサポート

Internet Explorer 9以降、Firefox、Opera、

Chr

ome、Safari はインライン SVG をサポートしています。 SVG を HTML ページに直接埋め込む

HTML5

では、SVG 要素を HTML ページに直接埋め込むことができます: 例

<!DOCTYPE html>
<html>
<body>
<svg xmlns="www.php.cn/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

ログイン後にコピー

結果:

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

詳細はこちらSVG チュートリアルについては、SVG チュートリアルを参照してください。

SVG と

Canvas の違い

SVG は、XML を使用して 2D グラフィックスを記述する言語です。

Canvas は

JavaScript

を使用して 2D グラフィックを描画します。 SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。要素に JavaScript

イベントハンドラー

を添付できます。 SVG では、描画されたすべての形状は

オブジェクト

とみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

【関連推奨事項】

特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード2.

無料の h5 オンラインビデオチュートリアル

3. cn オリジナル html5 ビデオチュートリアル

以上がHTML5 インライン SVG チュートリアルと Canvas との違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。