Tools 4 All
ホーム
画像ツール

オンライン SVG エディター

ブラウザーで動く高速でプロ仕様のベクターエディター：ペンで描き、アンカーポイントを編集し、図形を合成し、グラデーションでスタイルを付け、アニメーションを作り、最適化された SVG や PNG を書き出します。何もアップロードされません。

無料登録不要ローカルで動作 — ファイルはデバイスから出ません

クイックスタートとショートカット

左のツールを選び（またはそのキーを押し）、キャンバス上をドラッグして描き、右のデザインパネルで選択範囲にスタイルを付けます。いつでも ? を押すとショートカットの一覧が表示されます。

  • 移動：スクロールでパン、Ctrl/⌘ ＋ スクロールまたはピンチでズーム、Space を押しながらドラッグでパン。Shift+1 で全体表示。
  • 選択：クリック、Shift-クリック、またはドラッグで範囲選択。グループをダブルクリックで中に入り、パスならアンカーポイントの編集、テキストなら入力。
  • 変形：ハンドルをドラッグして拡大・縮小（Shift で縦横比を保持、Alt で中心から）、丸いノブをドラッグして回転、辺のハンドルを Ctrl/⌘-ドラッグして傾斜。
  • ペン：クリックでコーナー、ドラッグで曲線、最初のアンカーポイントをクリックでパスを閉じ、Enter で終了。
  • ファイル：エディターのどこにでも SVG や画像をドロップ、SVG コードやスクリーンショットを貼り付け、自動保存で作業を保持。
Untitled
Guide, features and FAQ

SVGエディターの使い方

  1. 開くか描き始める

    SVG、PNG、JPEG をキャンバスにドロップするか、ファイルを開くか、空白のページから始めます。何もアップロードされません。エディターは完全にブラウザー内で動作します。

  2. 描画と編集

    ペン、鉛筆、図形ツールを使い、アンカーポイントごとにパスを調整し、ブーリアン演算で図形を合成し、塗り、線、グラデーションでスタイルを付けます。

  3. 整理

    レイヤーパネルでオブジェクトをグループ化、並べ替え、ロックし、整列・分布させ、アートワークをシンボルとして再利用し、SVG コードを直接編集できます。

  4. 書き出し

    最適化された SVG、PNG、JPEG、WebP を任意の倍率でダウンロードするか、結果を SVG コード、データ URI、React コンポーネント、CSS から色を取得する Tailwind 対応の SVG としてコピーできます。

完全にブラウザーで動くプロ仕様の SVG エディター

Tools 4 All の SVGエディターは、ダウンロードもアカウントもアップロードもなしにすぐ開く本格的なベクターグラフィックアプリケーションです。ロゴ、アイコン、イラスト、図、UI アセットの描画や、手持ちの SVG ファイルの整理と微調整に使えます。SVG 形式そのものを中心に作られているため、書き出すファイルは編集したドキュメントと同じです。独自形式も隠れた変換もありません。

できること

  • 正確に描く：ベジェ曲線のペンツール、スムージング付きのフリーハンド鉛筆、角丸・面取り・反転を個別に設定できる長方形、楕円、直線、塗りブラシ、消しゴム、ナイフ、はさみ、そして編集可能な図形（多角形、星、三角形、十字、フレーム、リング、扇形、三日月、矢印、吹き出し、歯車、ハート、雲、花、渦巻き）とテキスト。
  • アンカーポイントごとにパスを編集：アンカーポイントとハンドルの移動、コーナー・スムーズ・対称の切り替え、アンカーポイントの追加と削除、パスの連結と分割、セグメントの直接変形、ハンドルの接線へのスナップ。
  • 図形の合成：合体、前面で型抜き、交差、中マド、分割に加え、線のアウトライン、パスのオフセット、単純化、反転。すべて曲線を保持する独自のジオメトリエンジンがバックグラウンドのワーカーで計算します。
  • あらゆるスタイル：単色、キャンバス上のハンドル付きの線形・放射状グラデーション、パターン、塗りと線ごとの不透明度、破線、線端、角の形状、矢印マーカー、描画モード、ぼかしとドロップシャドウ効果、クリッピングパスとマスク。
  • 整理整頓：ドラッグでの並べ替え、名前の変更、入れ子に対応したレイヤーパネル、ロックと非表示、グループ化と解除、選択範囲・アートボード・キーオブジェクトへの整列と分布、ドキュメントのスウォッチ、再利用できるシンボル。
  • プロのように作業：距離ラベルと等間隔のヒント付きのスマートガイド、グリッド・ピクセル・定規ガイド・アンカーポイント・パスへのスナップ、X/Y/W/H/回転の数値入力、無制限の元に戻す、Figma や Illustrator 風のショートカット。
  • コードと書き出し：双方向の SVG コード表示、サイズ表示付きの最適化された SVG 書き出し、任意の倍率での PNG/JPEG/WebP、SVG・データ URI・React（JSX または TSX）・Tailwind SVG・CSS 背景としてのコピー。
  • ウェブ制作向け：ワンクリックで置き換えられるドキュメントカラーと currentColor への変換、テキストのアウトライン化、線のアウトライン、変形の適用とグループ解除、キャンバスをコンテンツに合わせる機能、ノイズの多いパスの単純化。
  • 本格的な作業環境：複数の図面をタブで開き、それぞれに元に戻す履歴を持ち、サブメニュー付きの短いメニュー、折りたためるサイドパネル（Ctrl/⌘+B）、スマートフォンとデスクトップでの全画面編集に対応。

