svg：スケーラブルベクトルグラフィックスの利點とアプリケーション

SVG（Scalable Vector Graphics）は、形狀、線、曲線、テキスト、色情報を組み合わせて畫像を構築する一意の畫像ファイル形式です。 JPG、PNG、GIFなどのピクセルベースの形式とは異なり、SVGファイルはグラフィックを作成するための「レシピ」に似ており、畫質を失ったりファイルサイズを増やすことなくズームインしたりできます。

svgとは何ですか？

SVG（Scalable Vector Graphics）は、形狀、線、曲線、テキスト、色情報を組み合わせて畫像を構築する畫像ファイル形式です。最も一般的に使用される畫像形式（JPG、PNG、GIFなど）は、ピクセルの特定の順列として畫像データを記録しますが、SVGファイルは特定のグラフィックを作成するための「書面による説明」または「レシピ」に似ています。これは、SVG（優(yōu)れたレシピのような）を畫質を失うことなく、ファイルサイズを増やすことなく拡大できることを意味します。 SVGコードは、HTMLまたはXMLに似た性質を持つテキストベースの人間読み取り可能な言語です。

最新のWebブラウザで非常にシンプルなSVGファイルを開くと、次のことがわかります。

テキストエディターで同じSVGファイルを開くと、次のように表示されます。

例に示すように、SVGドキュメントは、形狀、線、曲線、色、およびテキストを説明するプレーンテキストファイルにすぎません。それらは人間によって読み、編集することができ、CSSまたはJavaScriptを介して操作できます。これにより、SVGは、従來のPNG、GIF、またはJPG畫像形式では一致できない柔軟性と汎用性を提供します。

基本的なテキストエディター（上記の例のように）を使用して簡単なSVG畫像を作成することは可能ですが、ほとんどのSVGは最新のベクトルグラフィックスアプリケーションを使用して作成されます。人気のあるSVGエディターには、

が含まれます

• figma
• adobe Illustrator
• boxy svg（安い）
• svgエディター（無料）

以下は、典型的なSVG畫像の例です。この60kbのイラストは、ほとんどすべてのオンライン環(huán)境で使用できます。ベクトルとして、ビューポートまたは要素の幅要件を満たすためにすぐにスケーリングすることを確認できます。

SVGは1990年代に生まれました。當初、サポートが不十分で、2000年代の大部分で見落とされていましたが、2010年代半ば以降には狀況が変わりました?，F(xiàn)在、すべての最新のWebブラウザーがSVGを完全にレンダリングし、すべてのプロフェッショナル描畫アプリケーションがSVGエクスポートオプションを提供しています。 JPGやPNGなどの従來のラスターグラフィックは寫真畫像に適していますが、SVGは、スケーラビリティ、応答性、インタラクティブ性、プログラム性、パフォーマンス、アクセシビリティに関する今日のWeb開発のニーズを満たすのに適しています。

SVGキャンバスとHTML5キャンバスの違いは何ですか？

これら2つのテクノロジーは非常に異なりますが、この質問はよく尋ねられます。 SVGおよびキャンバスの各テクノロジーの用途、利點、および短所を分解して、毎回正しい選択をすることができます。

SVGの利點は、現(xiàn)代のWeb開発において最も困難な問題の多くを解決できることです。これらの質問のいくつかを簡単に見てみましょう。

スケーラビリティと応答性
慎重に考えると、ナイキのロゴを構成する形狀、パス、テキストは、標準の名刺や高さ20フィートの巨大な建物のロゴに描寫すると同じです。測定単位のみが変更されました。 SVGを使用すると、これらの畫像がどのサイズでも鋭く鋭いことを確認できる畫像を作成できます。対照的に、GIF、JPG、PNGなどのピクセルベースの形式は、LEGOレンガを使用するようなものです。大きいサイズと詳細が必要な場合は、唯一の解決策はブロックを追加することです。さまざまなレスポンシブ畫像技術は、ピクセルグラフィックスにとって価値があることが証明されていますが、SVGの無限にスケーリングする能力と実際に競合することはできません。

