画像形式を SVG に変換するのは簡単なことではありません。また、複雑な画像を求めているわけでもありません。私がこの質問をする理由を説明しましょう。Web デザイナーとして、私がよく画像を使用するサイトの要素があります。シンプルな幾何学的形状、アヤメ、いくつかのシンプルなロゴなどが含まれます。これらの HTTP リクエストのコストは比較的小さくなります (ここでは KB について説明します)。
ただし、単純な画像の画像形式の代わりに svg やその他のキャンバス要素を使用することで、これらの要求をさらに小さくできるかどうかに興味があります。SVG と画像を比較する調査やテストはありますか? ページの単純な要素に canvas を使用することで、HTTP リクエストをさらに小さくすることはできますか? もしそうなら、それは素晴らしいニュースでしょう。キャンバス イメージのライブラリを作成して、再利用したり他のユーザーと共有したりすることもできます。
これは場合によると思います。
スプライトが役に立ちます..しかし、スプライトにいくつかの単純な線が含まれているが、500px * 500pxでなければならない場合はどうでしょう...キャンバス（またはsvgでさえ）は実際にははるかに小さくなります。その上、通常、外部の JavaScript はキャッシュされます (画像よりも優れています)。その点で、彼らは確かに体重を減らすのに役立ちます.
ただし、IE も「機能する」ことを期待する場合は、いくつかの html5/canvas shim の提供を開始する必要があるかもしれません。そうすると、重量が増加します。
編集:フルサイズの「花崗岩」の背景が放射状のグラデーションで作成されている
このjsfiddleの例(この質問のために作成しました)を見てください。（ソースで）わかるように、これは別の画像よりもはるかに少ないバイトです（常にピクセルパーフェクトになります）。
一方で、（複雑さによっては）通常の画像では必要ない計算時間もかかります（必要なバイトがクライアントにダウンロードされた後）。
Edit2:彼らがちょっとしたテストを行った リンク
を見つけました。
このスプライトの例では、生の SVG ファイルは 2445 バイトでした。PNG バージョンはわずか 1064 バイトで、2 倍のピクセル比率のデバイス用の 2 倍サイズの PNG は 1932 バイトでした。最初の外観では、すべてのアカウントでベクター ファイルが失われますが、イメージが大きくなると、ラスター バージョンの方がサイズが急速に拡大します。
また、SVG ファイルは XML 形式であるため、人間が判読できます。通常、これらは非常に限られた範囲の文字で構成されます。つまり、HTTP 経由で送信されると、Gzip で大幅に圧縮される可能性があります。これは、実際のダウンロード サイズが raw ファイルの何倍も小さいことを意味します。30% を簡単に超え、おそらくそれ以上です。PNG や JPG などのラスター イメージ形式は、すでに最大限に圧縮されています。
ただし、これはすべて画像の複雑さに依存することに注意してください。極端な反例として、森（葉..）のフルカラー写真と単にjpg..を説明してみてください..
単純な形状の場合、gzip 圧縮された SVG はかなり小さくなり、最新のブラウザーでは非常に使いやすくなります。
ただし、ページ読み込みのパフォーマンスではリクエスト数が非常に大きな要因となるため、画像形式に関係なくCSS スプライト シートを使用すると、パフォーマンスが大幅に向上します。
キャンバスによって形状を JavaScript 描画コマンド (または JSON に基づいてそれらを発行するライブラリ) として保存することを意味する場合、gzip 圧縮された SVG と比較して帯域幅を大幅に節約することはほとんどありません (SVG はパスを定義するための非常に効率的な形式を持ち、gzip はXML は非常に適切です)。
JS が読み込まれるのを待って、ドキュメント全体に複数のキャンバスを挿入するか、生成された画像の圧縮と URL の構築で CPU を消費する必要があるため、SVG や最適化された PNGdata:を使用するよりも全体的に高速になるとは思いません。
サイズは常に特定の画像に依存します。申し訳ありませんが、ご自身でテストする必要があります。これは一概に比較できるものではありません。