SVGとは-H5 チュートリアル-php.cn

SVGとは

青灯夜游

リリース： 2018-12-01 09:28:40

オリジナル

38473 人が閲覧しました

SVGとは何ですか? SVG は何に使用されますか? SVG を使用する理由この記事では、SVG の関連知識を紹介し、SVG を使用する利点について説明します。具体的な内容を見てみましょう。

SVGとは

SVG とは何ですか?用途は何ですか?

SVG は、Web やその他の環境でさまざまなグラフィックを表示するために使用される XML ベースのベクターグラフィック形式です。これにより、スケーラブルな 2 次元グラフィックを作成でき、CSS または JavaScript 経由で使用できます。操作を実行します。 [関連ビデオチュートリアルの推奨事項: XML チュートリアル ]

SVG は、スケーラビリティ、応答性、対話性、プログラマビリティ、パフォーマンス、およびアクセシビリティに関する現在の Web 開発要件に最適に対応できます。

SVG はベクトルベースであるため、グラフィックを拡大しても忠実度が低下したり失われたりすることはありません。大きいサイズに合わせて再描画するだけなので、レスポンシブ Web デザインなどのマルチコンテキストシナリオに最適です。

なぜ SVG を使用するのでしょうか?

SVG の真の価値は、現代の Web 開発における最も困難な問題の多くを解決できることです。SVG を使用する利点と、SVG によってどのような問題が解決されるかを見てみましょう。

1. スケーラビリティと応答性

SVG は、ブラウザ内でグラフィックをレンダリングするために (ピクセルグリッドではなく) 形状、数値、座標を使用するため、解像度に依存しません。そして無限に拡張可能です。考えてみると、円を作成する手順はペンを使用してもタブレットを使用しても同じで、比率が変わるだけです。

SVG を使用すると、さまざまな形状、パス、テキスト要素を組み合わせてさまざまな視覚効果を作成し、どのサイズでも鮮明で鮮明に見えるようにすることができます。

対照的に、GIF、JPG、PNG などのラスターベースの形式は寸法が固定されているため、拡大縮小するとピクセル化されてしまいます。さまざまなレスポンシブイメージング技術がピクセルグラフィックスにとって有益であることが証明されていますが、それらは SVG の無限の拡張 (スケーリング) 機能と完全に競合することはできません。

2. プログラム可能性と対話性

SVG は完全に編集可能でスクリプト化が可能で、CSS または JavaScript を介してさまざまなアニメーションやインタラクションを図面に追加できます。

3. アクセシビリティ

SVG ファイルはテキストベースであり、検索とインデックス付けが可能です。これにより、スクリーンリーダー、検索エンジン、その他のデバイスで読み取れるようになります。

4. パフォーマンス

Web パフォーマンスに影響を与える最も重要な側面の 1 つは、Web ページで使用されるファイルのサイズです。 SVG グラフィックスは、GIF、JPG、PNG などのラスターグラフィックスと比較して、一般にファイルサイズが小さくなります。

SVG を使用する一般的な使用例

SVG には実際的な使用例がたくさんあります。最も重要な使用例をいくつか見てみましょう。

1. シンプルなイラストと図

ペンと鉛筆で作成された従来の描画はすべて SVG 形式に完全に変換できます。

2. ロゴとアイコン

ロゴとアイコンは、サイズに関係なく、一般に同じように明瞭さと鮮明さを必要とします。 SVG 補完と SVG アイコンがよりアクセスしやすくなり、見つけやすくなりました。