なぜ PNG を SVG に変換するのですか?
SVG はピクセル化せずに任意のサイズにスケーリングできるため、さまざまな画面サイズや印刷で使用されるロゴ、アイコン、グラフィックに最適です。ウェブブラウザは .SVG をネイティブにレンダリングし、Figma や Illustrator などのデザインツールはこれを直接扱います。PNG ロゴを SVG に変換することで、品質を損なうことなく自由にサイズ変更できるようになります。
PNG から SVG への変換方法
Inkscape - ビットマップのトレース OPEN-SOURCE
Inkscape で PNG を開き、それを選択して «パス → ビットマップのトレース» に進みます。ロゴの場合は «明るさの境界» を、フラットな多色グラフィックの場合は «色» を選択します。
Adobe Illustrator - 画像トレース PAID
Illustrator に PNG を配置し、ツールバーの «画像トレース» をクリックしてから «拡張» をクリックして、結果を編集可能なベクターパスに変換します。
コマンドライン - autotrace CLI
ターミナルから autotrace --output-format=svg input.png -o output.svg を実行して PNG をベクター化します。
PNG を変換するプログラム
これらの形式について
PNG (Portable Network Graphics) は、ロスレス(可逆)圧縮のラスター画像形式です。最新のすべての OS、ブラウザ、画像アプリでネイティブに開くことができ、ダブルクリックするだけで表示されます。よくある質問は、開き方ではなく、透明度、ファイルサイズ、および JPG や SVG への変換に関するものです。
.PNG の詳細を開く →SVG ファイルは Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)画像です。これは W3C のオープン標準であり、2D グラフィックスを XML テキストとして保存するため、品質を損なうことなく任意のサイズに拡大縮小できます。Chrome、Edge、Firefox、Safari…
.SVG の詳細を開く →品質と注意点
- これは変換ではなくベクター化です。SVG 出力はアルゴリズムによる元の PNG の近似値であり、ピクセル単位で完璧なコピーではありません。
- フラットなロゴ、アイコン、シンプルな線画はきれいにトレースされますが、写真やグラデーション、ソフトシャドウのある画像は使い物にならない出力になります。
- ソースとなる PNG の解像度が高いほど、トレーサーが利用できるピクセルデータが増え、通常はよりきれいなパスが生成されます。
よくある質問
SVG は元の PNG とまったく同じに見えますか?
写真の PNG を SVG に変換できますか?
トレースした SVG が元の PNG よりサイズが大きくなるのはなぜですか?
トレースせずに PNG を SVG 内に埋め込むことはできますか?
PNG を SVG コンテナ内の <image> 要素でラップしますが、画像には依然としてラスターデータが含まれているため、ピクセル化せずにスケーリングすることはできません。