SVG 編集ツールおすすめ10選！無料・オンラインで使えるSVGファイル編集を徹底比較

ロゴを Web サイトに載せようとしたとき、拡大したら輪郭がぼやけてしまった。アイコンをリサイズしたら画像が荒れてしまった。そんな経験をしたことがある人は多いはずです。PNG や JPEG などのラスター画像はピクセルで構成されているため、サイズを変えると画質が劣化します。しかし SVG ファイルであれば、どれだけ拡大・縮小しても線はシャープなまま。Web デザインやアプリ開発の現場では、SVG 編集の需要はここ数年で大きく伸びています。

いざ SVG 編集を始めようとすると、ツールの選び方でつまずくケースが少なくありません。無料・有料・ブラウザ完結・インストール型など、選択肢がとにかく幅広い。この記事では、2026年時点で実際に使えるおすすめの SVG 編集ツールを10本まとめ、料金・機能・向いている使い方まで具体的に解説します。「どれを選べばいいかわからない」という方の参考になれば幸いです。

SVG ファイルとは？編集を始める前に知っておきたい基礎知識

SVG ファイルの仕組みとメリット

SVG とは「Scalable Vector Graphics」の略で、ベクター形式の画像フォーマットです。内部は XML テキストで記述されているため、テキストエディターでコードを直接開いて確認・編集することもできます。

ラスター画像がピクセルの集まりで成り立っているのに対し、SVG ファイルは「線」「曲線」「図形」を数式で定義しています。そのため、どんな解像度でも劣化しません。スマートフォンの小さな画面から 4K の大型ディスプレイまで、常にクリアな表示が保たれます。ファイルサイズも比較的コンパクトで、HTML に直接埋め込んで CSS や JavaScript でアニメーションを加えることも可能です。Web デザイン・UI 開発・印刷用データ作成など、用途は非常に幅広い。

SVG 編集ツールを選ぶ3つのポイント

SVG 編集ツールを選ぶ際には、次の3つを軸に考えると整理しやすくなります。

1. 利用環境（ブラウザ型 vs インストール型）
ブラウザ型はインストール不要で、URL にアクセスするだけで使えます。デバイスや OS を問わず同じ環境で作業できる反面、インターネット接続が必須です。インストール型はオフラインでも動作し、大容量ファイルの処理が安定しているのが強みです。

2. チームで使うかどうか
個人の作業であれば機能が充実した単体ツールで十分ですが、チームでリアルタイムに共同作業する場合は、コメント機能やバージョン管理を備えたコラボレーションツールが必要になります。

3. 料金モデル（無料・サブスクリプション・買い切り）
無料ツールでも実務に耐えるクオリティのものがあります。一方で長期間使い続けるなら、買い切り型のほうがトータルコストを抑えられる場合もあります。自分の利用頻度と予算に合わせて選びましょう。

【比較表】おすすめ SVG 編集ツール10選

各 SVG 編集ツールの詳細レビュー

1. Pixso — チームでの SVG 編集に最も対応したオールインワンツール

Pixso はブラウザだけで動作するデザインプラットフォームで、SVG ファイルの作成・編集・書き出しをひとつの環境で完結できます。インターフェースは Figma に近い設計で、ベクター編集の経験がある人であればほぼ迷わず使い始められます。日本語 UI に対応しているのも、国内ユーザーにとってはありがたいポイントです。

特に強みを発揮するのがチームでの共同作業です。複数のメンバーがリアルタイムで同じファイルを編集でき、コメント機能でフィードバックをデザイン上に直接書き込めます。バージョン履歴も残るため、誤って変更してしまっても以前の状態に戻すことが可能です。SVG・PNG など複数フォーマットへの書き出しにも標準で対応しています。

無料プランでは個人の下書きが無制限に作成でき、チームスペースは3ボードまで利用可能です。本格的なチーム利用や高度なプロトタイプ機能が必要な場合は有料プランへのアップグレードが必要ですが、まずは無料から始めてみる価値は十分あります。

• 料金：無料プランあり（チームスペース3ボードまで）、有料プランは公式サイトで確認
• メリット：日本語対応・リアルタイム共同編集・ブラウザだけで完結
• デメリット：高度なベクター編集は専用ツールと比べると機能に差がある場合も

2. Figma — 世界中のデザイナーが信頼するコラボレーションプラットフォーム

