前回に引き続き、画像描画のWebアプリケーションを紹介します。

今回はSVG画像を作成できるWebアプリVectr。

Vectr

このWebアプリもPiskel同様、無料で使用することが出来、ログインすることでアカウントに紐づくギャラリーに作成したSVG画像を保存することが出来ます。

Piskelと違う点は、

• SVG画像が作成できる
• ダウンロードしてローカルアプリケーションとして使用できる

というところです。

SVGとは

Scalable Vector Graphics(Wikipedia)の頭文字で、jpg/png/gifなどと同様の画像ファイルにつく拡張子でもあります。

ベクター画像用のデータ形式で、拡大しても画像が荒くならないのが特徴です。

参照元Wikipedia

SVG画像を作る

ログイン後、CREATE FILEのボタンを押すと以下の様な画面が表示されます。

SVG画像を作成するのに最低限必要な5箇所を写真に記しました。

1. SVG画像はレイヤー情報を保持しますので、レイヤーを重ねて描画していきましょう。
2. 基本的にはここにある図形たちを組み合わせてパーツを作成していくと良いと思います。
3. ベクター画像といったらコレ、ベジェ曲線ツール。
4. グリッドの表示が出来ます。
5. エクスポート機能です。SNSシェア機能もあります。

披露

相撲アイコン <- Google PhotosがSVG画像に対応していなかったのでpng形式です。

ユーザーガイド

vectr.com

ユーザーガイドも公式のものがありますし、カンバスを開いた際にまだチュートリアルを経験していなかった場合は、その誘導があります。Illustratorは高いけれど、ベジェ曲線/SVG画像作成デビューしてみたい方には良いと思います。