プログラマ性とインタラクティブ性
SVG畫像は別々のコンポーネント（形狀、線、曲線、テキスト）で構成されているため、これらのコンポーネントを見つけるためにスクリプトと動作を自由に使用できます。さまざまなアニメーションとインタラクションを、CSSおよび/またはJavaScriptを介してインラインSVGグラフィックスに追加できます。 JPGまたはPNGの畫像要素を見つける同等の方法はありません。

アクセシビリティ
SVGファイルはテキストベースであるため、それらに含まれる情報は、ピクセル畫像にあるものよりも常に検索とインデックスが容易です。これは、SVG自體にアクセスできることを意味しますか？いいえ。不十分に準備されたSVGは、不適切にマークされたPNGと同じくらい役に立たない。ただし、SVGチャートデータは、同等のJPGチャートよりも、スクリーンリーダー、検索エンジン、およびその他のテキスト消費サービスが抽出するのが簡単です。

4. パフォーマンス

ネットワークパフォーマンスに影響を與える最も重要な側面の1つは、Webページで使用されるファイルサイズです。慎重に準備すれば、比較的小さなSVGファイルを使用して、大きく複雑な畫像を表示できます。

SVGの最良の用途は何ですか？

SVGには多くの実際的なユースケースがあります。最も重要なものについて説明しましょう。

• イラストとチャート

ペンと鉛筆で作るのに適した従來の図面は、SVG形式に完全に変換する必要があります。 SVGは、3D印刷パターン、Etsyアートワーク、Tシャツのデザイン、刺繍パターン、さらには結婚式の計畫資料を提供するためによく使用されます。

• ロゴとアイコン

ロゴとアイコンは、ボタンのサイズであろうとビルボードのサイズであろうと、どんなサイズでもシャープでシャープでなければなりません。これにより、SVGに最適です。さらに、SVGアイコンはアクセスしやすく、見つけやすくなります。

• アニメーション

クールなラインの描畫効果を含むSVGグラフィックを備えた魅力的なアニメーションを作成できます。実際、SVGコードは、CSSアニメーション、JavaScriptライブラリ、および獨自のスミルアニメーション機能と対話できます。

• インタラクティブ（チャート、グラフィックス、インフォグラフィック、マップ）

SVGを使用して、ユーザーアクションまたはその他のイベントに基づいてデータをプロットし、動的にデータを更新できます。インタラクティブSVGインフォグラフィックとSVGインタラクティブロードトリップマップを參照してください。

• 特殊効果

SVGを使用して、形狀の変形や有機粘著性の効果など、多くのリアルタイム効果を実現(xiàn)できます。

• インターフェイスとアプリケーションをビルド

SVGを使用すると、HTML5、Webベースのアプリケーション、およびリッチインターネットアプリケーション（RIA）と統(tǒng)合できる複雑なインターフェイスコンポーネントを作成できます。

概要

今、あなたはSVGとは何か、そしてなぜそれらがWebにとても良いのかを知っています。次に、SVGを使用してCSSを使用するさまざまな方法、およびWebページにSVGに含める方法と操作方法に関するCraigの記事をご覧ください。または、より深く掘り下げたい場合は、Chris Coyierの本Practical SVGをご覧ください。

（以下はFAQパーツであり、重複を避けるために元のテキストに従って書き直され、合理化されています）

に関するよくある質問

• JPEGやPNGなどの他の畫像形式と比較して、SVGの利點は何ですか？

• SVGファイルはアニメーション化できますか？ はい、Smil、CSS、JavaScriptの3つのアニメーションメソッドをサポートしています。

• SVGファイルを最適化してパフォーマンスを向上させるにはどうすればよいですか？

  SVGコードを削減したり、形狀を簡素化したりできます。

• SVGファイルにはハイパーリンクを含めることができますか？

  はい。

• 検索エンジンインデックスSVG畫像はありますか？

  はい、しかし適切な代替テキストが必要です。

以上がSVGとは何ですか？ SVGファイルへのガイドの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。