Figma はブラウザとデスクトップアプリの両方で動作する、世界的に利用者数の多いデザインツールです。SVG 編集の機能面では、パス操作・ブーリアン演算（図形の結合・差分・交差）・グラデーション設定など、実務に求められる操作はほぼすべてカバーしています。コミュニティが非常に活発で、無料のテンプレートやプラグインも膨大な数が公開されているため、作業効率を大幅に上げやすい環境です。

複数人が同じファイルをリアルタイムで編集できるコラボレーション機能は、チームプロジェクトで特に便利です。デザイナーとエンジニアが同じファイルを見ながら会話できるため、制作フローがスムーズになります。

料金は、無料の Starter プランでは3ファイルまでの制限があります。Professional プランは年払いで月額 $12/ユーザー、月払いで月額 $16/ユーザーです。より大規模なチーム向けの Organization プランは月額 $55/ユーザーとなっています。

• 料金：無料プランあり、Professional は月額 $12〜$16/ユーザー、Organization は月額 $55/ユーザー
• メリット：機能が豊富・プラグインが充実・マルチプラットフォーム対応
• デメリット：無料プランはファイル数に上限あり・高機能なぶん慣れるまで時間がかかる

3. Sketch — Mac ユーザーのプロが長く愛用するデザインツール

Sketch は Mac 専用のデザインソフトとして、UIデザインの現場で長年にわたって使われてきた定番ツールです。SVG の作成・編集においても精度が高く、アートボードを活用した複数画面の管理、シンボル機能による再利用コンポーネントの整理など、プロフェッショナルな現場に合った機能が揃っています。

ライセンス体系は2種類あります。Mac アプリのみを使う「Mac-only ライセンス」が $120（買い切り）、クラウドやウェブアプリも含めたフル機能の年額サブスクリプションが $139/年です。月払いの場合は App Store 経由で月額 $14 となっています。

最近はブラウザ版も提供されており、Windows からもある程度の閲覧・コメントが可能になりました。ただし、本格的な編集には Mac のデスクトップアプリが必要です。Figma や Pixso と比べるとコラボレーション機能の使いやすさで差がありますが、すでに Mac で作業している人には引き続き安定した選択肢です。

• 料金：Mac-only ライセンス $120（買い切り）、年額プラン $139/年
• メリット：UIデザインに特化した機能が豊富・動作が安定
• デメリット：フル機能は Mac 専用・日本語 UI なし

4. Inkscape — 本格的な SVG 編集が完全無料でできるオープンソースツール

Inkscape はオープンソースの SVG 編集ツールで、Windows・Mac・Linux のすべてのプラットフォームに対応しています。無料ツールとは思えないほど機能が充実しており、ベジェ曲線の編集・テキスト操作・フィルター効果・レイヤー管理など、プロレベルの SVG 編集作業にも対応できます。

SVG ファイルの仕様に忠実に作られているため、他のツールで開いたときのレイアウトずれが起きにくい点も特徴のひとつです。日本語の解説記事や動画も比較的多く、初めてベクター編集に挑戦する人にとっても入りやすい環境が整っています。

Adobe Illustrator や CorelDRAW のコストに悩んでいるデザイナーにとっても、Inkscape は現実的な代替候補になります。ただし、UI のデザインが他のモダンなツールと比べると古めかしく、起動時間がやや長いという声もあります。とはいえ「完全無料で本格的な SVG 編集をしたい」という条件なら、Inkscape を超えるツールはなかなか見つかりません。

• 料金：完全無料・オープンソース
• メリット：機能が豊富・無料・日本語の情報が多い
• デメリット：UI がやや古い・重くなる場合がある・クラウド保存には非対応

5. Affinity Designer — 買い切りで長く使えるプロ向け SVG 編集ツール

Affinity Designer は、月額課金なしの買い切り型ライセンスというモデルが大きな特徴です。デスクトップ版（Windows・Mac）は $69.99 の一回払いで、追加費用なく使い続けられます。なお iPad 版は現在 App Store で無料で提供されています。Adobe のサブスクリプションコストに不満を持つデザイナーから高い評価を受けているのも納得です。

SVG 編集の面では、同じファイル内でベクターモードとラスターモードを自由に切り替えながら作業できる点が際立っています。ベクター図形の編集からピクセル単位の仕上げまで、ひとつのツールで完結できます。動作が非常に軽快で、複雑なファイルでもスムーズに操作できる点はインストール型ツールの強みです。

