SVGファイル形式の解説

Scalable Vector Graphics · .svg

拡張子.svg
MIMEタイプimage/svg+xml
種類画像
開発元W3C
初版2001
ロイヤリティフリーはい
圧縮なし

SVGファイルとは

SVGはW3Cが標準化したXMLベースのベクター画像形式です。ピクセルの代わりに図形、パス、文字、グラデーションを命令として保存するため、ロゴはファビコンから看板までどんなサイズでも完璧に鮮明に描かれ、ファイルは数キロバイトで済むことが多いです。テキストなので、SVGは手で編集でき、CSSでスタイルを付け、JavaScriptで動かせます。

この柔軟さは弱点でもあります。写真は図形で表現できず、複雑なイラストは重く遅くなり、SVGはスクリプトや外部参照を含み得るため、多くのプラットフォームはアップロードされたSVGを無害化するか拒否します。メール、SNS、印刷ワークフローにはラスター版が依然として必要です。

SVGが適している場面

強み

  • 無限に拡大縮小可能: どの画面、どの印刷サイズでも鮮明
  • ロゴ、アイコン、図表、グラフのファイルがごく小さい
  • Webでスタイル付けや動きを付けられる編集可能なテキスト形式

制限

  • 写真には不向き。細密なアートワークは大きく遅くなる
  • スクリプトを含み得るため多くのアップロードフォームが拒否する
  • ブラウザーやエディター間で描画がわずかに異なる

SVGファイルの開き方

どのブラウザーもSVGを表示でき、Inkscape、Illustrator、Figma、Affinity Designerで編集できます。Windowsエクスプローラーや多くのビューアーは汎用アイコンしか表示しないので、素早いプレビューや文書に貼り付ける版が必要ならSVGからPNGで変換してください。

SVGの変換方法

SVGからPNGは文書、プレゼンテーション、SNS向けに透明度付きのラスターを、SVGからJPGは写真風の平坦なコピーを、SVGからICOはWindowsアイコンを生成します。ビットマップをベクターに戻すトレースは、単純な図形ならPNGからSVGで可能です。

よくある質問

PNGに変換したSVGがぼやけるのはなぜですか?

PNGが小さなピクセルサイズで描画されたためです。ベクターに固有の解像度はないので、変換時に大きな出力幅を選んでください。そのサイズまでは鮮明なままです。

写真をSVGに変換できますか?

似た色の領域を図形に変えるトレースによってのみ可能です。ロゴ、シルエット、単純な線画には有効ですが、写真は巨大なファイルか、ポスタリゼーションされた近似になります。

SVGのアップロードは安全ですか?

SVGはJavaScriptと外部参照を含み得るため、プラットフォームは無害化やブロックを行います。デザインツールから書き出したファイルは通常問題ありません。出所不明のSVGはダウンロードしたファイル一般と同様に扱ってください。

SVGはアニメーションに対応していますか?

はい。SMIL要素、CSSアニメーション、JavaScriptで動かせます。ブラウザーは再生しますが、多くの画像エディターや変換ツールは静止した初期状態しか描画しません。