Inkscapeの使い方｜図形・パス・文字からSVGを作る入門ガイド

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

Inkscapeの使い方は、四角や丸を置き、並べ、必要な部分だけ形を変えるところから覚えると分かりやすくなります。最初から複雑なイラストを描こうとすると、図形、パス、文字、グループの違いで迷いやすくなります。まずは小さな案内図を一つ作り、編集用のSVGと掲載用の画像を残すところまで進めてみましょう。

この記事では、架空の展示会の案内図を題材に、ページ設定、図形の配置、パスとノード、文字と配色、SVGとPNGの保存を説明します。実在の会場への経路案内ではなく、操作を学ぶための仮定例です。地図として公開する場合は、実際の建物や通路、利用条件を別途確認してください。制作例を筆者の受注実績や成果として示すものではありません。

2026年10月3日にInkscapeの基本チュートリアルと初心者ガイドを確認しています。メニューの名称や配置は版とOSによって異なるため、手元の表示と公式案内を照合してください。本文の図版は説明用の生成イメージであり、Inkscapeの実画面や同梱データではありません。

Inkscapeを始める｜ベクター・ページ・保存の基本

ベクターは形の情報を扱うと考える

Inkscapeでは、線や図形を編集して図版を作る練習ができます。写真を小さな画素の集まりとして扱う編集とは、形の変更の仕方が異なります。丸を大きくする、線の太さを変える、曲線を滑らかにするといった操作を、要素ごとに調整できます。ロゴ、案内図、アイコン、簡単なイラストなどを作りたいとき、図形の構造を保って編集できることが役立ちます。

ただし、SVGに入れたものがすべて拡大に強い図形へ変わるわけではありません。写真を読み込んで配置した場合、その写真自体は元の画像の性質を持ちます。小さい写真を大きく置けば、粗さが見えることがあります。ベクターの図形と、読み込んだ画像が一つのファイルの中に混在できることを理解し、何を編集しているかを確かめましょう。

練習用の案内図なら、会場の部屋を長方形、受付を丸、移動方向を矢印、名称を文字で表せます。写真を使わなくても、必要な関係を表現できます。見た目を現実そっくりに描くより、入口から目的地までの関係が分かることを目標にします。最初の課題を単純な形に絞ると、道具の動きと図版の意味を同時に追いやすくなります。

ページと作業領域の違いを知る

画面の中では、ページの外側にも図形を置けます。試作した部品を外へ置けるのは便利ですが、そのまま全部が書き出されるかどうかは出力範囲の選択によって変わります。最終的に使う図版をページ内へまとめるのか、選択した部分だけ出すのかを決めておきましょう。ページ外にある部品を消したつもりで忘れると、図全体の範囲で書き出した際に余計な余白が入る場合があります。

新しい文書を作ったら、ドキュメントの設定でページサイズと単位を確認します。Webへ載せる画像を作るならピクセルの寸法、印刷物の図版なら実際の紙面で必要な寸法を意識します。単位が変わっても、図版の意図が自動的に調整されるわけではありません。まず使う場所の条件をメモし、それに合わせたページを用意すると迷いが減ります。

作業中のズームは、ページや図形の寸法を変更しません。小さな図形を詳しく編集するときは拡大表示、全体の配置を見るときはページ全体の表示へ切り替えます。細部を拡大したまま作業を続けると、線が太すぎたり文字が小さすぎたりする全体の問題を見落としやすくなります。節目ごとに全体へ戻ることを習慣にしてください。

※表は横にスクロールできます。

編集元はInkscape SVGで保存する

作業を始めたら、早い段階で名前を付けて保存します。Inkscape初心者ガイドの保存説明では、編集用の情報を保つInkscape SVGと、他の環境へ渡すPlain SVGなどが区別されています。最初は編集元を残し、相手へ渡す形式は用途に合わせて別に作ると管理しやすくなります。配布用へ変換したファイルだけを唯一の元データにしないようにしましょう。