SVG ネイティブのエディターが重要な理由

多くのデザインツールは SVG を書き出し形式として扱います。独自のモデルで描き、最後に SVG が生成されます。シンプルなアイコンならそれで十分です。しかし、既存のファイルを編集したり、CSS や JavaScript が依存する ID を保持したり、ファイルが本来の10倍も大きい理由を理解したりする必要があると、うまくいきません。このエディターは SVG ドキュメントを直接扱います。グループはグループのまま、グラデーションはグラデーションのまま、5回使われた <symbol> は1つのシンボルのままです。レイヤーの名前を変更すると、要素の id を設定することになります。

大きなファイルでも高速

速さは最初のコードの1行目からの設計目標でした。図面は隔離されたレイヤー内でブラウザーによってネイティブに描画されます。選択ハンドル、ホバー時のアウトライン、ガイドは別のオーバーレイに描かれるため、マウスを動かしてもドキュメントには触れません。空間インデックス（R木）により、数万の図形があってもポインターの下にあるものをマイクロ秒単位で見つけます。重いドキュメントでは、パンとズームが GPU コンポジターに任され、止まるとベクターがシャープに再描画されます。ブーリアン演算、パスのオフセット、SVG の最適化などの重い処理は Web Worker で実行されるため、インターフェースは常に快適に反応します。

ベクター作業のための精密なツール

ペンツールでクリックしてコーナーを、ドラッグして滑らかな曲線を作ります。Shift を押すと45°の角度を保ち、Alt でハンドルを分割します。アンカーポイントツールでは、セグメントをドラッグして曲げ、ダブルクリックでアンカーポイントを追加し、複数のアンカーポイントを選んで整列できます。スマートガイドは、オブジェクトが隣のオブジェクトの端や中心と揃ったとき、またオブジェクト間の間隔が等しいときに表示されます。定規からガイドをドラッグして出すこともできます。正確な値を入れるには、デザインパネルに X、Y、幅、高さ、回転を入力します。入力欄では 120+16 や 200/3 のような計算式も使えます。

きれいで小さな書き出し

エディターは保存するファイルにメタデータ、未使用の定義、冗長なグループ、過度に精密な数値を残しがちです。書き出しダイアログは、SVGO 風の最適化ツールをバックグラウンドで実行します。数値を選んだ精度に丸め、パスデータを最短の形に変換し、エディターのメタデータと未使用の定義を削除し、ID と色を短くし、不要なグループをまとめます。各最適化はオフにでき、ダイアログには前後のファイルサイズが表示されます。ラスター出力では、PNG、JPEG、WebP を 1×、2×、4×、または正確なピクセルサイズで、透過背景のありなしを選んで書き出せます。

ウェブ制作のために作られています

ウェブサイトやアプリで使う SVG は、印刷用のアートワークとは異なる要件があります。ドキュメントカラーの一覧には、ファイルで使われているすべての色が表示されます。1つを変えると同じ色を使うものがすべて追従し、currentColor に変換すれば React や Tailwind のアイコンが CSS から色を取得します。読み込んだファイルには、パスの編集を難しくする入れ子のグループや変形が含まれていることがよくあります。「変形を適用してグループ解除」で一度に座標に焼き込み、「コンテンツに合わせる」で viewBox を線を含むアートワークに合わせて切り詰めます。「テキストのアウトライン化」と「線のアウトライン」は文字や線幅をどこでも同じに見えるシンプルなパスに変え、「単純化」はトレースやフリーハンドの図形から何百ものポイントを取り除きます。

ファイルはデバイスに残ります

エディターの背後にサーバーはありません。ファイルを開くとディスクからページに読み込まれ、書き出すとデバイス上でファイルが生成されます。自動保存はブラウザーのプライベートな IndexedDB ストレージに書き込まれ、最近使ったファイルの一覧もそこに保持されます。誤ってタブを閉じても、次に訪れたときに最後のドキュメントが復元されます。

他の画像ツールを見る

よくある質問

