ピクセルで構成されたJPEG、PNG、GIFなどのビットマップ(bitmap)画像を使うより、SVG、EPSなどの形式のベクター画像を使ったほうがもっと便利で相応しい場合がたくさんあります。

Illustratorなどプロなソフトでベクター画像を描くのが苦手でも、下にまとまっているSVG 変換、EPS 変換のできる画像をベクター化させるWebツールを利用すれば、ワンクリックで一般のJPG、PNGなどのラスター画像を綺麗なベクター画像へと変換できます。

ベクター画像の事例

効果の最もいい変換結果を求めるなら、どんな画像がSVG 変換やEPS 変換に一番適すかを知っといたほうがおすすめです。まずはベクター画像の基本知識から簡単に見ていきましょう。

一、ベクタ形式、SVG、EPSファイルとは?

Part1:PNG to SVGやEPSなどのベクター 変換のツール5選

Part2:SVG PNG変換のできるラスタ変換のツール2選

一、ベクタ形式、SVG、EPSファイルとは?

ベクター画像は、グリッド上に確立された点と数式によって作成された画像だと捉えればいいです。それに対して、JPEGやPNGなどの画像はラスタ画像(ビットマップ情報で構成される)と言い、ピクセルと呼ばれた色付きのブロックで構成されています。

ベクターファイルは方向と点の相対的な位置関係という二種類の情報で構成されるため、解像度を失うことなくサイズを無制限に調整できます。また、画像ファイルのサイズが小さいというメリットもあります。用途が広いです。

ラスタ画像 ベクター画像
大幅に拡大や縮小すると劣化する サイズを変更するとぼやけない
プロセスするにはベクター画像より計算力が必要 プロセスにはラスター画像より少ない計算力を使用
ピクセルによって構成される ポイント、ライン、曲線によって数学的に構成される
ベクター画像より多くの容量を占める ラスター画像より少ない容量を占める

例えば、ウェブページに掲載する画像として使えば、スマホン、タブレット、パソコンなどサイズの差が大きいスクリーンのどちらにおいても、最も良い表示の効果を実現できます。巨大なポスターに印刷するイラストを作成するときに、画像を極端に引き伸ばしても画質の劣化が発生しません。などの使い道が多いです。

ベクター画像の事例

ベクタ形式の画像というと、一般的に下のような4つがあります。

.aiAdobe Illustratorの略で、このファイルは一般的に印刷メディアやロゴなどのデジタルグラフィックで使用されます。

.epsEncapsulated PostScriptの略語で、古いタイプのベクタ形式のファイルです。 .epsファイルは、.aiのような最新のファイル形式のように透過性をサポートすることができません。

.pdfPortable Document Formatは、プラットフォーム間でドキュメントを交換するために構築されており、AdobeAcrobatで編集できます。

.svgScalable Vector Graphics形式は、XML(インターネット全体で広く使用されている、マシンと人間の両方が読み取り可能なマークアップ言語)に基づいています。インデックス作成、検索、スクリプト化が可能なWebで役立ちます。

.DXF:DXFは、Drawing Interchange FormatまたはDrawing Exchange Formatの略です。一般にAutoCADのDXF形式として知られているのは、CADデータファイル形式です。AutoCADと他のプログラム間のデータの相互運用性を可能にするためにAutoDeskによって開発されました。

一方、ベクター画像のデメリットも明らかです。JPEG、PNG、BMP、GIFなどのラスタ画像ほど豊富でリアルなディテールを持つのはしにくいです。なので、それらを使ってPNG to SVG 変換、EPS 変換をするなら、ベクトル性の強い画像を使用するのはもっと良い変換結果に繋がるでしょう。その事例には、ロゴ、線画、標識、アイコンなどがあります。

Part1:PNG to SVGやEPSなどのベクター 変換のツール5選

1. Vectorizer.io

  • 料金:無料
  • 日本語対応:なし
  • サポートの入力形式PNG、BMP、JPEG
  • サポートの出力形式SVG、EPS、DFX

Vectorizer.io

とても使いやすいベクター変換のできるWebツールです。SVG 変換、EPS 変換、DFXの出力形式をサポートしています。編集のインターフェースでは機能がとても豊富で、色や、曲線の折り方、サンプリングの細かさ、出力のサイズなどのパラメータを自由に調整することができます。不便な所はインターフェースは全部英語で機能の読み取りにくいことです。

