SVG: スケーラブルで高速読み込みの画像フォーマット
公開: 2022-12-31SVG、または Scalable Vector Graphicsは、ベクターベースの画像を可能にするファイル形式です。 これは、JPG や PNG のようなピクセルのグリッドの代わりに、SVG 画像が数学的曲線と形状で構成されていることを意味します。 品質を損なうことなく任意のサイズに拡大縮小できるため、ロゴやイラストに最適です。 しかし、読み込み速度はどうですか？ SVG 画像は、実際には非常に高速にロードできることがわかりました。 それらは数学的形状で構成されているため、品質を損なうことなくかなり圧縮できます。 これは、多くの場合、ピクセルベースの対応するファイルよりもファイル サイズが小さいことを意味します。 そのため、読み込みの速い画像形式を探している場合は、SVG が最適なオプションです。
動的グラフィックとも呼ばれる Scalable Vector Graphics (SVG) を使用すると、Web ページを作成するのに最適な方法です。 ラスター イメージはグリッド上の正方形のピクセルで構成され、JPEG としてダウンロードできます。 JPEG、. PNG、またはその他のファイル形式。 大きな画像は、より多くのピクセルが使用され、結果的に画像が大きくなるため、ファイル サイズが大きくなります。 グラフィック解像度が高いと、Web パフォーマンスが低下する可能性があります。 レスポンシブ イメージ、つまり srcset 要素と picture 要素は、最新の HTML 修正です。
SVG は、特定の画像のサイズに関連しない一連の幾何学的な描画命令です。 Snap.svg のような単純な SVG ライブラリまたは Sculpt のような JavaScript ライブラリのいずれかを使用して、ベクター グラフィックスを描画できます。 SVG ファイルのバイト数を減らすには、パス ポイントの数を減らす必要があります。 グラフィックエディターを使用すると、すべてをエクスポートできます。 そうしないと、SVG コードが独自のマークアップと不足している機能で肥大化する可能性があります。 Adobe Illustrator では、単純化パネルを使用してパス ポイントをさらに単純化できるようになりました。 SVG 最適化ツールを使用することで、より多くのバイトを圧縮することができます。
数百万のピクセルを持つラスター イメージとは対照的に、SVG イメージのサイズは、解像度ではなく数学的計算によって決定されます。 JPEG ファイルのファイル サイズは、ラスター イメージに比べて比較的小さいため、大量の情報を運ぶことができます。
SVG は、より少ないオブジェクトまたはより大きなサーフェスを使用する場合に、より優れたパフォーマンスを提供します。 Canvas は、表面積またはオブジェクト数に関しては、より優れたパフォーマンスを提供します。 従来のグラフィックスに対するベクター グラフィックスの主な利点は、それらがベクターベースであることです。
他のタイプの画像フォーマットより軽量で高速に使用できるため、Web 上のグラフィック用の他のタイプの画像フォーマットに代わる優れた方法です。
SVG は画像よりも速く読み込まれますか?
SVG ファイルのサイズと複雑さ、ブラウザーでの SVG のサポート レベル、ユーザーのインターネット接続の速度など、さまざまな要因に依存するため、この質問に対する明確な答えはありません。 ただし、一般的に、 SVG ファイルは同等の画像ファイルよりもファイル サイズが小さいため、読み込み時間が短縮される可能性があります。
XML 属性とコメントが原因で、Adobe illustrator、Inkscape、またはその他のツールは、正しくない、または不完全なスケッチ コードを生成する場合があります。 肥大化が解消されると、ファイル サイズが大幅に縮小され、エンド ユーザーの読み込み速度が向上します。 このガイドに従うことで、ページの速度を低下させている可能性のある不要な SVGを削除できます。 要素の唯一の属性には、xmlns タイプ (.svg 要素に 1 つある場合) が必要です。 ビューボックスの寸法は、インライン ビューボックスによって決定されます (インライン ビューボックスではなく、寸法のみです。この画像にはアートボードがあります (物理的なサイズではありません!)。個人。
これにより、これらのツールを使用した場合の 609 バイトのファイル サイズの縮小と比較して、300 バイトのファイル サイズが縮小されました。 不要な属性、グループ、コメント、および XML がすべて削除された後、ファイル サイズは 50% 削減されました。 プロセスを簡単にするために、次のツールを検討することをお勧めします。
次の Web デザインには Svg を使用して、より高速でスムーズなエクスペリエンスを実現します。
サイズが小さく速度が速いため、Web デザインの CSS に代わる優れたツールです。 一般的なソース ファイルである JPEG と PNG は、読み込みに時間がかかる場合があり、訪問者が Web サイトをナビゲートするのが難しくなります。 ファイル サイズが小さく、読み込み時間が短いため、ほとんどのデザインでは SVG の方が適しています。
Svg と Png の読み込みはどちらが速いですか?
より多くの画像があるという事実にもかかわらず、SVG 画像を含むページは依然として 0.75 秒で最速ですが、PNG @1X を含むページは約 1.0 秒かかり、33% 遅くなります。 SVG と比較すると、PNG @2X は読み込みが 200% 遅くなります。
ラスターベースのファイルは、Portable Network Graphics (PNG) と呼ばれます。 高解像度、ロスレス圧縮、透明性、1600 万色の処理能力により、幅広いアプリケーションに適しています。 ベクター グラフィックス (SVG) は、線、点、形状、およびベクター ベースのアルゴリズムの数学的ネットワークから構築されます。 最初に、それらを他と区別するものを決定する必要があります。 SVG は可逆圧縮であるため、定義、品質、または構造に追加コストをかけることなく、より小さなファイル サイズに圧縮できます。 これらはベクター ファイルであるため、画質を損なうことなく JPEG で拡大または縮小できます。 PNG と SVG はどちらも透明度をサポートしているため、グラフィックやロゴに最適です。
選択できる優れたベクター ファイルがいくつかあるため、印刷の選択はドキュメントによって決まります。 PDF はベクター形式であるため、日常の印刷物での使用に最適です。 PNG は、今日の世界における GIF の次世代バージョンです。 SVG のサイズには制限がありますが、ベクター ファイルのサイズには制限がありません。
画質に関しては、PNG は一般的に高品質の形式と見なされています。 JPG 画像は通常、品質は低くなりますが、読み込み速度は速くなります。 圧縮された PNG ファイルの問題を回避するために、JPG ファイルは圧縮されます。 Web での使用を目的とした画像に関しては、その品質に影響を与える要因に注意を払うことが重要です。 これらの要素はすべて、画像のタイプやコンテキストと同様に重要です。 PNG 画像に関しては、一般的に JPG 画像よりも品質が高いことがわかっています。 ただし、レスポンシブまたは Retina 対応の Web デザインで使用する画像が必要な場合は、SVG が最適なオプションです。 画像をアニメーション化すると、縮小したときほど画像の品質が低下しません。 アニメーションをサポートする GIF と APNG に加えて、ベクター グラフィックスを使用して作成された画像をこれらの形式に変換できます。
Svg ファイルの長所と短所
一方、PNG ファイルのファイル サイズは小さくなりますが、解像度は高くなります。 ベクター ソフトウェアを使用して拡大することもできます。これにより、画質を維持しながら多数の色を表示できます。
SVG は高速ですか?
SVG 画像のサイズと複雑さ、使用されているブラウザーとデバイス、および画像がどのように使用されているか (たとえば、背景画像として、またはインラインウェブページ）。 ただし、一般に、SVG 画像はサイズがかなり小さい傾向があるため、低速の接続でもすばやくロードされます。 さらに、最新のブラウザーは、SVG 画像を効率的にレンダリングすることができ、複雑な画像であってもほぼ瞬時に画面に表示できます。
W3C 標準 (スケーラブル ベクター グラフィックス) は、1999 年に作成され、Web 上のベクター グラフィックスを促進します。 SVG グラフィックスを使用して、SVG グラフィックスが顧客のエクスペリエンスを最適化および改善する方法と、Web サイトの読み込み時間がどのように改善されるかを示します。 Web で SVG を使用するには、アイコン コードのみが必要です。 知っておく必要があるのは、単純なマークアップ言語だけです。 SVG 形式のボックスは次のように表示されます。 高さ = 100 幅 = 100 スタイル = このファイルの塗りつぶしは Rgb(0,0,255)、ストロークは F3>、幅は 3> です。 Adobe Illustrator または Inkscape を使用している場合は、作品を としてエクスポートできます。 V ファイル。 ブラウザーからインスペクター ツール (Ctrl Shift C) を使用してネットワーク タブに移動すると、サイトのミリ秒の読み込み速度が得られます。 このロード時間は、合計 12 のリクエストの結果、655 ミリ秒から 825 ミリ秒の範囲になります。 svg アイコンで同じサイトにアクセスすると、すべてのリクエストが処理され、読み込み時間が短縮されていることがわかります。
SVG ファイル形式は、ロゴ、アイコン、単純なグラフィックなど、さまざまな目的で使用できます。 PNG などのより標準的な形式ほど広く使用されていませんが、いくつかの利点があります。 古いブラウザーやデバイスでサポートされているため、Web ページにアップロードして正しく動作させるのは比較的簡単です。
Svg ファイルを編集する方法
さらに、ベクター グラフィックス ファイルは、Adobe Photoshop や Illustrator などの任意のファイル エディターで編集できるため、ファイル全体の品質に影響を与えることなく、必要に応じてファイルのサイズやレンダリングを変更できます。