Windows・Mac・iPad に対応しており、日本語 UI も用意されています。オフライン作業が可能なため、インターネット環境に左右されずに作業したい人にも向いています。ただし、リアルタイムの共同編集機能は搭載されていないため、チームでの共同作業には向きません。

• 料金：デスクトップ版 $69.99（買い切り）、iPad 版は現在無料
• メリット：買い切り型でコスパが高い・動作が軽快・日本語対応
• デメリット：オンライン共同作業には非対応・初期費用が発生する

6. Gravit Designer — クラウド保存でどこからでもアクセスできる SVG 編集ツール

Gravit Designer はクラウドベースのベクターデザインツールで、ブラウザ版とデスクトップアプリ版の両方が用意されています。作成したファイルはクラウドに自動保存されるため、自宅のパソコンで途中まで作ったデザインを、外出先の別のデバイスで続きから編集するという使い方ができます。SVG のインポート・エクスポートに対応しており、他のツールとの連携もスムーズです。

無料プランでは基本的な SVG 編集機能は使えますが、クラウドストレージの容量とエクスポートオプションに制限があります。有料の PRO プランにアップグレードすると、オフラインモード・無制限のクラウドストレージ・高度なエクスポート設定が利用可能になります。PRO の料金は約 $55/年が目安です。

インターフェースは比較的わかりやすく、デザイン初心者でも短時間で基本操作を覚えられる構成になっています。ただし、Figma や Sketch と比べるとプラグインエコシステムや機能の深さではやや見劣りする部分があります。

• 料金：無料プランあり、PRO は約 $55/年
• メリット：クロスプラットフォーム・クラウド保存対応・初心者にも使いやすい
• デメリット：日本語 UI 非対応・高度な機能は有料

7. Vectr — インストール不要ですぐ使える軽量 SVG 編集ツール

Vectr は完全無料で使えるブラウザベースの SVG 編集ツールです。URL にアクセスするだけで編集を始められるシンプルさが最大の魅力で、アカウント登録すら不要で試せます。基本的な図形の作成・テキスト追加・パスの編集など、SVG ファイルの基本操作はひとおり揃っています。

リアルタイムの共同作業にも対応しており、URL を共有するだけで複数人が同時に編集できます。大規模なプロジェクトには向きませんが、シンプルなロゴの修正・SNS 用グラフィックの制作・アイコンの微調整程度であれば十分に対応できます。

高機能な SVG 編集という点では Inkscape や Figma には及びません。しかし「今すぐ SVG を編集したい」「インストールする手間をかけたくない」という状況では、Vectr ほど手軽なツールは他にないでしょう。SVG 編集をこれから始めてみたい初心者にも気軽に試せる入口として最適です。

• 料金：完全無料
• メリット：インストール不要・完全無料・操作がシンプル
• デメリット：高度なベクター編集には不向き・日本語 UI 非対応

8. Boxy SVG — コードとビジュアルを同時に扱える開発者向け SVG 編集ツール

Boxy SVG は SVG のソースコードをリアルタイムで確認しながらビジュアル編集できる、少し変わったアプローチのツールです。ブラウザ版と Chrome 拡張機能版があり、どちらも基本機能は無料で利用できます。

最大の特徴は、編集画面の横に SVG の XML コードが常時表示される点です。ビジュアルで図形を動かすとコードが即座に変わり、逆にコードを直接書き換えるとビジュアルにもリアルタイムで反映されます。「SVG のコード構造を理解しながら編集したい」「アニメーション属性を手動で追加したい」というフロントエンドエンジニアやコード寄りのデザイナーには、特に使い勝手が良いツールです。

CSS クラスの付与・SVG フィルターの細かい設定・カスタム属性の追加なども、コードレベルで直接操作できます。デザイン初心者にはやや敷居が高いですが、SVG をコードで扱う機会が多い人には代えがたい存在になるかもしれません。

• 料金：無料プランあり（Chrome 拡張・ブラウザアプリ）
• メリット：コードとビジュアルの同時編集・エンジニア向けの操作感
• デメリット：デザイン初心者には不向き・日本語 UI 非対応

9. Inkpad — iPad でタッチ操作しながら SVG を描けるアプリ

Inkpad は iPad 専用のベクターデザインアプリです。$4.99 の買い切り価格で入手でき、Apple Pencil を使ったタッチ操作でのパス描画に最適化されています。手書き感覚で SVG イラストを制作したい人や、外出先でスケッチしながらアイデアをまとめたい人に向いています。

