ホームページ > 記事 > ウェブフロントエンド > HTML5 インライン SVG チュートリアルと Canvas との違い
HTML5 インライン SVG チュートリアルと Canvas との違い
- 零下一度オリジナル
- 2017-05-15 10:41:391509ブラウズ
SVGとは何ですか?
SVGはスケーラブルベクターグラフィックスのことですSVGはWeb用のベクターベースのグラフィックを定義するために使用されます
SVGはグラフィックを定義するために
XMLSVGはWorld Wide Webですコンソーシアム標準
SVG の利点
他の画像形式 (JPEG や GIF など) と比較して、SVG を使用する利点は次のとおりです:
SVG 画像はテキストを含めて編集できます
SVG 画像は検索、インデックス付け、スクリプト作成、または圧縮が可能
SVGはスケーラブルです
SVG画像はどの解像度でも高品質で印刷できます
SVGはさまざまな画質で使用できます ドロップされるケースは拡大されます
ブラウザのサポート
Internet Explorer 9以降、Firefox、Opera、
Chrome、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 オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。 キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。
【関連推奨事項】
1.
特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード2.
無料の h5 オンラインビデオチュートリアル以上がHTML5 インライン SVG チュートリアルと Canvas との違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。