ファイル名には、図版の内容と版が分かる言葉を入れます。練習なら「exhibition-map-work.svg」のように、作業用と分かる名前が使えます。大きく形を変える前には別名の版を残す方法もあります。保存先を毎回確認し、ダウンロードフォルダーや一時的な場所へ散らばらないようにしてください。後で修正するときに、正しい元データへ戻れることが重要です。

自動保存や復旧機能があっても、必要な節目で保存する習慣は必要です。ソフトが閉じた後に、期待した範囲まで必ず戻せるとは限りません。図形の配置が決まった段階、パスを編集する前、書き出し前など、自分の作業に合う区切りを持つとよいでしょう。保存できたか不安な場合は、ファイル名と更新状態を確認し、別の場所へ無計画に複製を増やさないようにします。

練習の完成条件を決める

架空の案内図では、入口、受付、展示室、休憩場所の四つを区別し、入口から展示室へ進む方向が分かることを目標にします。形を正確に描く前に、必要なラベルとつながりを紙へ書きます。アイコンの装飾を増やしても、矢印の行き先が分からなければ案内として完成していません。何を見れば使える図版と言えるかを、制作前に決めておきましょう。

完成条件には、編集元を開き直せること、文字を修正できること、PNGで必要な寸法へ出せることも含めます。見た目だけを完成条件にすると、書き出しで切れている部分や、他の端末で変わる文字を見落としがちです。作る、保存する、別の環境で見るという一周を小さな課題で経験すると、次の図版でも同じ確認を使えます。

図形で案内図を作る｜選択・整列・重なりを整理する

長方形と丸を置いて役割を分ける

長方形ツールを選び、ページ上をドラッグして部屋を表す形を作ります。続けて同じような部屋を作る場合は、複製して大きさを変えると見た目を揃えやすくなります。受付は丸、休憩場所は角の丸い形など、用途に合わせた区別を付けます。ただし、形の違いだけで意味が伝わるとは限らないため、後で名称も添える前提で進めます。

図形を作った後は、選択ツールへ切り替えて位置や大きさを調整します。図形を作るツールのままドラッグすると、移動のつもりが新しい図形の作成になることがあります。今選んでいる道具と、選択中の要素を確認してください。数値で幅や高さを入れられる場合は、同じ役割の形を揃えるのに役立ちます。縦横比を保つ必要があるときは、比率の設定も確認します。

Inkscapeの基本チュートリアルは、選択、変形、グループ、塗りと線、整列、重なりを扱っています。手元の版のヘルプからチュートリアルを開いて、説明用の図形を動かしながら試す方法もあります。本文の練習へ取り組む前に、四角を一つ作って選び直せるかを確かめると、その後の操作が追いやすくなります。

塗りと線を別々に設定する

図形の内側の色が塗り、輪郭が線です。内側を薄くして線を濃くする、線だけの四角を作るなど、それぞれに役割があります。受付の丸を目立たせたい場合は、塗りをアクセント色にし、他の部屋は淡い色へ揃えると区別しやすくなります。全部を別の鮮やかな色にすると、何が重要か分かりにくくなるため、色の役割を先に決めます。

線の太さは、図形の大きさと最終的な表示幅に合わせて調整します。作業中の拡大画面では十分太く見えても、小さく書き出すと消えそうになる場合があります。逆に小さなアイコンの輪郭が太すぎると、中の形がつぶれます。全体表示と使用サイズの両方で確認し、線の太さを揃えるべきところと、強調のために変えるところを分けてください。

色が変わらないときは、塗りを変えているのか線を変えているのか、透明度やぼかしが影響していないかを見ます。選択したつもりの要素が、別の図形の下に隠れている場合もあります。パレットを何度も押す前に、選択枠と設定を確認すると原因を絞りやすくなります。操作結果が見えないときほど、対象を確かめることが大切です。

整列と均等配置で関係を読みやすくする

複数の部屋を同じ列に並べる場合は、整列機能を使います。整列の基準がページなのか、選択した要素なのか、特定の要素なのかによって結果が変わるため、基準を確認してから実行します。中央へ寄せたつもりがページの中央へ全部集まった場合は、基準の選び方が意図と違う可能性があります。まず二つの図形で試し、動き方を理解してから数を増やしましょう。