基本的なベクター編集機能は一通り備わっており、SVG ファイルのインポート・エクスポートにも対応しています。ただし、チームでの共同作業機能は搭載されていないため、個人利用が前提のツールです。iPad 専用アプリのため、Mac や Windows では使えない点も注意が必要です。

$4.99 という価格は SVG 編集ツールの中でも最安値水準で、iPad をメインのデザインデバイスとして使っている人なら気軽に導入できます。本格的なプロ向けというよりは、iPad でさっと SVG を描きたい個人ユーザーに最もフィットするツールです。

• 料金：$4.99（買い切り・iPad 専用）
• メリット：Apple Pencil 対応・タッチ操作に最適化・価格が安い
• デメリット：iPad 専用・チーム機能なし・日本語 UI 非対応

10. CorelDRAW — 商業デザインの現場で長年使われてきた業界標準 SVG 編集ツール

CorelDRAW はグラフィックデザイン業界で30年以上の歴史を持つ、プロフェッショナル向けのベクターデザインソフトです。SVG を含む多様なファイル形式に対応しており、印刷物・パッケージデザイン・サイン制作など、商業デザインの現場で幅広く活用されています。

機能の深さはこの記事で紹介するツールの中でもトップクラスです。高精度なカラーマネジメント・印刷用の CMYK カラー設定・大判印刷向けの出力設定など、プロの現場が必要とする機能がすべて揃っています。Windows 版と Mac 版の両方が提供されており、企業内の標準ツールとして採用しやすい環境です。

料金は CorelDRAW Graphics Suite の年額サブスクリプションが $239〜$269/年（時期によってセールあり）、買い切りの永続ライセンスは $439〜 となっています。個人利用にはコストが高いため、企業のデザイン部門や専門の制作会社向けのツールといえます。

• 料金：年額 $239〜$269 または買い切り $439〜
• メリット：業界最高水準の機能・印刷対応・商業利用に強い
• デメリット：コストが高い・個人利用には機能が過剰になりがち

目的別 SVG 編集ツールの選び方

ここまで10本のツールを紹介しましたが、実際の選び方はシンプルです。自分の使い方に合わせて、次の基準で絞り込んでみてください。

無料で本格的な SVG 編集をしたい場合

まず試してほしいのは Inkscape です。オープンソースで完全無料ながら、ベジェ曲線・レイヤー・フィルター効果など、実務に必要な機能がすべて揃っています。軽い編集だけでいいなら Vectr でもすぐに始められます。

チームで SVG ファイルを共同編集したい場合

リアルタイムの共同作業が必要なら、Pixso または Figma が最有力候補です。どちらもブラウザベースで動作し、チームメンバーが URL にアクセスするだけで同じファイルを同時編集できます。日本語対応を重視するなら Pixso が使いやすく、プラグインの豊富さを求めるなら Figma が一歩リードしています。

買い切りでコストを抑えて長期利用したい場合

Affinity Designer が最もおすすめです。デスクトップ版 $69.99 の一回払いで使い続けられるため、月額課金が積み重なるサブスクリプション型と比べると、長期間使えばかなりコストを抑えられます。iPad 版は現在無料で入手できるため、マルチデバイスで作業したい人にも向いています。

コードと一緒に SVG を扱いたいエンジニアの場合

Boxy SVG を選んでください。ビジュアル編集と XML コードの編集を画面上で同時に行える設計は、フロントエンド開発の現場では特に便利です。アニメーション属性の手動追加や、CSS クラスの付与もコードレベルで直接できます。

商業印刷・企業のデザイン部門での利用

CorelDRAW か Affinity Designer が向いています。特に CorelDRAW は CMYK カラーの精度・印刷プリセットの細かさ・業務での使用実績という点で他のツールと一線を画しています。

SVG ファイルの基本的な編集方法

どのツールを選んでも、SVG 編集の基本操作は共通しています。ここでは最低限覚えておきたい4つの操作を説明します。

図形の作成と変形

SVG 編集ツールには、長方形・円・多角形などの基本図形を配置するツールがツールバーに用意されています。配置した図形はドラッグでサイズを変えたり、プロパティパネルに数値を直接入力して正確なサイズに合わせたりできます。複数の図形を選択してグループ化することで、まとめて移動・変形することも可能です。

パスとベジェ曲線の操作

