オンラインでSVGファイルを編集する方法（手順）

実践チュートリアル

SVGの編集に重いソフトは不要です。svgdeskのようなオンラインエディタなら、ブラウザから無料・インストール不要で行えます。ファイルは端末内で処理され、サーバーには送られません。

1. SVGファイルを開く

方法は2つ：.svgを作業領域に直接ドラッグするか、上部のSVGを開くを押します。新規でキャンバスサイズを選んでゼロから始めることもできます。

2. 図形を選択

選択ツール（矢印）で要素をクリックします。移動・辺や角からの拡縮ハンドルと、回転用の点が表示されます。ドラッグで移動、角でサイズ変更。

複数を同時に選ぶには Shift を押しながらクリック、または空白部分に範囲ドラッグします（範囲内に完全に入った図形が選択されます）。複数選択するとまとめて移動や色変更ができます。

3. 色とスタイルを変更

右パネルで塗り・線・太さ・不透明度・回転を調整。色は16進数で入力するかピッカーで選択。塗りや線を消すには「なし」ボタンを使います。

4. ノードを編集（任意）

形そのものを変えるにはノードモードへ：図形をダブルクリックします。アンカーの移動、角を曲線に変換、ベジェハンドルの調整、ノードの追加・削除ができます。線を精密に整えるのに便利。

5. 要素のグループ化・分割

複数選択してグループ化（Ctrl+G）でひとつに。解除（Ctrl+Shift+G）で戻します。複数の部分を1つの path に持つアイコン（例：りんごと葉）の場合、解除すると独立したパスに分割され、各部分に別の色を付けられます。

6. コードを直接編集

SVGコードパネルは編集可能でリアルタイム同期します。SVGが分かれば、コードを貼り付け・変更して結果を即確認できます。最適化ボタンはコードを整理（16進数化・丸め・メタデータ削除）し、画像を壊しません。

7. 作品を書き出す

書き出しを押します。ダイアログでファイル名（既定はカタログのアイコン名やアップロードしたファイル名、ゼロからなら "untitle"）を決め、SVG（ベクター）かPNG（高解像度画像, 2x）を選びます。未保存の変更があるまま離れようとすると警告し、先にダウンロードを提案します。

便利なショートカット

エディタの見た目も変更可：テーマボタンでUIをダーク/ライト、背景でキャンバスの市松模様を切り替えます。

エディタを開く

続けて読む