均等配置では、中心同士の間隔を揃えるのか、図形の間の空間を揃えるのかを考えます。大きさが違う図形では、中心が等間隔でも隙間は均等になりません。案内図で通路の幅を分かりやすくしたいのか、アイコンを規則的に並べたいのかによって選びます。見た目の規則性だけでなく、図が表す意味に合っているかを確認してください。

※表は横にスクロールできます。

グループは部品をまとめるために使う

受付の丸と「受付」という文字を一緒に動かしたいなら、両方を選択してグループ化します。グループは要素のまとまりを作るもので、輪郭を一つの形へ合体させる操作とは違います。後で文字を直したい場合は、グループ内の対象へ入るか、必要に応じてグループを解除します。何を一緒に扱いたいかを決め、無関係な図形までまとめないようにしましょう。

グループが何重にもなると、選びたい要素へたどり着きにくくなります。初心者の練習では、部屋と名称、矢印と説明など、意味のある小さな単位でまとめます。全体を動かす必要があるときだけ、外側に大きなまとまりを作ると整理しやすくなります。選択できないと感じたら、グループ内の要素なのか、ロックされた層にあるのかを確認してください。

前後の重なりと矢印の向きを点検する

矢印が部屋の下へ隠れたり、名称が色面の後ろへ回ったりすると、案内が読みづらくなります。重なり順を調整し、必要な線と文字が見えるようにします。ただし、すべてを最前面へ出すだけでは別の場所で問題が起きます。背景、部屋、経路、名称のように役割を分け、どの層に置くかを考えながら整理しましょう。

経路を示す矢印は、入口から目的地まで実際に目で追います。矢印の先が何もない場所へ向いていたり、二方向へ進めるように見えたりしないかを確認します。架空の案内図でも、見る人が迷わない関係を作る練習になります。実在の施設へ使う場合は、避難経路や利用できる通路などを自己判断で描かず、施設の確認済み情報と照合する必要があります。

パスを編集する｜ノード・曲線・切り抜きの考え方

図形をパスへ変える前に複製を残す

長方形や星などの図形には、その種類に固有の調整項目があります。これをパスへ変えると、点と線を使って自由に形を変えられますが、元の図形専用の編集方法をそのまま使えるとは限りません。Inkscapeの図形チュートリアルでも、図形とパスの違いが説明されています。必要な部分だけを変換し、元の図形は複製して残すと比較しやすくなります。

練習では、角のある案内板の形を長方形から作り、その一辺を少し変えてみます。パスへ変換したらノードツールで選び、どこに点があるかを確認します。選択ツールで全体を動かす操作と、ノードツールで一部を動かす操作を区別してください。全体の大きさを変えたいだけなら、わざわざ点を一つずつ動かす必要はありません。

変換後に形が思いどおりにならないときは、元の図形と並べて違いを見ます。点を増やすほど精密になるとは限りません。必要以上にノードが多いと、少し動かしたときに細かな凹凸が出やすくなります。単純な輪郭は少ない点から作り、必要な場所だけ追加すると、後の調整がしやすくなります。

ノードとハンドルで曲線の性格を変える

ノードはパスの形を決める点で、ハンドルは曲がり方の調整に関わります。点を動かすと通る位置が変わり、ハンドルを動かすとそこへ向かう曲線の方向や強さが変わります。最初は葉のような単純な閉じた形を作り、先端を尖らせる部分と、ふくらみを滑らかにする部分を分けて練習すると理解しやすくなります。

ノードの種類を説明する初心者ガイドでは、角を作る種類、滑らかにつなぐ種類、左右のハンドルを対称にする種類などが示されています。すべてを同じ種類へ変えるのではなく、角が必要な場所と滑らかにつなぎたい場所に合わせて選びます。見た目が折れている場所では、点の位置だけでなくハンドルの向きも確認してください。

