（無料）ロゴ画像をSVGに変換して、美しいまま軽量化する方法

Webサイトのロゴ画像は、SVGに変換しておくのが理想的です。

SVGはどんな画面サイズでも劣化せず、スマホはもちろん、大きなディスプレイでもくっきり綺麗に表示されます。ぼやけることがなく、ファイルサイズも非常に軽量です（PNGの10分の1ぐらいになります）。

当記事では、ロゴに使用されることの多いPNGの画像を、SVGに変換する方法をご紹介します。

オンラインツールを使う

手軽にSVG（ベクター画像）化するには、無料のオンラインツールを使うのが便利です。お手元のPNG形式の画像をドラッグ&ドロップすれば完了します。

おすすめは以下の「PNG to SVG」です。

PNG to SVG

他にも色々と変換ツールはありますが、シンプルなロゴ画像ですらギザギザになったり、文字が潰れたりしてしまうので、実用レベルではありません。「PNG to SVG」なら比較的綺麗に変換されました。シンプルなロゴ画像なら対応できるレベルかと思います。

以前当メディアでご紹介していたAIツール「Vectorizer.AI」が、精度の高さと手軽さの面でオススメだったのですが、2024年2月にベータ版を終了し、現在は月額制の有料サービスとなっています。

精度を高めるなら編集ソフトを使う

ロゴの種類によっては、無料のオンラインツールでは限界があります。どうしても綺麗に変換できない場合は、専用の編集ソフトを使いましょう。

Illustratorもアリですが、ロゴ画像だけに利用したいなら、フリーの編集ソフト「Inkscape」を使うのも手です。無料でIllustratorに近いことができます。

Inkscape

非常に多機能ですが、今回はPNG画像をSVGに変換する手順を解説します。Inkscapeをインストールしたら、以下の3ステップで変換可能です。

1. PNG画像をInkscapeで開く。
2. ビットマップのトレースを行う。
3. SVG形式で書き出す。

1. PNG画像をInkscapeで開く。

Inkscapeを開いて表示される以下の画面で「開く」を押して、お手元のPNG画像を開いてください。

次のようにInkscape内に画像が表示されればOKです。

2. ビットマップのトレースを行う。

「ビットマップのトレース」とは、PNG画像をSVGに変換する際に必要な工程です。ロゴの形を自動でなぞり、ベクター形式に置き換えてくれる処理と捉えるとわかりやすいでしょう。

画像を選択した状態で、右クリックします。

表示される項目一覧から「ビットマップのトレース」をクリックします。

すると右側のパネルに、トレースされた画像がプレビューされます。

ただこのままでは、色が白黒になっていますし、フチがギザギザで汚いです。

ですので、色付きのロゴ画像の場合は、「マルチカラー」タブの検出モードで「色」を選択してください。

その上で、3つのつまみを操作して調整します。

3. SVG形式で書き出す。

トレースの調整がうまくできたら、SVG形式で書き出します。トレースした画像は、元画像と別のレイヤー（層）にあるので、元画像を削除してから書き出しましょう。

「レイヤーとオブジェクト」タブ内にある元画像を選択して「delete」キーで削除できます。

あとは、「ファイル > 名前を付けて保存」からSVG形式で保存します。

最後に「ファイル名」と「拡張子」の二箇所を確認して保存すれば、SVG画像の書き出し完了です。

トレース時の調整次第で、精度の高いSVG画像に無料で変換できます。

WordPressサイトにSVGをアップするには？

WordPressは、初期状態ではSVGをサポートしていません。コードで構成されているSVGの特性上、悪意のあるコードを仕込まれるリスクがある（＝セキュリティ上の懸念がある）ためです。

とはいえ、信頼できるプラグインを使えば安全にSVGをアップできるようにもなります。例えば、次のようなプラグインです。

有効化するだけでOKなので、WordPressサイトにSVGをアップしたい方はチェックしてみてください。

まとめ

ロゴ画像をSVGに変換する方法をご紹介しました。

デザインがシンプルなロゴならオンラインツールで手軽に変換できますが、より高い精度や細部の調整が必要な場合は、編集ソフト（Inkscape）を使うのがおすすめです。

SVGに変換するだけなら、難しくはありません。ロゴの美しさを保ったまま軽量化できるので、ぜひチェックしてみてください。

SVGや画像フォーマットに関する記事