JPGおよびPNG画像をSVGに変換する方法

JPG、PNG、GIFなどの従来の画像形式は非常に人気がありますが、特定のアプリケーションに使用するには理想的とは言えない欠点があります。

たとえば、レスポンシブWebサイトを作成する場合、表示される幅と高さに関係なく見栄えの良い画像が必要です。たとえば、従来の画像を大きくしすぎると見た目が悪くなります。

画像をさまざまなサイズで表示する必要がある場合があります。たとえば、ブログのインデックスページにサムネイルとして、リンクされた記事にフル解像度の画像として表示する必要があります。

単一のイメージの異なるバージョンを作成して、最も適切なイメージを選択することはできますが、そのためには、特にストレージを増やす必要があります。

SVG画像形式はベクター形式です。 これは、品質を損なうことなくサイズを増減できることを意味します(スケーラブル)。 異なる解像度を使用して複数の場所に画像を表示する必要がある場合、これは素晴らしいことです。

SVGのその他の利点は、通常サイズがはるかに小さく、CSSで直接行うことができるため、変更を行う際にWebマスターに柔軟性を与えることです。

一例:Terence Edenは、Twitter、Amazon、WhatsApp、YouTube、Redditなどの人気のあるインターネット企業のロゴをSVGで再作成しました。 ロゴのサイズは1キロバイト未満、場合によっては200バイトにまで縮小されました。 たとえば、PNG形式のTwitterロゴのサイズは20キロバイト、SVGバージョンのサイズは397バイトです。

SVGはロゴやアイコンに適した形式ですが、多くの異なるオブジェクトを表示する写真やその他の種類の画像に関してはあまり適していません。

SVGへの変換

このガイドでは、画像を直接SVGに変換するために使用できるアプリケーションに焦点を当てています。 これは、ベクトルグラフィックスをゼロから作成するように設計されたアプリケーションの使用に関するチュートリアルではありません。 そのためには、Adobe Illustrator(Adobeポリシーへのリンクはまだありません)、Inkscape、LibreOffice Drawなどのベクターグラフィックエディターを使用できます。

オンラインで実行できる無料のコンバーターは多数ありますが、変換プロセスに関してはかなり制限されています。 pngまたはjpgとして利用可能な単純なロゴをsvgに変換するには十分かもしれませんが、ほとんどの場合、結果はあまり良くありません。

サービスの評価方法は次のとおりです。Ghacksロゴをダウンロードし、数十個のSVGコンバーターで変換を試みました。 結果を判断し、良い結果が得られなかったサービスを破棄しました。

  • Aconvert-サービスは、入力としてローカルファイルまたはURLを受け取ります。 それが提供する唯一のオプションは、画像の解像度を変更することです。 結果の画像はGhacksロゴのように見えましたが、そのサイズはロゴのPNGバージョンのサイズのほぼ2倍でした。
  • Vector Magic-Windows用のオンラインコンバーターおよびデスクトッププログラムとして利用可能。 ただし、無料ではありません(オンラインでは月額7.95ドル、デスクトップ版は1回限りの295ドルの支払い)。 ただし、オンライン版の結果は素晴らしく、設定を編集または変更するための多くのオプションと、元の画像とsvgコピーを並べて表示できます。
  • Vectorizer-別の無料サービス。 これには、最適な出力パラメーター(ぼかし、色)を選択できるウィザード、またはこれらを直接設定できるウィザードが付属しています。 結果は多少調整されて良好で、結果の画像のサイズは元のPNGロゴよりも3分の1小さくなりました。

Now You:画像をSVG形式に変換する別のオンラインサービスまたはプログラムを知っていますか?