svgdeskエディタの使い方
ツールの完全ガイド
svgdesk はブラウザで動く無料のSVGグラフィックエディタです。すべて端末内で処理されます。このガイドはエディタの各部を解説します。
1. ドキュメントの作成または読み込み
- 新規 新規：キャンバスサイズを選ぶダイアログ（標準SVGプリセット：16・24・32・48・64・128・256・512 px）。
- SVGを開く SVGを開く：端末の
.svgを読み込み。作業領域にドラッグも可。 - カタログ：アイコンで選び「svgdeskで編集」を押すと読み込まれます。
2. ツールバー（左）
- ↖ 選択 (V)：移動・拡縮・回転。
- ▭ 長方形 (R)、◯ 楕円 (E)、╱ 直線 (L)：ドラッグで描画。Shiftで正方形・正円・直線（0/45/90度）。
- ✎ ペン (P)：ポリゴン/曲線。クリックで点追加、ダブルクリックで閉じる、Escで取消。
- ✐ 鉛筆 (D)：フリーハンド。
- ◇ ノード (N)：図形の点を編集。
3. 選択と変形
- 図形をクリックで選択、ドラッグで移動。
- 角/辺のハンドルで拡縮、ピンクの円で回転。
- Shift+クリック：複数の図形を選択してまとめて移動/変更。
- 範囲ドラッグ（空白部分）：範囲内の図形をすべて選択。
- 複製 複製（または Ctrl+D）：選択をずらして複製。
- 右クリックで利用可能な操作メニュー（複製・グループ化/解除・レイヤー・削除）。
- 空白をクリックで選択解除。
4. プロパティパネル（右）
- 塗りと線：色（16進数）または「なし」。
- 太さ・不透明度・塗り不透明度・回転。
- 複数選択時は変更がすべてに適用されます。
5. レイヤー（重ね順）
要素パネルのレイヤーボタンで、選択を最前面 ⤒、前面へ ↑、背面へ ↓、最背面 ⤓ に移動できます。順序で重なりが決まります。
6. グループ化と解除
- 複数選択して グループ化 グループ化（Ctrl+G）でひとつのグループに。
- 解除 解除（Ctrl+Shift+G）でグループを解除。
- 複合パス（複数の部分を持つ1つの
path、例：りんごと葉）を選んで解除すると独立したパスに分割され、各部分に別の色を付けられます。
7. ノードとベジェ曲線の編集
- 図形をダブルクリック（または N）でノードモードに。
- アンカーをドラッグ。Shiftで軸固定。
- 曲線に変換（ノードをダブルクリック）でベジェハンドルを追加。ピンクの点をドラッグ。
- 対称または独立ハンドル（ドラッグ中の Alt で対称解除）。
- セグメント中点のクリックでノードを追加、Delで削除。
- Shift+クリックで複数ノードを選択して一緒に移動。
- ノードモードで範囲ドラッグすると範囲内のノードをすべて選択。
8. リアルタイムSVGコード
下部パネルにSVGコードが表示され編集可能：入力するとキャンバスに反映されます。最適化 最適化ボタンはコードを整理（色を16進数化、数値を丸め、メタデータ削除）し、画像を壊しません。
9. キャンバスの背景とテーマ
◷ 背景ボタン（ヘッダー）はキャンバスの市松模様を明/暗で切り替え、黒や白の縁を見やすくします。
☀ テーマボタンはエディタのインターフェース全体をダーク/ライトで切り替えます。どちらの設定も次回まで記憶されます。
10. 元に戻す / やり直す
↶ Ctrl+Z で元に戻し、↷ Ctrl+Shift+Z でやり直し。各操作は履歴に残ります。
11. 書き出し
書き出し 書き出しを押します。ダイアログでファイル名（既定はカタログのアイコン名やアップロードしたファイル名、新規なら "untitle"）を決め、SVG（ベクター）かPNG（高解像度画像, 2x）を選びます。未書き出しの変更があるまま離れようとすると警告し、先にダウンロードを提案します。
キーボードショートカット
- V 選択 · R 長方形 · E 楕円 · L 直線 · P ペン · D 鉛筆 · N ノード
- Del / Backspace 削除 · Esc 取消/終了
- Ctrl+Z 元に戻す · Ctrl+Shift+Z やり直す · Ctrl+D 複製
- Ctrl+G グループ化 · Ctrl+Shift+G 解除 / パス分割
- Shift ノード移動時に軸固定 / 描画時に正方形・正円・直線 · Shift+クリックまたは範囲：複数選択 · Alt ハンドルの対称解除