曲線を調整するときは、拡大表示だけで判断せず、最終サイズでも確認します。細かな凹凸を直すために大きく拡大していると、全体のバランスを見失うことがあります。葉の左右を完全に同じにする必要があるのか、自然な違いを残すのかも目的次第です。装飾の葉と、左右対称の記号では求める形が違います。何を表す形かを意識して調整しましょう。

合体と切り抜きは、重なり順を理解して使う

複数の形を一つにしたい場合は、パスの演算を使う方法があります。合体、差分、交差などは結果が異なるため、名前だけで選ばず、小さな二つの図形で試します。四角と丸を重ね、どの部分が残るかを確認してから実際の図版へ使うと、複雑な形を一度に壊してしまうことを避けられます。取り消して比較できる状態で進めてください。

差分で穴を開ける場合などは、前後の重なり順によって結果が変わります。上にある形が何を切るためのものかを確認し、必要なら順序を入れ替えます。操作後に元の形が個別に残らない場合もあるため、再調整したい形は複製して保存しておきましょう。グループ化と演算を同じものとして使うと、後から一部だけ直したいときに困ります。

クリップは、別の形の範囲に見せる部分を収める考え方です。形そのものを演算で変えることと、見える範囲を制限することを分けます。写真を丸い枠へ収める場合など、どちらの方法が適しているかは目的で変わります。最初の練習では、一度に複数の方法を混ぜず、一つの操作でどの情報が残るかを確認すると理解しやすくなります。

※表は横にスクロールできます。

既存の画像をなぞるときは、権利と精度を考える

画像を下敷きにして図形を描く練習もできますが、他人のロゴやイラストをなぞれば自由に使える素材になるわけではありません。自分で描いたスケッチや利用条件を確認できる素材から始めます。仕事で受け取った図版も、改変や再利用の範囲を確認してください。操作の練習と、公開してよい成果物かの判断は別です。

自動で輪郭を取り出す機能を使った場合も、結果をそのまま完成品と考えないようにします。細かな点が増えたり、背景の汚れまで形になったりすることがあります。必要な形が正しく残っているか、不要な部品がないかを見て、単純化や描き直しを検討します。自動化した結果の方が複雑で直しにくい場合は、基本図形から作る方が早いこともあります。

文字と色を整える｜小さくても読めるSVGへ仕上げる

文字は名称と説明を分けて配置する

案内図へ「入口」「受付」「展示室」「休憩」といった名称を入れます。テキストツールを選び、短い言葉ならクリックして入力し、必要に応じて文字の大きさと書体を整えます。長い説明を一定の領域へ収めたい場合は、テキスト枠の扱いを確認します。公式初心者ガイドの文字入力説明では、短い文字と枠内の文字の作り方が分かれています。

文字を図形の近くへ置き、どの部屋の名前か分かるようにします。名称が二つの部屋の中間へ置かれていると、対応が曖昧になります。グループにまとめる前に、文字と図形の位置関係を決めましょう。補足説明が必要なら、名称より少し弱い見た目にして、最初に読む情報が分かるようにします。文字数を増やすほど丁寧になるとは限りません。

日本語の書体を選ぶときは、使う環境で表示できることと、利用条件を確認します。自分のPCにある書体でも、相手の環境に同じ書体があるとは限りません。文字の形が変わると、幅や改行も変わることがあります。編集用の文字を残す版と、見た目を固定して渡す版を分けるかなど、相手の用途に合わせて考えてください。

アウトライン化は、編集性との交換を理解する

文字をパスへ変換すると、文字の輪郭を図形として扱えます。相手のフォント環境に依存する部分を減らせる場面がありますが、通常の文字入力として内容を直すことは難しくなります。修正用の文字が残る元データを保存し、必要な場合にだけ配布用の複製を変換します。すべてを最初からパスへ変えると、表記の訂正だけでも手間が増えます。

Webで使う図版では、文字を図形にしたことで読み上げや検索などへの配慮が別に必要になる場合があります。画像の外側に説明文を置く、代替テキストを用意するなど、利用する場所に合わせて考えます。見た目が固定されることだけを利点として捉えず、どの形で情報を伝えるかを確認してください。編集する人と読む人の両方の使いやすさが関わります。

