SVG画像を使用する理由:SVGをアニメーション化して超高速にする方法

なぜSVGを使用しているのですか?

Web開発セクターは急速に成長しており、SVG(スケーラブルベクターグラフィックス)画像の人気が高まっています。ベクター画像として、SVGは、XML形式のグラフィック形状とテキストを構成する線と曲線の位置と色を定義する数式で構成されます。SVGは、アイコン、ロゴ、グラフィックデザイン、およびフォントに使用されます。

SVGの利点を考えれば、SVGの使用は簡単な選択です。クライアントにとっては、どのデバイスでも優れた品質が得られます。開発者としての私たちにとって、SVGを使用する理由はさらにたくさんあります。

ここで、SVGの利点のいくつかについて説明しましょう。

1.テキストベースのフォーマット

SVG要素にはテキストが含まれているため、Webサイトのアクセシビリティが大幅に向上します。しかし、主な利点は、このテキストが検索エンジンによって索引付けされることです。また、ユーザーはGoogle経由でSVGファイルを見つけることができます。

2.スケーラビリティ

SVG画像の品質は解像度に依存しません。他の形式やアイコンフォントの画像とは異なり、SVGは、どの画面サイズのどのデバイスでも完全にシャープに見えます。スケーラビリティとは、Webサイト全体で同じ画像を使用するが、サイズが異なる場合、単一のSVGを使用することも意味します。PNGの場合のように、複数のコピーを作成する必要はありません。代わりに、同じ画像を埋め込み、そのサイズをSVGコードで直接定義します。

スケーラビリティ

3.高性能

パフォーマンスを優先する場合は、SVGを使用する必要があります。SVGでは、HTTPリクエストを画像ファイルにロードする必要はありません。ダウンロードするファイルがないため、ページの読み込みが速くなります。読み込み時間が短いほど、ウェブページのパフォーマンスが向上し、検索エンジンのランキングが高くなります。その結果、ユーザーエクスペリエンスが向上します。

4.ファイルサイズが小さい

単純なSVGファイルのサイズは、ファイルに含まれる色、レイヤー、グラデーション、効果、およびマスクによって定義されます。PNGまたはその他のラスターグラフィックファイルのサイズは、それを構成するピクセル数によって定義されます。PNG画像が大きいほど、サイズが大きくなります。ただし、これはSVGアイコンには当てはまりません。また、SVGは最適化できます。これについては、この記事の後半で説明します。

SVGファイルサイズ

5.多数の編集とアニメーションの機会

ラスター画像とは異なり、ベクター画像は特別なベクター描画プログラムとテキストエディターの両方で直接編集できます。CSSを介してSVGアイコンの色やサイズを直接編集することもできます。SVGのアニメーション化については、SMIL、Web Animations API、WebGL、またはCSSアニメーションを使用して行うことができます。下にスクロールして、SVG画像のCSSアニメーションの詳細を確認してください。

6. HTML、XHTML、およびCSSとの統合

W3Cによると、SVGは、「X / HTML、CSS、Javascriptなどの他の著名なオープンWebプラットフォームテクノロジーと統合および拡張するために」設計されました。そのため、さまざまな画像形式とは異なり、この形式は他のドキュメントやテクノロジーと簡単に統合できます。

7.W3Cドキュメントオブジェクトモデルのサポート

SVGに対するコミュニティのサポートが増えています。World Wide Web Consortium(W3C)は常に、インターネットはベクター画像なしでは実現できないと主張してきました。この組織は基本的にSVG形式を作成し、現在は積極的にサポートしています。

SVGの不便さは何ですか?

多数の小さなパーツがSVG形式の使用を不合理にします。画像が構成する部分が多いほど、画像のサイズは大きくなります。

たとえば、これは米国の2つのSVGマップです。2番目のものは最初のものより少し詳細です。ただし、詳細レベルが高くなると、ファイルサイズが約5倍になり、147KBと比較して33KBになります。このマップが単色でない場合、増加ははるかに大きくなります。

SVGマップ

