SVG ファイルとは何か(そしていつ PNG に変換すべきか)

デザイナーからロゴをもらったら .svg で来た — フォームに貼れず、プラットフォームにアップできず、PowerPoint で開けないファイルだ。盲目的に変換する前に、手元にあるものを知る価値がある:SVG はあなたがこれまで扱ったどんな画像ファイルとも根本的に違う — そして変換は一方通行の扉で、意識的に通るべきものだ。

SVG はレシピであり、写真ではない

あなたの知る他のどの形式 — JPG、PNG、WebP — もラスタだ:色付きピクセルのグリッドを、ピクセル単位で記述したもの。十分にズームすれば、見えるのはピクセルそのものだ。

SVG(Scalable Vector Graphics)はその代わりに数学的命令の集合だ:「座標 60,60 に半径 12 の円を描き、#7c3aed で塗れ;ここからそこまで 3 ピクセル幅の線を描け」。画像は要求されたどんなサイズでも計算される。帰結は直接続く:

• **無限のズーム、ゼロのぼやけ。**SVG をファビコンから看板サイズまで拡大しても、両端とも切れ味は同じだ — 同じファイルを再レンダリングしているのであって、引き伸ばしているのではない。
• **単純なグラフィックには極小ファイル。**1 アイコンは数百バイトの命令だ。同じアイコンの 512×512 JPG は、より悪い結果のために 20,000 倍のデータだ。
• テキストはテキストのまま(アウトライン化しない限り)、CSS で部分ごとに再スタイルでき、個別の要素をアニメーションできる。
• 中身は XML そのもの — テキストエディタで SVG を開けば、読めて、色を変えられ、形状を手で編集さえできる。

だからこそ SVG は自分の領地を支配する:インターフェースアイコン、ロゴ、イラスト、チャート、幾何学的図形から描かれるすべて。そして写真にはひどく不向きなのも同じ理由だ:写真のノイズまみれの数百万ピクセルをベクターの命令として記述すると、肥大化したファイルが生まれ、描画も遅い。写真はラスタ形式を望む、争いの余地なく。

SVG が壊れる場所 — PNG が引き継ぐとき

どんなに優雅でも、SVG はレガシーな配管の壁にぶつかる。PNG のコピーが真剣に正解になるのは、この瞬間たちだ:

1. **受け付けてくれないアップロードフォーム。**就職ポータル、CMS のメディアライブラリ、印刷店、アプリストア — まだ JPG/PNG のホワイトリストのままのものが多い。これが「なぜ私のファイルを受け付けないのか」で最も多いケースだ。
2. **メールクライアント。**Outlook とたいていのウェブメールは SVG をインラインで描画しない。SVG の「添付」は受信者の受信箱での紙の重しだ。
3. **SNS とメッセンジャー。**投稿やプロフィール画像として SVG のアップロードを受け付ける主要プラットフォームはない — どこまで端から端までラスタパイプラインだ。
4. **古いオフィスソフトと写真ツール。**旧 PowerPoint、旧 Photoshop ワークフロー、基本的な写真エディタ — ラスタで入って、ラスタで出る。
5. **サムネイルとプレビュー。**ラスタのプレビューを生成するシステム(ファイルマネージャ、ギャラリー)は、SVG を汎用の空白アイコンで表示することがある。
6. **正確なピクセル要件。**仕様書が「512×512、透過付きの PNG」と書いているとき、レンダリングされた PNG こそが成果物だ — ベクターは源で、PNG が製品だ。

朗報:ラスタライズは完全にコントロール可能な描画の決断だ。まず出力サイズを選ぶ — 表示される最大の場所の 2 倍、が安全な習慣だ(100px 表示のアイコン → 200px でレンダリング、Retina 画面でも鋭いまま)。そして変換する;当サイトの SVG から PNG はブラウザ内でラスタライズする — ベクターのレシピを選んだサイズで描画し、透過を保ったまま PNG を渡す(SVG の背景は既定で透過、PNG はアルファチャンネルを原生で持つ)。行き先が透過を嫌うなら(一部の印刷パイプラインは黒で埋める — 仕様を確認すること)、SVG から JPG が背景色を焼き込む。

一方通行の警告

SVG → PNG の変換はスケーラビリティを永遠に放棄する。PNG はレンダリングしたサイズに固定される;拡大すれば、ピクセルは帰ってくる。SVG マスターを残しておくこと — どうせ極小だ — PNG は使い捨ての出力としてレンダリングする。これはオーディオガイドと PDF ワークフローと同じマスター/コピーの規律だ:真実の源はロスレスかつスケーラブルのまま;派生物は目的ごとに生成する、安価でローカルに。

(逆方向 — JPG から SVG の「ベクター化」 — は別の獣だ:トレースアルゴリズムは写真を形状で近似する。フラットな色のグラフィックやロゴには芸術的に機能し、写真では抽象的な斑点アートになる。楽しい、たまに有用、決して忠実な変換ではない。)

FAQ

SVG は PNG より良い?

図形でできたグラフィック — アイコン、ロゴ、図 — には、圧倒的に:ファイルは小さく、解像度は無限、編集可能だ。写真には、そうではない:ラスタ形式が圧勝する。別々の仕事のための別々のツールであって、競争相手ではない。

私の SVG はなぜ巨大なの?

ラスタデータを埋め込んでいるか(実は XML に包まれた JPEG という「ロゴ」 — ファイル内の <image> タグを探す)、または複雑なアートを何千ものパスポイントでトレースしたツールから出力されたかだ。手作りのアイコン SVG は通常 5KB 未満;数百 KB は、ラスタが隠れているか、パスが過剰に生成されたことを意味する。

正確な寸法で SVG を PNG に変えるには?

サイズ入力付きのコンバーターを使う(私たちのにはある)、目標の幅/高さを入れてレンダリングする。汎用の素材なら 512×512 か 1024×1024 が大半の需要をカバー;UI 作業では、表示サイズの 2 倍でレンダリングして、高 DPI 画面で鋭さを保つ。

SVG には悪意あるコードが入ることがある?

SVG は XML で、スクリプトを埋め込める — だからこそブラウザは <img> で読み込まれた SVG 内のスクリプト実行を拒否するし、出所不明の SVG は他のダウンロードと同じように扱うべきだ:描画は安全、怪しい発生源からの直接オープンは慎重に。ブラウザ内で PNG に変換することもスクリプト内容を実効的に無効化する — ピクセルはピクセルだからだ。