変換後は、文字の欠け、重なり、濁点や記号、長い英数字を点検します。形が維持されているように見えても、小さな部品が選択から漏れて移動したり、別の色になったりする場合があります。変換した版を開き直し、元の文字版と並べて確認すると違いを見つけやすくなります。納品先が編集できる文字を求めているなら、その条件を優先しましょう。

配色は役割をそろえ、色だけに頼らない

案内図では、同じ役割の場所を同じ色にし、入口や現在地など重要な場所だけアクセントを付けると理解しやすくなります。色を増やしすぎると、別の意味があるように見えることがあります。色分けする場合は、必要に応じて凡例を添え、文字や記号も併用します。赤と緑の違いだけで利用可否を示すなど、色だけで判断させる表現は避けましょう。

背景と文字の明暗差にも注意します。淡い色同士の組み合わせは落ち着いて見えますが、小さな図版では読みにくい場合があります。見出しや経路の線が背景へ埋もれていないかを確認してください。画面の明るさを下げたときや、白黒で見たときにも関係が追えるかを考えると、色に依存しすぎた図を見直すきっかけになります。

装飾の影やぼかしは、必要な場所だけに絞ります。小さな案内図では、ぼかしが文字や境界を曖昧にする場合があります。まず単純な塗りと線で意味が伝わる状態を作り、その後に雰囲気を整えます。効果を加えたことで、書き出しや別の表示環境の結果が変わらないかも確認しましょう。シンプルな構成は修正と検証もしやすくなります。

小さく表示して、意味が残るかを試す

完成に近づいたら、使用する画像幅へ縮めて見ます。受付の丸、経路の矢印、名称が区別できるかを確かめ、必要なら細かな装飾を減らします。図版の細部がすべて見えることより、読む人が必要な判断をできることが重要です。線が重なって経路が分からない場合は、色を変えるだけでなく、位置や形を整理することを考えます。

架空の案内図を初めて見る人に、「入口から展示室へどう進むか」を説明してもらう練習も役立ちます。図の作者は意図を知っているため、読み手の迷いに気づきにくいものです。質問された場所を記録し、名称の位置、矢印の向き、凡例の不足を直します。実際の利用者の感想を得ていない場合は、検証したと断定せず、自分の確認範囲を明確にしておきましょう。

SVGとPNGを渡す｜書き出し・表示差・修正用データの確認

編集用と掲載用のファイルを分ける

編集を続けるためのSVGを保存したうえで、掲載先や受け取る人に合う形式を作ります。SVGをそのまま使える環境もあれば、PNGなどの画像を求める環境もあります。相手がInkscapeで修正するのか、別のソフトへ読み込むのか、完成画像だけを使うのかを確認してください。形式の名前が同じでも、使い方によって必要な状態は違います。

SVGをWebへアップロードできない場合、サイト側で安全性や運用のために制限されている可能性があります。制限を無理に外すことを最初の解決策にせず、掲載用途ならPNGへ書き出すなど、許可された形式を使います。外部から入手したSVGも、見た目だけで安全と判断して無条件にサイトへ入れないようにします。ファイルの扱いは、利用するサービスの案内に従ってください。

PNGを書き出すと、図形や文字を一枚の画像として扱えるため、相手に同じ編集環境がなくても使いやすくなります。一方、後から個々の部屋や文字を編集する用途には向きません。修正が必要になったらSVGへ戻り、変更して再出力する流れを残します。PNGだけを保管して、元データを失わないようにしましょう。

書き出し範囲と寸法をセットで確認する

PNGの書き出しでは、ページ、描画全体、選択部分など、何を出すかを選ぶ場面があります。PNG書き出しの初心者ガイドを参考に、手元の画面で対象範囲と出力寸法を確認します。図形を選択したまま部分だけを出してしまったり、ページ外の試作品まで含めたりしないように注意してください。