この SVGエディターは本当に無料でプライベートですか？
はい。無料で、アカウント不要、100％ブラウザー内で動作します。図面がアップロードされることはありません。ファイルはローカルで読み込まれ、自動保存はブラウザー自身のストレージ（IndexedDB）に行われ、書き出しはデバイス上で生成されます。
Illustrator、Inkscape、Figma、アイコンライブラリの SVG ファイルを開けますか？
はい。エディターは SVG ドキュメントを直接扱うため、実際のファイルの構造、ID、スタイル、グラデーション、シンボル、クリッピングパス、マスクが保たれます。乱れたファイルや無効なファイルは開くときに修復され、編集中はスクリプトが無効になり、.svgz ファイルは自動で展開されます。
Illustrator のようなペンツールやブーリアン演算はありますか？
はい。ペンツールはコーナー、スムーズ、対称のアンカーポイントでベジェパスを描き、アンカーポイントツールではアンカーポイントの追加、削除、変換、連結、分割、整列ができます。合体、前面で型抜き、交差、中マド、分割は曲線のまま処理され、線のアウトライン化、パスのオフセットと単純化もできます。
SVG をアニメーションにできますか？
はい。アニメーションのワークスペースを開き、再生ヘッドを動かして、オブジェクトの位置、回転、拡大・縮小、不透明度、色を変えます。各変更はイージングカーブ付きのキーフレームになり、すでにアニメーションしているプロパティには自動で新しいキーフレームが追加されます。アニメーションは標準の SVG（SMIL）として保存されるため、スクリプトなしにすべてのブラウザーで再生されます。
SVG コードを直接編集できますか？
はい。コードパネルには、構文ハイライト付きでライブの SVG ソースが表示されます。コードを編集すると図面が更新され、図面を編集するとコードが更新されます。どちら側からの変更も元に戻せます。
対応している書き出し形式は？
内蔵の SVGO 風最適化ツールによる、前後のサイズ表示付きの最適化された SVG と、1×、2×、4×、またはカスタムサイズの PNG、JPEG、WebP（透過も選択可）。選択範囲を SVG コード、データ URI、React 用の JSX としてコピーすることもできます。
ブラウザーが閉じたら作業は失われますか？
いいえ。ドキュメントは変更のたびに少し後でブラウザーのローカルストレージに自動保存されます。次にエディターを開くと前回のセッションが復元され、以前のドキュメントは「ファイル」→「最近使ったファイル」から開けます。
React や Tailwind 向けにアイコンに currentColor を使わせられますか？
はい。ドキュメントカラーのセクションには、図面内のすべての色が一覧表示されます（色の各表記は1回として数えます）。スウォッチをクリックするとその色を使うものをすべて選択し、一度にすべて変更できます。または「currentColor に変換」を選ぶと、エディターでの見た目はそのままに、アイコンが Tailwind の text-… クラスなどの CSS から色を取得するようになります。「編集」メニューやコンテキストメニューから、React コンポーネントや Tailwind SVG としてコピーできます。
テキストをパスに、または線を塗りの図形に変換するには？
テキストを選択して「テキストのアウトライン化」（Ctrl/⌘+Shift+O）を選ぶと、パス上のテキストやスタイル付きのスパンも含め、すべての文字がブラウザーの描画位置そのままでパスになります。線の場合は、「線のアウトライン」で線幅、線端、角の形状、破線に合った塗りの図形に変わるため、ロゴはどのサイズでも太さが保たれます。
変形や入れ子のグループを含む読み込んだ SVG を整理できますか？
はい。「変形を適用してグループ解除」は、すべての変形をパスの座標に書き込み、1回の元に戻す操作でグループを解消します。見た目が変わってしまうもの（クリップ、マスク、参照されているグループ）だけを残します。「コンテンツに合わせる」は、キャンバス（viewBox、幅、高さ）を線を含むアートワークに合わせて切り詰め、余白も指定できます。「単純化」はノイズの多いパスのポイント数を減らします。
複数の図面を同時に扱えますか？
はい。各図面はキャンバスの上にあるそれぞれのタブで開き、元に戻す履歴、選択範囲、ズームは個別に保持されます。自由に切り替えられ、タブを閉じてもファイルは「ファイル」→「最近使ったファイル」に残り、開いていたタブは次に訪れたときに戻ってきます。
コマンドはどこにあるの？メニューが短いのですが。
関連するコマンドはサブメニュー（重ね順、変形、パス、クリップとマスク、形式を指定してコピー、整列と分布…）にあります。カーソルを合わせるかタップするか、矢印キーを使います。すべてのコマンドにはショートカットもあり、? を押すと一覧が表示されます。デスクトップでは Ctrl/⌘+B でサイドパネルを折りたたみ、キャンバスを広く使えます。
スマートフォンやタブレットでも動作しますか？
はい。小さな画面ではツールが下部のツールバーに移り、パネルはシートとして開きます。ピンチでズーム、2本指でドラッグしてパン、長押しでコンテキストメニューを開きます。
図面はどのくらい大きくできますか？
エディターは重いファイルのために作られています。ヒットテストと選択に空間インデックスを使い、ハンドルとガイドには別のオーバーレイレイヤー、大きなドキュメントではコンポジターのみのパンとズーム、ジオメトリと最適化には Web Worker を使います。数万の要素を含むドキュメントでも快適に動作します。
画像ツール一覧 →
画像圧縮 見た目の品質を保ったまま画像ファイルを小さくします。 画像変換 PNG、JPEG、WebP、GIF、BMP、ICO、TIFF などの形式間で画像を変換します。 画像リサイズ 画像を正確な寸法にリサイズします。証明写真に最適です。 画像をPDFに変換 1枚以上の画像を1つの PDF 文書にまとめます。