SVGは、スケーラブルベクトルグラフィックスの略語であり、スケーラブルベクトルグラフィックスです。 1998年、World Wide Web Allianceは、XML -SVGを介してベクトルグラフィックを表現するテクノロジーを開発するためのワーキンググループを設立しました! SVGはXMLファイルでもあるため、SVGはXMLのオープン性、移植性、および互換性の利点も継承しています。この記事では、HTML5でSVGを紹介します。必要な場合は、 SVGの背景を参照してください。
SVGは、スケーラブルベクトルグラフィックスの略語であり、スケーラブルベクトルグラフィックスです。 1998年、World Wide Web Allianceは、XML -SVGを介してベクトルグラフィックを表現するテクノロジーを開発するためのワーキンググループを設立しました! SVGはXMLファイルでもあるため、SVGはXMLのオープン性、ポータビリティ、インタラクティブ性の利点も継承しています。現在、ほとんどすべての主流ブラウザがSVGをサポートしており、次のような互換性情報をより多く入手できます。
<Embed>または<Object>要素を使用して、基本的なSVGグラフィックを表示します。
<img>を使用してSVGグラフィックを表示します。
SVGグラフィックスをCSSの背景画像として適用します。
<SVG>タグをHTMLドキュメントで直接使用します(HTML5サポートが必要です)。
CSSまたは外部オブジェクト要素を使用するHTML要素に、SVG変換、フィルター、およびその他の特殊効果を使用します。
SVGオブジェクトにPhotoshopのような効果を使用して、ぼかしや色の処理を使用します。
SVG画像にアニメーションを使用します。
SVGフォントを使用します。
* SVG
*基本コンテンツ
* SVGはHTML5専用ではありません
* HTML5は、SVGネイティブに関するコンテンツを提供します
* HTML5が登場する前に、SVGコンテンツがありました
* svg、単にベクトルとして置くだけです
* SVGファイルには.svgの拡張機能があります
* SVGはXML構文を使用します
* コンセプト
* SVGは、XMLテクノロジーを使用して2次元グラフィックスを記述する言語です
* SVGの機能
* SVG描画グラフィックスは検索エンジンによってキャプチャできます
*画質が低下しないと、SVGが拡大されます
* SVGとキャンバスの違い
* SVG
*解像度の依存関係はありません
*サポートイベントバインディング
*大規模なレンダリングエリアのプログラム(Baiduマップなど)
* Webゲームの実装に使用することはできません
*キャンバス
*解像度に依存します
*イベントバインディングはサポートされていません
*最も適切なWebゲーム
* .jpg形式の画像として保存します
* 目的
* Webページの小さなアイコン
* Webページの動的効果(アニメーション効果)
* HTML5でSVGを使用します
* <svg> </svg>要素を使用します
*関数 - <canvas>要素に似ています
*デフォルトサイズは300px* 150pxです
* CSSスタイルを使用します
* SVGを使用してグラフを描画するには、<SVG>要素を定義する必要があります。
*グラフを描きます
*長方形の要素
コードをコピーします