Web用では、出力されるピクセル寸法を重視します。解像度の数値だけを変えて、結果の幅と高さを見ないまま進めると、想定より大きい画像になる場合があります。印刷用では、実際の寸法と必要な解像度の関係を印刷先の条件に合わせて確認します。どの用途でも、数値を入力したことより、実際に出力されたファイルの情報を見ることが大切です。

透明な背景が必要なら、ページ背景や配置した背景図形の状態を確認します。画面が白く見えることだけでは、書き出し後の透明度を判断できない場合があります。出力したPNGを色の付いた背景へ重ねて、透明な範囲が意図どおりかを確かめます。検査用に置いた色面が残っていないかも見てください。

※表は横にスクロールできます。

文字と画像の表示差を別の環境で確認する

SVGを別のアプリやブラウザーで開くと、Inkscape内と同じ見え方にならない部分がある場合があります。フォント、文字の流し込み、効果、リンクされた画像などが確認対象です。編集画面の見た目をそのまま最終結果と考えず、実際に使う環境で開いてみます。確認できない環境については、動作を保証するように伝えず、確認済みの範囲を示してください。

写真をリンクとして配置した場合、元画像の場所が変わると表示できなくなることがあります。受け渡しでは、埋め込みや必要な素材の同梱など、用途に合う方法を選びます。ただし、素材のファイルを相手へ渡してよいかは利用条件も関係します。編集可能なデータ一式を渡す依頼であっても、再配布できない素材まで含めてよいと自動的に考えないようにしましょう。

確認用の見本画像を一緒に用意すると、受け取った側が表示差に気づきやすくなります。どれが編集元で、どれが掲載用で、どれが見本かを名前で区別します。修正依頼が来たら、見本だけを直すのではなく編集元へ戻り、関連する出力版を作り直します。複数の形式が別々の内容にならないように、更新の順番を決めておくと管理しやすくなります。

選べない、見えない、余白が大きいときの順番

要素を選べないときは、別の要素の下、グループ内、ロックされた層などを確認します。無理にクリックを繰り返す前に、オブジェクトやレイヤーの一覧から対象を探します。見えない場合は、塗りや線の有無、透明度、重なり、ページから離れた位置へ動いていないかを見ます。ソフトの不具合と決めつける前に、作品の状態を一つずつ切り分けましょう。

書き出した画像の余白が大きい場合は、出力範囲とページ外の要素を確認します。離れた場所に小さな点や試作品が残っていると、描画全体の範囲が広がる可能性があります。必要な部分を選んで出すか、ページに合わせて整理するかを決めます。不要な物を消す場合も、元の作品を残し、最終出力用の複製で整理すると安全に試しやすくなります。

線が太くなった、角が丸くなったなどの変化は、拡大縮小時の設定や図形の種類を確認します。すべての変形で同じ結果になるとは限らないため、練習用の四角と線を使って挙動を試す方法が役立ちます。原因を見つけたら、どの設定を変更したかをメモに残し、次に同じ問題が起きたときの確認順へ加えてください。

小さな図版を一つ完成させて学習を続ける

最後に、案内図の入口、受付、展示室、休憩場所が分かり、矢印の方向が矛盾せず、名称を修正できるSVGが残っているかを確認します。PNGを別のアプリで開いて、必要な寸法と透明度、文字の読みやすさを見ます。この一周ができたら、次は別の配置、色数の少ない版、縦長の版などへ課題を広げられます。新しい機能を増やす前に、基本操作の理由を説明できる状態を目指しましょう。

図形を作れるようになり、情報の整理や配色をさらに学びたい場合は、Webデザインスクールの料金・学習内容・支援比較も参考になります。Inkscapeそのものの操作を教える講座か、別のソフトを使うデザイン学習かは確認が必要です。作りたい成果物と現在のつまずきを言葉にしてから比較すると、必要な学習を選びやすくなります。

Inkscapeの入門では、図形を選ぶ、整列する、パスを必要な範囲で調整する、文字を読みやすく置く、用途別に出力するという流れを大切にしてください。複雑な作品へ進む前に、小さな案内図を自分で直して出し直せることが、継続して使うための基礎になります。