SVGで写真を表示できますか？

ラスター画像を埋め込めば技術的には可能ですが、SVGの利点を生かせません。SVGは図形、アイコン、イラスト向けです。写真にはJPG、WebP、AVIFを使います。

すべてのブラウザがSVGに対応していますか？

現在の主要なブラウザはSVGの描画に対応しています。長く使われているWeb標準で、広く対応する画像形式の1つです。古い環境や特定機能の対応状況は必要に応じて確認してください。

撮れません。スクリーンショットは画面上の画素を格子として保存するラスター画像です。SVGは数式で図形を保存するベクター形式です。画素で描画された画面をそのままベクターファイルとして撮ることはできませんが、元のデザイン要素をSVGとして書き出すことはできます。

はい。アイコンやロゴは、ファビコンから大型印刷まで多くの大きさで使われます。SVGなら、寸法別のファイルを作らず、拡大しても鮮明さを保てます。

はい。CSS、JavaScript、SVG標準のSMILアニメーション要素を利用できます。ブラウザ上で拡大可能なアニメーション画像を作れます。

SVG（Scalable Vector Graphics）は、画素ではなく数式で表した図形を使う、解像度に依存しない画像形式です。拡大しても鮮明さを保ち、表示寸法だけでファイルサイズが増えることもありません。

SVGと、PNG、JPG、WebPなどの基本的な違いは、画像の表し方です。

ラスター形式は、各画素の色を格子状に保存します。1,000×1,000ピクセルのPNGには、ちょうど100万画素分のデータがあります。2,000×2,000へ拡大すると、元の画素から新しい画素を補間するため、ぼやけます。縮小すると画素を捨てるため、細部を失うことがあります。

SVGは、「この位置にこの半径の円を描く」「ここからそこまで線を引く」「この図形をこの色で塗る」といった数式による指示を保存します。個々の画素ではなく形状を表すため、どの寸法でも鮮明に描画できます。1 KBのSVGアイコンは、16ピクセルでも16,000ピクセルでも同じ形状を保ちます。

この違いから、適した内容が決まります。図形、文字、線から作るアイコン、ロゴ、図、グラフはSVGに向いています。写真、スクリーンショット、スキャン文書など、撮影された画素から始まる内容はラスター形式のまま扱います。

SVGとスクリーンショットは、画像形式として対照的です。スクリーンショットは画面上の画素を撮り、ラスター画像を作ります。SVGはベクター図形を保存します。内容の表し方を根本から変えずに、一方から他方へ変換することはできません。

SVGのアイコン、ロゴ、UI図形が画面に含まれていても、スクリーンショットを撮った瞬間にラスター化されます。撮影後のPNGやWebPには、元のベクターデータが残りません。

ドキュメントで拡大可能な図とスクリーンショットを併用するなら、すべてを1枚の画像として撮るのではなく、SVG素材を別に保ち、ラスター画像と並べて埋め込む方法が適しています。ラスター画像とベクターの重ね合わせを1つの文書やプレゼンテーションへまとめられる書き出しツールもあります。

ベクター型の注釈ツールでスクリーンショットへ矢印、囲み、文字を描くと、注釈は解像度に依存しない重ね合わせとして保持できます。スクリーンショットを別の画面寸法で表示するドキュメントでは、注釈だけでも鮮明に拡大できることが役立ちます。

SVGは撮影形式ではありませんが、最終的な素材制作で撮影画像と併用できます。元のUI画像はラスターのまま、ロゴ、アイコン、矢印、吹き出しをベクターとして保てば、スクリーンショット自体を不適切な形式へ変えず、重ねるブランド要素を鮮明にできます。

複雑なデザインをSVGにしてラスターより大きくする： 数千のパスを持つ細かなイラストは、圧縮PNGよりSVGのほうが大きくなる場合があります。図形が多い画像は両方を比較します
写真へSVGを使う： SVG内へラスター画像を埋めても、処理が増えるだけでベクターの利点は得られません。写真やスクリーンショットにはラスター形式を使います
SVGを最適化しない： デザインツールの出力には、不要なメタデータ、非表示レイヤー、重複属性が残ることがあります。最適化ツールを通すと、場合によっては50%以上小さくできます。見た目とアクセシビリティ情報が保たれるか確認します
アクセシビリティを無視する： SVGにはスクリーンリーダー向けのタイトルや説明を含められます。意味のある画像には適切なラベルを加え、誰でも内容を理解できるようにします