SVGとは何ですか？ SVGファイルへのガイド

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

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

svgとは何ですか？

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

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

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

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

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

が含まれます

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

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

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

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

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

SVGの利点は、現代の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を使用して、形状の変形や有機粘着性の効果など、多くのリアルタイム効果を実現できます。

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

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

概要

今、あなたは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 サイトの他の関連記事を参照してください。