iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

簡単!アプリ不要!画像をSVG変換するウェブツール「vectorizer」の使い方

この記事のURLとタイトルをコピーする
svg-vectorizer

ウェブサイトの制作にあたっては、SVG形式の画像ファイルが必要になるケースも増えてきた。しかしぼくはPhotoshopやIllustratorを持っていないため、アプリを使って自作することができない。

そこで活用しているのが、PNGやJPEG形式の画像をSVG形式に変換してくれるウェブサービス「vectorizer」だ。

すべて英語のサイトではあるが、使い方はとても簡単で、すぐにSVG形式の画像を手に入れることができる。本記事で使い方を紹介しているので、ぜひ活用してみてほしい。

SVGとは

ウェブツール「vectorizer」の使い方の前に、そもそもSVGファイルとはなんぞや?という点について解説しておく。

画像ファイルというと、いわゆる「GIF」「JPEG」「PNG」といった形式がメジャーだ。これらは「ラスタ形式」といって、ピクセルと縦横に並べることで画像を描画する。

そのため拡大縮小すると画質が劣化したり、画像がギザギザになってしまう。レスポンシブ形式のウェブサイトを作るさいなどは、小さく画像を作ってしまうと、Retinaなどの高解像度ディスプレイでガビガビになってしまう。

一方のSVGファイルは「ベクトル形式」といって、パスやテキスト、シェイプなどの集合として画像を描画します。

特徴として、拡大縮小によって画質が劣化しない。ウェブサイトで使用した場合、どんなに画面を拡大縮小しても画質が汚くなることがない。

デメリットとして、複雑な計算式で画像を描画しているため、写真のような複雑な画像を描画することには向いていない。

svg-vectorizer_1

左がJPG、右がSVG。左の画像のほうが少しもやっとした感じなのがわかる。

ウェブツール「vectorizer」の使い方

では実際に「vectorizer」を使って、PNG画像をSVG形式に変換をしてみる。ためしに本サイトのロゴを使ってみよう。

1まずウェブサイトのトップページにある「Upload Images」をクリックし、変換したい画像を選択する。選択できるファイル形式は、PNG、BMP、JPEGだ。

svg-vectorizer_2

2アップロードすると、左に元のデータ、右にアウトプットしたSVGデータのプレビューが表示される。
基本的にはこれで完了。右下の「Download」ボタンを押せば、SVG形式のファイルを取得できる。

svg-vectorizer_3

3SVG形式のファイルの調整をしたい場合は、プレビュー下にあるツールを活用する。

svg-vectorizer_4

たとえば「Blur」を使えば境界線がぼやっとした感じの描写になる。不要な色があればそれを抜いたり、カラーの配分を調整したりできる。

ただ、この調整が結構繊細で難しい。また冒頭で話をした通り、あまりリッチな画像を描写するには適さないのがSVGだ。ぼくのサイトのロゴですら描写が崩れるので、基本的には単色のフォントなどで利用するのがいいだろう。

たとえば以下のように、画像でしか表現できないフォントをウェブ上で表現したいときなどは最適だ。

svg-vectorizer_5

実際に書き出したSVG形式の画像を貼り付けてみたが、どうだろう。どれだけ拡大しても文字がガビガビになることがなく、かなりキレイに描写されていると思う。

svg-vectorizer_6

執筆後記

bamka

画像データをSVG形式のファイルに変換してくれるツールは他にもいくつかあった。しかしどれも使いにくく、あるいは書き出したファイルが正しくなかったり、不安定だった。
その中でもこの「vectorizer」は安定しているし、画質の調整も細かくできるのでおすすめだ。

今日も来てくれて、ありがとうございます!

記事への感想や質問Twitterでいただけると喜びます。返信します。フォローはしなくてもいいけど、してくれたらもっと嬉しいです!

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。 管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。 各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする