画像の扱い彼是

３つ並んだ透過イメージの表示を比べてください。左側がベクタ形式のSVGで、真ん中がラスタ形式のGIF、右側がαチャンネルが扱えるPNG-32です。
実際の画像サイズより小さく、背景は暗い色という厳しい条件での表示です。かつ安い老眼鏡で見ると輪郭に無い色が見える組み合わせです。
SVGはベクタ形式ですので輪郭の境界が綺麗に表示されます。サイズ変更しても綺麗に表示されます。
ラスタ形式のGIFは輪郭が白汚れします。その理由は輪郭の境界が背景色白に馴染むようにしているからです。
ラスタ形式のPNG-32の透過イメージはαチャンネルで、輪郭の境界を徐々に透明度を上げて馴染むようになっていますので背景と程よく馴染んでいます。PNG-32形式が扱えるソフトなら透過イメージのαチャンネルで程よく対処してくれるはずです。 ということでGIF形式はもう時代遅れなのかもしれません。SVGにするかPNG-32にするかは、画像の拡大・縮小が必用ならSVG、単純なイラストでなければPNG-32という使い分けです。
イメージをクリックするとその画像が原寸大でも確認できます。再度クリックすると閉じます。

上記イメージクリックでPopup表示には構文エラーが ^^;

HTML5的には構文エラーです。labelタグの子要素として許されていないimgタグを入れ子にしているからです。
構文的には間違いでもBlinkとGeckoの双方とも問題なくレンダリングされますので、これで善しとしました。
それとこのCSSだけでのポップアップですが、動作するコードの組み合わせトリッキーで微妙すぎます。

パソコン向けの画像をスマホで表示するとボケるという解説を目にしますが、ホントかどうかは目で確かめて判断しましょう。
ここの落書き人は虫眼鏡で確認しましたがボケ間を感じませんでした。逆に高精細だなと実感しました。
物理デスプレイデバイスとブラウザの論理ピクセル
　・パソコン １：１
　・スマホ　 ｎ：１
そしてブラウザのレンダリングエンジンは物理ディスプレイデバイスに高精細に描画しています。つまりブラウザの論理ピクセル１に対して、数ドット分の高精細描画を行っています。これがスマホの方が綺麗に見える仕掛けです。

なおパソコンでも高DPIディスプレイで同様な事ができます。

ブラウザに限って言うと、この物理解像度 ｎ：１ 論理解像度の関係で、綺麗に表示できるかなレンダリングエンジンのでき次第です。今どきのスマホなら問題ありません。
AppleのRetinaだけに注目した主張がありますが、高DPIディスプレイはRetinaの限った技術ではあありませんので、今どきのスマホは高DPIディスプレイですので綺麗に表示されるという程度で宜しいかと思います。

・cssやJavaScriptで色などを操作できるので、HTMLとの親和性が高い。

例えば

<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515 515">
	<g>
		<polygon class="arrow0" points="163.916,0 92.084,71.822 276.258,255.996 92.084,440.178 163.916,512 419.916,255.996"></polygon>
	</g>
</svg>

<style>
.arrow0 { /*左右移動の矢印*/
	fill: blue;
}
</style>

小さな画像はBase64でHTMLまたはJavaScript、CSS内に埋め込むことで、画像の読み込みコストが減らせます。
ただし、ファイルサイズサイズが約1.3倍になりますので、画像ファイルが少ない場合はその効果は望めません。

HTML内に埋め込む

<img src="data:image/gif;base64,R0lGODlhAQABAPAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==" alt="〇〇">
						

CSS内に埋め込む

<background-image:  url(data:image/gif;base64,R0lGODlhAQABAPAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==);>
						

JavaScript内に埋め込む

imgエレメントを作成するなら

var image = document.createElement('img');
image.src = 'data:image/gif;base64,R0lGODlhEAAQAPEAAAAA/8DAwKbK8P///yH5BAEAAAMALAAAAAAQABAAAAI6nI+pJiDnVmuHJmpNrID1ETnA+A0WNT5BiYLgt3JuNxqxN78qS88NKTP1gpbQpZMBPY6ZJGICWS6mBQA7';
						

var image = document.createElement( 'img' );
image.src = 'data:image/gif;base64,R0lGODlhEAAQAPEAAAAA/8DAwKbK8P///yH5BAEAAAMALAAAAAAQABAAAAI6nI+pJiDnVmuHJmpNrID1ETnA+A0WNT5BiYLgt3JuNxqxN78qS88NKTP1gpbQpZMBPY6ZJGICWS6mBQA7';
						

ctx.drawImage(image, 10, 10, 16, 16);