SVGファイルを自分で作ってみたいけれど、どのツールを使えばいいのか、どうやって保存すればSVGになるのか分からない、と迷っていませんか。
SVG入門シリーズの3回目です。
この記事では、SVGの作り方として、Figma・Illustrator・Inkscapeで図形を描いてSVGファイルとして書き出す手順と、Canvaでの保存方法を紹介します。
あわせて、文字のアウトライン化などの書き出し設定の初歩、書き出したSVGを編集し直す方法、目的に合ったツールの選び方も解説します(SVGそのものについてはSVGファイルとはで解説しています)。
SVGの作り方の基本
まずは、SVGがどんな流れで作られるのかと、SVGを作れる主なツールの違いを押さえましょう。
全体の流れが分かると、どのツールを使っても迷わずに作業できます。
SVGは「ツールで描いて書き出す」のが基本
初心者がSVGを作るなら、デザインツールで絵を描き、SVG形式のファイルとして書き出す方法がいちばん手軽です。
SVGの中身は文字で書かれた設計図ですが、ツールを使えば、図形を描くだけでその設計図を自動で作ってくれるからです。
ここでいう「書き出し(エクスポート)」とは、ツールの中で作った絵を、ほかのソフトやWebサイトで使える形式のファイルとして保存し直すことです。
Illustratorの「.ai」ファイルやFigmaのデザインファイルは、そのツールで編集するための形式なので、ブラウザでそのまま画像として表示することはできません。
そこで、編集用のデータはそのまま残しておき、Webなどで使う分だけをSVGとして書き出す、という使い分けをします。
なお、SVGはロゴやアイコン、図形を組み合わせたイラストのような、輪郭のはっきりした絵に向いています。
写真のように色が細かく変化する画像はSVGで表しにくいので、PNGやJPGを使いましょう。
SVGはコードを手で書いて作ることもできますが、その方法はシリーズの7回目で扱います。
SVGを作れる主なツールと選び方
SVGを作れる代表的なツールには、Figma・Adobe Illustrator・Inkscape・Canvaがあります。
それぞれの特徴を表にまとめると、次のようになります。
| ツール | 使える場所 | 料金 | 向いている使い方 |
|---|---|---|---|
| Figma | ブラウザ、デスクトップアプリ | 無料の「スターター」プランあり(料金) | WebサイトやアプリのUI、アイコン |
| Adobe Illustrator | デスクトップアプリ | 有料 | ロゴ、イラスト、印刷物も含めた本格的な制作 |
| Inkscape | デスクトップアプリ(Windows・macOS・Linux) | 無料(オープンソース) | 無料でしっかりSVGを描きたいとき |
| Canva | ブラウザ、アプリ | SVGでのダウンロードは有料プランの機能 | テンプレートを使った手早いデザイン |
無料で始めたいなら、FigmaかInkscapeがおすすめです。
Inkscapeは、SVGを標準の保存形式として使っている無料・オープンソース(設計図にあたるソースコードが公開され、誰でも無料で使えるソフト)のツールで、Windows・macOS・Linuxで動きます(Inkscape「About」(英語))。
Web制作やUIデザインを学んでいる人は、仕事でもよく使われるFigmaから始めると、そのまま実務にもつなげやすくなります。
仕事の相手からIllustratorのデータを受け取る機会が多いなら、Illustratorを選ぶとやり取りがスムーズです。
Canvaの場合、SVGでダウンロードできるのは、Canvaプロ・Canvaチームス・Canva教育版・Canva for NPOのプランのユーザーに限られます(Canvaヘルプセンター「ダウンロードファイルの種類」)。
無料プランのままでは、SVGとして保存できない点に注意しましょう。
SVGを作って書き出す手順
ここからは、四角と三角を組み合わせた家のアイコンを例に、SVGを作って書き出す手順を見ていきます。
描き方の流れはどのツールでもほぼ同じで、違うのは最後の書き出しの操作です。
図形を組み合わせてアイコンを描く
SVGのアイコンは、四角や円、三角などの単純な図形を組み合わせて作るのが基本です。
単純な図形の組み合わせなら、初心者でも形を整えやすく、書き出したSVGの中身もすっきりします。
- 作業する枠(Figmaでは「フレーム」、Illustratorでは「アートボード」と呼びます)を、アイコンの大きさに合わせて作ります。
枠の大きさが、書き出したSVGの大きさの基準になります。 - 四角形や多角形(三角形)を描く図形のツールで、壁にあたる四角と、屋根にあたる三角を描きます。
- 2つの図形を重ねて家の形にし、ドアにあたる小さな四角を足します。
- それぞれの図形に塗りの色や線の色をつけて完成です。
見本Aから見本Cまで、使っている図形は四角3つと三角1つだけです。
このように、複雑に見えるアイコンも、分解すると単純な図形の組み合わせでできていることがよくあります。
FigmaでSVGを書き出す
Figmaでは、画面の右サイドバーにある「エクスポート」のセクションから、選んだフレームやレイヤーをSVGとして書き出します。
- 書き出したいフレーム(またはレイヤー)を選択します。
- 右サイドバーの下のほうにある「エクスポート」セクションで、「+」をクリックして書き出しの設定を追加します。
- 形式の一覧から「SVG」を選びます。
必要に応じて「エクスポート設定」を開き、「テキストをアウトライン化」などの項目を確認します。 - 「エクスポート」をクリックすると、SVGファイルが保存されます。
Figmaの書き出し設定には、ほかにも「"id"属性を含める」「線を簡素化」などの項目がありますが、最初は初期設定のままで問題ありません(Figma ヘルプセンター「Figmaからのエクスポート」、「エクスポート形式および設定」)。
また、レイヤーを右クリックして「SVGとしてコピー」を選ぶと、ファイルを作らずにSVGの中身(コード)をコピーすることもできます。
IllustratorでSVGを書き出す
Illustratorでは、「ファイル」メニューの「書き出し」からSVG形式を選んで書き出します。
- 「ファイル」メニューの「書き出し」から、ファイル形式を指定して書き出す項目を選びます。
- ファイルの種類で「SVG」を選び、保存場所とファイル名を決めます。
アートボードの範囲で書き出したいときは、「アートボードを使用」にチェックを入れます。 - 「書き出し」をクリックすると「SVGオプション」の画面が開くので、設定を確認して「OK」をクリックします。
「SVGオプション」では、文字の扱い(フォント)や、色などの見た目の情報をコードの中にどう書くか(スタイル)などを選べます。
アイコンやロゴなど、複数のパーツをまとめて書き出したいときは、「スクリーン用に書き出し」という機能も使えます(Adobe ヘルプ「Illustrator でアートワークを書き出す方法」)。
書き出したSVGとは別に、元のデータはIllustratorの「.ai」形式で保存しておきましょう。
あとで修正するときに、元のデータがあるほうが確実に編集できるからです。
InkscapeでSVGを保存する
Inkscapeは、SVGを標準の保存形式にしているので、普通に保存するだけでSVGファイルになります。
ただし、保存するときの形式に「Inkscape SVG」と「Plain SVG(プレーンSVG)」の2種類がある点を押さえておきましょう。
| 保存形式 | 中身 | 使いどころ |
|---|---|---|
| Inkscape SVG | SVGに、Inkscapeで編集を続けるための情報(ガイドやレイヤーなど)が加わったもの | 作業用の元データとして保存する |
| Plain SVG | 編集用の情報を含まない、シンプルなSVG | Webサイトなどで使う分を保存する |
Inkscapeの公式ガイドでは、元のファイルはInkscape SVGで保存し、Plain SVGなどほかの形式へは「Save a Copy(コピーを保存)」で書き出すことがすすめられています(Inkscape Beginners’ Guide「Exporting to other File Formats」(英語))。
保存のダイアログの下のほうにあるファイルの種類の一覧から、Plain SVGを選びます。
Inkscape SVGに加わる情報は編集のためのもので、見た目には影響しません(Inkscape Wiki「Inkscape SVG vs. plain SVG」(英語))。
Inkscapeは日本語で表示して使えますが、公式のガイドは英語のため、ここでは英語表示のメニュー名を書いています。
CanvaでSVGを保存する
Canvaでは、作ったデザインをダウンロードするときに、ファイルの種類としてSVGを選ぶとSVGファイルとして保存できます。
Canvaのヘルプセンターでも、SVGは透明な背景に対応し、どんなサイズでも画質を保てるWeb向けの形式として紹介されています(Canvaヘルプセンター「ダウンロードファイルの種類」)。
ただし前に書いたとおり、SVGでのダウンロードはCanvaプロなどの有料プランの機能です。
また、Canvaのデザインに写真が入っている場合、SVGにしても写真の部分は点の集まりのままなので、SVGの「拡大してもぼやけない」という長所は図形や文字の部分にしか生かせません。
書き出し設定と、SVGを編集し直す方法
SVGを書き出すときには、知っておくと失敗を防げる設定がいくつかあります。
あわせて、書き出したあとでSVGを修正したくなったときの方法も紹介します。
文字はアウトライン化して書き出す
SVGに文字が入っている場合は、書き出すときに文字をアウトライン化しておくのが基本です。
アウトライン化とは、文字を「文字のデータ」ではなく、その形をなぞった図形(パス)に変換することです。
文字のまま書き出したSVGは、表示する端末にそのフォントが入っていないと、別の書体に置き換わって表示されることがあります。
Adobeのヘルプでも、閲覧する人のパソコンに入っていない可能性のあるフォントを使うときは、フォントを埋め込むか、テキストをアウトラインに変換する必要があると説明されています(Adobe ヘルプ「Illustrator でアートワークを書き出す方法」)。
端末に入っていない書体を表示する仕組みについては、Webフォントとはで解説しています。
見本Dと見本Eは、どちらも同じ「たまご」という文字を表示したSVGですが、使われた書体が違うだけで印象が大きく変わります。
文字をアウトライン化しておけば、文字の形そのものが図形として記録されるので、どの端末でも見本Dと同じ見た目で表示されます。
アウトライン化の操作は、ツールごとに次のとおりです。
| ツール | アウトライン化の方法 |
|---|---|
| Figma | 書き出し設定の「テキストをアウトライン化」をオンにする(テキストを含むときは初期設定でオン) |
| Illustrator | 「SVGオプション」のフォントで「アウトラインに変換」を選ぶ、または文字を選んで「書式」メニューの「アウトラインを作成」を実行する |
| Inkscape | 文字を選んで「Path → Object to Path」(英語表示のメニュー名)を実行する |
注意したいのは、アウトライン化した文字は、あとから文字として打ち直せなくなることです。
Inkscapeの公式チュートリアルでも、オブジェクトをパスに変換する操作は元に戻せず、文字は文字として編集できなくなると説明されています(Inkscape tutorial「Advanced」(英語))。
Figmaのヘルプでも、書き出したあとも文字を編集できるようにしておきたい場合は、「テキストをアウトライン化」をオフにするよう案内されています(Figma ヘルプセンター「エクスポート形式および設定」)。
そのため、アウトライン化する前の、文字のままの元データを必ず残しておきましょう。
写真や余計な情報を入れずに書き出す
SVGには、なるべく図形と色だけを入れて書き出すのがコツです。
写真などの画像をSVGに含めると、画像のデータがSVGの中にまるごと入ってファイルが重くなったり、別の画像ファイルを読み込む形になって、ファイルを移動したときに表示されなくなったりします。
また、ツールによっては、書き出したSVGの中に編集用のメモのような情報が残り、ファイルが必要以上に大きくなることがあります。
InkscapeでPlain SVGを選ぶのは、こうした情報を取り除くためでもあります。
SVGをさらに軽くする最適化の方法は、入門の範囲を超えるので別の記事で扱います。
書き出したSVGを編集し直す
書き出したSVGを修正したいときは、元の編集用データ(Illustratorの.aiファイル、Figmaのデザインファイル、InkscapeのInkscape SVG)を直して、もう一度書き出すのがいちばん確実です。
元のデータには、文字のままのテキストやレイヤーの情報が残っているので、作ったときと同じように編集できるからです。
元のデータがない場合は、SVGファイルそのものをデザインツールで開いて編集します。
Figmaでは、SVGファイルをキャンバスにドラッグ&ドロップすると、編集できるベクターのレイヤー(重ねて管理される図形のまとまり)として読み込まれます(Figma ヘルプセンター「デザインへの画像と動画の追加」)。
IllustratorやInkscapeでも、SVGファイルを開けば図形の形や色を直せます。
ただし、アウトライン化された文字は図形になっているので、文言を変えたいときは文字を打ち直す必要があります。
色を1か所変えるだけのような小さな修正なら、テキストエディタでSVGの中身を書き換える方法もあり、その方法はシリーズの7回目と8回目で扱います。
実践のポイント
SVGを作って書き出すときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- Illustratorの「.ai」ファイルやFigmaのファイルのまま、Webサイト用の素材として渡してしまう。
これらは編集用の形式なので、ブラウザではそのまま表示できません。
Webで使う分は、必ずSVGとして書き出しましょう。 - 文字をアウトライン化せずに書き出し、ほかの人のパソコンで書体が変わってしまう。
文字を含むSVGは、書き出すときにアウトライン化の設定を確認しましょう。 - アウトライン化した状態で上書き保存して、文字を直せなくなってしまう。
アウトライン化する前の元データは、別のファイルとして残しておきましょう。 - 作業する枠(フレームやアートボード)の大きさを気にせずに書き出し、絵の周りに思わぬ余白ができたり、絵が切れたりする。
書き出す前に、枠と絵の大きさが合っているかを確かめましょう。
よくある質問
- Q. 無料でSVGを作れるツールはある?
A. あります。
Inkscapeは無料のオープンソースのツールで、Figmaにも無料の「スターター」プランがあります。
どちらもSVGとして書き出せます。 - Q. Canvaで「SVG」が選べない、または使えないのはなぜ?
A. CanvaのSVGでのダウンロードは、Canvaプロ・Canvaチームス・Canva教育版・Canva for NPOのプランで使える機能です。
無料プランの場合は、FigmaやInkscapeなど、無料でSVGを書き出せるツールを使う方法もあります。 - Q. PNGやJPGの画像を「名前を付けて保存」でSVGにできる?
A. ファイル名の最後を「.svg」に変えても、中身は点の集まりのままなのでSVGにはなりません。
画像の輪郭を読み取って図形に変換する「トレース」という作業が必要で、その方法はシリーズの5回目で扱います。
まとめ
SVGは、Figma・Illustrator・Inkscapeなどのデザインツールで図形を描き、SVG形式で書き出して作るのが基本です。
文字はアウトライン化して書き出し、アウトライン化する前の元データを残しておけば、どの端末でも同じ見た目で表示でき、あとから編集し直すこともできます。
まずは無料のFigmaかInkscapeで、四角と三角を組み合わせた家のアイコンを描いてSVGとして書き出し、ブラウザで開いて拡大してみてください。
次の回では、SVGをPNGやJPGに変換する方法を扱います。
