Vectrを使ってSVG画像を作成する

vectr.com

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

今回は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画像作成デビューしてみたい方には良いと思います。