2. Vector Magic

  • 料金無料
  • 日本語対応:あり
  • サポートの入力形式JPG、PNG、BMP、GIF
  • サポートの出力形式SVG、EPS、PDF

vector magic

非常に強力なベクター化のオンラインツールです。SVG 変換やEPS 変換ができる他、ベクター画像の色を調整したり、背景をスマートに削除したり、画像をクロップしたりすることができます。ディテールレベルには「低」「中」「高」という三つの選択肢があります。切り替えると曲線の滑らかさを調整できます。

また、手動モードで、うまくベクター化されていない領域を部分的に修復することもできます。とても便利です。

3. Autotracer.org

  • 料金:無料
  • 日本語対応:あり
  • サポートの入力形式:JPG、GIF、PNG
  • サポートの出力形式:EPS、SVG、AI、PDF、DXFなどです

autotracer

英語の名前どおりにラスタ画像の輪郭を自動で抽出してベクター画像を作成することができるオンラインツールです。一番のメリットは色々なベクタ形式の出力形式をサポートしています。EPS 変換、SVG 変換、AI、PDF、DXFなどの形式もサポートしています。

デメリットもあります。一番大きい問題は彩色のある画像ファイルを入力すると、画像は白黒の線画のようなものとして出力されます。つまり、ソース画像の色情報を保留することができません。

4. Convertio

  • 料金:無料
  • 日本語:あり
  • サポートの入力形式:全ての形式と言えるでしょう。
  • サポートの出力形式:20種類

convertio

Convertioというオンライン形式変換のツールは動画、画像、音声など様々なファイルの形式変換をサポートしていることでたくさんのユーザーに愛用されています。png to svg 変換などラスタ画像をベクター画像に変換することもサポートするのは意外と便利です。

合わせて20個のベクター画像の形式をサポートしています。ソース画像をアップロードした後、Convertioは自動で変換可能な目標フォーマットのみを表示するというのは非常に便利です。

一方、PNGのSVG 変換やEPS 変換などベクトル変換をするときに、欠点も大きいです。ベクター変換された画像の色情報を保つことができなくて白黒になってしまいます。また、出力しようとする画像はプレビューできず編集できずということもなかなか不便です。

5. pngtosvg.com

  • 料金:無料
  • 日本語:あり
  • サポートの入力形式:JPEG、PNG
  • サポートの出力形式:SVG

pngtosvg

JPEGとPNG画像に対してSVG 変換をしてベクター化にすることができるWebツールです。使い方が簡単です、画像をアップロードして「Generate」のボタンをクリックすればいいです。

特色として、出力画像の色の豊富さをオンラインで調整することができます。「Colors」にある数字を増やすと、出力画像の色合いも豊富になり、ソース画像の鮮やかさに近づきます。また、画像にあるそれぞれのカラーによって構成された領域の形もSVG画像として別々に出力することができます。

Part2:SVG PNG変換のできるラスタ変換のツール2選

もしあなたがベクター画像を持ち、汎用性の高いPNGやJPEG画像として利用するなら、下にまとめてるツールでSVG PNG 変換をし、ベクター画像を一般の画像に変換できます。

1. svgtopng.com  

  • 料金:無料
  • 日本語:あり
  • サポートの入力形式SVG
  • サポートの出力形式:PNG

PNG SVG

SVG PNG 変換のできる便利なWebツールです。20個のSVGファイルを一括でアップロードしてPNGに変換することができます。

変換プロセスが終わるまで待って、サムネールを利用して個別にファイルをダウンロードするか、まとめてSVG PNG 変換された画像をZIPでダウンロードできます。

2. Adobe Photoshop Express

  • 料金無料
  • 日本語:あり
  • サポートの入力形式SVG
  • サポートの出力形式:PNG

Adobe Photoshop Express

Adobe Photoshopのオンライン画像編集ツールです。このオンラインツールを使ってSVG PNG 変換をすれば、非可逆圧縮で画像の解像度を維持したり、ファイルサイズを小さくすることができます。

PNGの他、SVGをJPGの形式で保存することもできます。Qualityスライダーを使って画像の質を維持しながらファイルサイズを圧縮することができます。

画像を自由に引き伸ばしても画質を損なわないことを実現するために、ベクター画像に変換するほか、超解像技術を利用したVance AI 画像拡大を使って劣化なしで画像を拡大することもできます。

合わせて読む:Vance AIで綺麗に画像サイズ変更をする方法