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

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

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

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

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

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

SVGのその他の利点は、サイズが通常はるかに小さいこと、およびCSSで直接変更できるため、Webマスターに変更を加える際に柔軟性を提供することです。

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

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

SVGへの変換

convert image to svg

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

LibreOffice Draw

Windowsの場合

ダウンロード中

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

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

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

ベクトルマジック

Windowsの場合

ダウンロード中

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