画像が直線的で、いくつかの色が含まれている場合–SVGが解決策です。ただし、詳細が重要で、詳細が多い場合は、PNGまたはJPEGの方が適している可能性があります。

また、SVGは写真には使用できないことに注意してください。Webサイトで写真を使用する場合、SVGは最良のオプションではありません。あなたは間違いなくラスター画像フォーマットで行くべきです。

SVG画像を最適化する方法

ベクトル形式をレンダリングするときは、追加のSVGコードを作成する必要があります。最終結果は、さまざまなサービスを使用して最適化する必要があります。ほとんどの場合、SVGを最適化するために、Node.jsツールSVGOを使用します。使い方はとても簡単で、他のウェブサイトに画像をアップロードする必要はありません。

SVGOを使用したSVG最適化の例

SVGをアニメーション化する方法

Web上のSVGグラフィックは、さまざまな方法でアニメーション化できます。

  1. ネイティブSVGアニメーション仕様であるSMIL
  2. Web Animations APIは、ネイティブJavaScript APIであり、外部スクリプトをロードせずに、より複雑なシーケンシャルアニメーションを作成できます。
  3. WebGL
  4. CSSアニメーション

最後のものを考えてみましょう。

CSSアニメーションは、アイコンやローダーをアニメーション化するための大きなライブラリでサービスが過負荷になるのを防ぐために使用されます。

SVGの例を確認するには、アニメーション化された卵黄を確認してください。そのグラフィックデザインは最初にSketchで描画されました。

SVG gif

ご覧のとおり、アニメーションにはキーフレームアニメーション構文を使用しています。これは、要素の初期位置をid(0%)、遷移(50%)、および最終位置(100%)で設定することによって実装されます。スムーズなアニメーションを実現するために、初期値と最終値は等しくなります。

ここではいくつかある利点SVGアニメーションにCSSのアプローチを使用したのは:

  1. 外部ライブラリは必要ありません。
  2. プリプロセッサ(SassやLessなど)を使用すると、変数を作成できます。
  3. onAnimationEndおよびその他のアニメーションフックをネイティブJavaScriptで使用できます。
  4. このアプローチは、メディアクエリを使用してアニメーションを変更できるため、レスポンシブWebデザイン開発に簡単に使用できます。

CSSアニメーションを使用することの欠点は次のとおりです。

  1. アニメーションをよりリアルにする複雑な物理効果を生成することはできません。
  2. タイミングを調整する場合は、多くの再計算を行う必要があります。
  3. モバイルのCSSおよびSVGグラフィックは、奇妙なハックを必要とする場合があります。

例えば

それでも、シンプルで些細なCSSアニメーションを使用して、いくつかの興味深いプロジェクトを作成できます。たとえば、HTML、CSS、および少しのJavaScriptを使用して簡単なゲームビデオを作成しました。すべてのSVGはSketchで描画されました。このゲームの目的は、王女を救うことです。どのような状況でも、クリックするだけです。プロジェクトは私のGitHubで見つけることができます。

まとめる

SVGは、最適な画像形式です。それらはスケーラブルで軽量、テキストベースで効率的です。それらは編集、アニメーション化、統合が簡単です。重要なのは、Internet Explorer8とAndroid2.3を除くほとんどすべてのブラウザーでサポートされていることです。

スケーラブルベクターグラフィックス画像の操作方法を学ぶには時間がかかる場合がありますが、SVGの利点を考慮するとそれは報われる投資です。

ソフトウェアプロジェクトのアイデアはありますか?

私の会社のKeenEthicsは、経験豊富なWebアプリケーション開発者のチームです。同様のプロジェクトの無料見積もりが必要な場合は、お気軽にご連絡ください

あなたは私のキーンブログで同様の記事をもっと読むことができます。ユーザーテストの価値またはDockerを使用すべきでない7つのケースを読むことをお勧めします。

PS

また、この記事を共著してくれたMaryna Yanulと、最後まで読んでくれた読者に「ありがとう」と言いたいです。

KeenEthicsブログに投稿された元の記事はここにあります:SVGを使用する理由、時期、および方法の新しい展望。