SVG 編集の核心は「パス」の操作です。パスはアンカーポイントとハンドルで構成され、ハンドルを動かすことで曲線の形を自由に変えられます。ほとんどのツールには「ペンツール」が用意されており、クリックでアンカーポイントを追加しながらパスを描いていきます。最初は難しく感じるかもしれませんが、慣れてくると複雑なロゴやイラストも思い通りに描けるようになります。

カラーとグラデーションの設定

図形の塗りつぶし色とストローク（線の色）はカラーピッカーで自由に設定できます。グラデーションを使う場合は「線形グラデーション」か「放射グラデーション」を選び、カラーストップを追加して色の変化をコントロールします。透明度の調整もここで行えます。

SVG ファイルの書き出し

編集が完了したら SVG 形式で書き出します。Web 用途なら SVG のまま、印刷用途なら PDF や高解像度の PNG に変換するのが一般的です。書き出し時に「最適化 SVG」を選ぶと、不要なコードが削除されてファイルサイズを小さくできます。ツールによっては書き出し設定の項目が細かく用意されているため、用途に合わせて確認してみてください。

よくある質問（FAQ）

Q1：SVG ファイルと PNG ファイルの違いは何ですか？

SVG はベクター形式のため、どんなサイズに拡大・縮小しても画質が劣化しません。テキストデータで構成されているため、ファイルサイズがコンパクトで CSS や JavaScript からも操作できます。一方 PNG はピクセルで構成されるラスター形式で、写真のような複雑な色の表現に向いています。ロゴ・アイコン・イラストには SVG、写真や複雑なグラデーション画像には PNG という使い分けが基本です。

Q2：ブラウザだけで SVG ファイルを編集できますか？

はい、できます。Pixso・Figma・Vectr・Gravit Designer・Boxy SVG などはすべてブラウザベースのツールで、インストール不要で使えます。インターネット接続があれば、Windows でも Mac でも Chromebook でも同じように作業できます。

Q3：無料で商用利用できる SVG 編集ツールはありますか？

Inkscape は完全無料かつオープンソースで、商用利用に制限はありません。Vectr も無料で商用利用が可能です。ただし、ツール自体が無料でも、編集に使用するフォントやアイコン素材に別途ライセンスが必要な場合があります。素材のライセンスは必ず個別に確認してください。

Q4：Illustrator の代わりになる SVG 編集ツールはありますか？

Inkscape は機能面で Adobe Illustrator と比較されることが多く、無料でありながら本格的なベクター編集が可能です。Affinity Designer は買い切り型で Illustrator に近い操作感を持ち、コストを重視するプロデザイナーからの評価が高い選択肢です。FigmaやSketchはUIデザインに強みがあるため、印刷物制作向けの Illustrator とは少し方向性が異なります。

Q5：SVG ファイルを別の形式に変換するにはどうすればいいですか？

SVG 編集ツールの書き出し機能を使って PNG・PDF・WebP などに変換するのが最もシンプルな方法です。ツールを使わずにブラウザ上で変換したい場合は、「Convertio」「CloudConvert」などのオンライン変換サービスが便利です。逆に PNG や JPEG などのラスター画像を SVG に変換する場合は「トレース（ベクター化）」という処理が必要で、複雑な写真は完全に再現できないこともあります。

Q6：SVG ファイルはスマートフォンで編集できますか？

本格的な SVG 編集はPC またはタブレット環境が推奨です。iPad であれば Inkpad（$4.99）が Apple Pencil に対応しており、タッチ操作で SVG イラストを描けます。スマートフォンのブラウザから Vectr などのオンラインツールを開いて簡単な編集をすることは技術的には可能ですが、画面が小さく操作性が大きく下がるため実用的ではありません。

まとめ

SVG 編集ツールの選択は、作業スタイルや目的によって変わります。迷ったときは「まず無料で試す」が基本です。Vectr か Inkscape で SVG 編集の感覚をつかんだうえで、チームでの利用が必要になれば Pixso や Figma に移行する、長期的に使うなら Affinity Designer を購入する、という流れが現実的です。SVG ファイルを使いこなせるようになると、Web デザイン・アプリ開発・マーケティング素材の制作など、仕事の幅が大きく広がります。まずは自分に合ったツールをひとつ選んで、実際に手を動かしてみるところから始めてみてください。

チームで SVG 編集環境を整えたいと考えているなら、Pixso の無料プランから試してみることをおすすめします。ブラウザだけでリアルタイムの共同作業・コメント・プロトタイプ作成が完結する環境を、すぐに体験できます。