SVG

SVG（Scalable Vector Graphics）は、2次元のベクター画像のためのXMLベースの形式で、W3Cが標準化しています。拡張子は .svg、メディアタイプは image/svg+xml です。SVGのファイルはピクセルを保存せず、図形、パス、テキスト、グラデーション、フィルターをマークアップとして記述します。閲覧ソフトは、それを任意のサイズで描画します。

SVGはテキストなので、コードエディターで編集でき、gzipで圧縮でき、CSSでスタイルを付け、JavaScriptで変更できます。ブラウザはSVGをネイティブに描画し、デザインツールはアイコン、ロゴ、イラストとして書き出します。SVGファイルには埋め込みのラスター画像を含めることもできますが、その部分は通常のビットマップと同じように動作します。

ベクターとラスターの比較

項目	ベクター（SVG）	ラスター（PNG、JPG、WebP）
保存する内容	図形とパス	ピクセル
拡大縮小	どのサイズでも鮮明	拡大するとぼやける
向いている用途	アイコン、ロゴ、図	写真、スクリーンショット
ファイルサイズ	複雑さに応じて大きくなる	ピクセル数に応じて大きくなる

SVGを使う場面

• Webサイトのロゴとアイコンのセット。
• コードで生成したグラフと図。
• Webページのイラストと簡単なアニメーション。
• SVGのファビコンに対応したブラウザでのファビコン。

SVGとスクリーンショット

スクリーンショットはピクセルの格子なので、本質的にはラスター画像です。SVGファイルの中に保存しても、拡大縮小可能にはなりません。埋め込まれたビットマップは、拡大すると依然としてぼやけます。トレースツールでスクリーンショットをベクターのパスに変換できますが、結果が小さいインターフェースのテキストと一致することはほとんどなく、ファイルははるかに大きくなります。

スクリーンショットが中心のワークフローでのSVG

SVGは、スクリーンショットの周囲の要素に適しています。たとえば、矢印、吹き出し、ロゴ、画像を説明する図です。一般的なパターンは、インターフェースにはPNGまたはWebPのスクリーンショットを使い、その上にSVGのアイコンと注釈をWebページで配置する方法です。

よくある間違い

• 大きいPNGをSVGに埋め込み、ベクターのファイルだと呼ぶ。
• PNGまたはJPGしか受け付けないプラットフォームにSVGをアップロードする。
• 信頼できないSVGファイルを慎重に扱わずに開く。SVGにはスクリプトが含まれることがあるためです。

今すぐ修正したい画像がありますか？

スクリーンショットをPNG、JPG、WebPの間で変換するには Image Converter を、サイズを縮小するには Image Compressor を使ってください。

よくある質問

スクリーンショットをSVGとして保存できますか？

SVGファイルに包むことはできますが、ビットマップのままです。スクリーンショットにはPNGを使ってください。

SVGはPNGより小さいですか？

単純な図形では、通常そうです。詳細な画像やスクリーンショットでは、通常そうなりません。

出典

• Scalable Vector Graphics (SVG) 2（W3C）
• SVG（MDN）

関連リソース

• 画像コンバーター: PNG、JPG、WebPの変換。
• スクリーンショットの注釈ツール: スクリーンショットに矢印やラベルを追加します。
• 書き出し形式: Temposhotが書き出すラスター形式。