macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

Illustratorを使わずSVG画像を作成する方法

プログラミング

「Illustrator高かすぎ、でもSVG画像作りたい」こんな人向けの記事になります。

本記事では、SVG画像の作成方法とIllustratorがない時の対処方法を初心者向けに解説しています。

まず最初に、こんな疑問ありませんか?

SVG形式の画像作成にはillustratorが必須なの?

答えはNOです、必須ではありません。

illustratorの代わりにINKSCAPEを使用すればOK。

INKSCAPEの特徴

  • ベジェ曲線を描けるドローソフト
  • 登録不要で無料、ダウンロードすればすぐに使える
  • illustratorに負けないくらい多機能

やっぱり無料で多機能ってのがいいですよね、illustratorはちょっと高くて手を出しづらいですから。

INKSCAPEは無料ソフトとしては一線級なので、覚えておいて損はありません。

導入方法から使い方までさらっと解説していきます。

INKSCAPEの使い方

ソフトの導入方法、基礎的な部分を解説してきます。

特別難しいことはしませんのでご安心を。

それではみていきましょう。

INKSCAPEを準備する

下記リンクからINKSCAPEをダウンロードしてください。

対応OSはMac,Windows,Linuxカバー、環境に合わせてDLして下さい。

ここからINKSCAPEをダウンロード

DLしたらセットアップして実行、下記のようなエディタが表示されれば準備はOK。

INKSCAPEを準備する、この画面が表示されればOK

実際に使ってみます。

SVG画像の作り方【文字を書いてみる】

いきなり高度な事をしても躓くだけなので、

最初は文字を書いて感覚を掴んでみる、これが一番です。

ペンツールを使用して文字を書いてみますが、真っ白なエディタだとやりにくくないですか?

ページをグリッド表示に変更する

上のメニューにある「表示」から「ページグリッド」を選択すればOK。

ページをグリッド表示に変更する

これで書きやすくなりました。

ペンツールで文字を書いてみる

画面左にある「ペンツール」をクリックし選択します、鉛筆ツールと間違わないように気を付けましょう。

画面左にある「ペンツール」をクリックし選択

今回はグリッドに沿ってキャンバス内に「TEST」と書いてみます。

グリッドに沿ってキャンバス内に「TEST」と記述

クリックだけで簡単に書けちゃいます。

これを保存すればOK、デフォルト形式がSVGなのでそのままで保存して問題なし。

簡単にSVG画像が作れました。

キャンバスサイズをレイヤーのサイズに合わせたい時は?

簡単に調整可能です、手順は以下の通り。

  1. 画面左上にある選択ツール(矢印のマーク)をクリックし選択
  2. キャンバスサイズの基準となるレイヤーをドラッグし選択しておく
  3. 上のメニューにある「ファイル」から「ドキュメントのプロパティ」をクリックし開きます(Ctrl + Shift + D でも可能)
  4. カスタムサイズ項目の中にある「ページサイズを描画全体または選択オブジェクトに合わせる」をクリック

これでキャンバスサイズがレイヤーのサイズに自動調整されます。

ファイルサイズを軽量化したいんだけど?

SVGファイルには描画には関係のない記述があります。

その分ファイルが重たくなってしまっているので、綺麗に掃除して軽くしましょう。

SVGOMGを使えば簡単に解決です。

使い方は超簡単。

  1. SVGファイルをドラッグ&ドロップ
  2. 右側の設定項目を調整

たったこれだけ、ファイルサイズと軽量化割合表示の横にある矢印ボタンをクリックすれば、調整後のファイルをダウンロードできます。

SVGOMGはプレビューしながら調整可能

左側でプレビューを確認しながら調整できるので安心ですね。

終わりに

いかがでしたでしょうか?

illustratorがなくともSVG画像が作れる事がお分かり頂けたかと思います。

今回は文字を書いただけですが、illustratorとほぼ同等の機能を有していますので、アイコンやロゴを作ることも可能です。

機能が充実している分、慣れるまで時間がかかると思いますが、使いこなせればイラレは必要なくなります。

この機会に使いまくって覚えてみましょう。

次はSVGアニメーションについて解説してみようかなと思います。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。