「Inkscape」を使ってSVG画像を作る方法
ロゴ画像や簡単なテキスト画像をSVGで作ってみたい、JPGやPNGだと解像度によって表示が汚くなるんだよね。とは言ってもSVGを作るために必要なIllustratorは持っていないし、ってか高杉だし、どうしよう…
上記の悩みに答えます。
SVG画像を作るためにはAdobeのイラストレーターが必須だと思われがちですが、答えはNOです、必須ではありません。結論を先に言ってしまうと「Inkscape」で代用可能で、今回はこの使い方について解説したいと思います。
InkscapeでSVG画像を作る方法
Inkscapeの特徴
- ベジェ曲線を描けるドローソフト
- 登録不要で無料、ダウンロードすればすぐに使える
- illustratorに負けないくらい多機能
「Inkscape」は無料で多機能ってのがいいですよね、イラストレーターは高くて手を出しづらいですから。更に無料だからといって質が低いわけでは無く、無料ソフトとしては一線級の機能を備えており、スキル的にも覚えておいて損はないかと思います。
InkscapeでSVG画像を作る【準備編】
まず最初に、下記リンクからInkscapeをダウンロードしてください。対応OSは「Mac,Windows,Linuxカバー」、環境に合わせてダウンロードして下さい。
ダウンロードしたらセットアップして実行、下記のようなエディタが表示されれば準備はOK。
実際に使ってみます。
SVG画像の作り方【文字を書いてみる】
いきなり高度な事をしても躓くだけなので、「最初は文字を書いて感覚を掴んでみる」、これが一番です。ペンツールを使用して文字を書くわけですが、真っ白なエディタだとやりにくいので、上のメニューにある「表示」から「ページグリッド」を選択しておきましょう。
これで書きやすくなりました。
ペンツールで文字を書いてみる
画面左にある「ペンツール」をクリックし選択します、鉛筆ツールと間違わないように気を付けましょう。
今回はグリッドに沿ってキャンバス内に「TEST」と書いてみます。
クリックだけで簡単に書けちゃいます。
これを保存すればOK、デフォルトの形式がSVGなのでそのままで保存して問題なし、SVG画像が作る手順は以上です。
ありそうな質問
キャンバスサイズをレイヤーのサイズに合わせたい時は？
キャンバスサイズをレイヤーのサイズに合わせたい時は以下の手順で設定しましょう。
- 画面左上にある選択ツール(矢印のマーク)をクリックし選択
- キャンバスサイズの基準となるレイヤーをドラッグし選択しておく
- 上のメニューにある「ファイル」から「ドキュメントのプロパティ」をクリックし開きます（Ctrl + Shift + D でも可能）
- カスタムサイズ項目の中にある「ページサイズを描画全体または選択オブジェクトに合わせる」をクリック
これでキャンバスサイズがレイヤーのサイズに自動調整されます。
ファイルサイズを軽量化したいんだけど？
確かに、SVGファイル保存時には描画には関係のない記述が含まれていて、その分ファイルが重たくなってしまっているので、綺麗に掃除して軽くするのが無難で、これは「SVGOMG」を使えば簡単に解決です。
- SVGファイルをドラッグ＆ドロップ
- 右側の設定項目を調整
最後に、ファイルサイズと軽量化割合表示の横にある矢印ボタンをクリックすれば、調整後のファイルをダウンロードできます。
左側でプレビューを確認しながら調整できるので安心ですね。
終わりに
いかがでしたでしょうか？
イラストレーター持っていなくてもSVG画像が作れる事がお分かり頂けたかと思います、今回は文字を書いただけですが、イラストレーターとほぼ同等の機能を有していますので、アイコンやロゴを作ることも可能です。
機能が充実している分、慣れるまで時間がかかると思いますが、使いこなせればイラレは必要なくなるくらい便利ですので、この機会に使い倒してスキルとして身に付けてしまいましょう。
今回は以上になります。
飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。