ブラウザで動くSVGエディタ

コードを書くように
ベクターを編集

図形を描き、ノードやベジェ曲線を動かし、SVGコードをリアルタイムで調整してSVGやPNGに書き出します。インストール不要、登録不要。

無料 · 登録不要 100% ブラウザ内 SVG & PNG

svgdeskでできること

素早い修正にもゼロからの作成にも向いた、軽量なベクターエディタ。

図形を描く

長方形・楕円・直線、ペンでのポリゴン、鉛筆でのフリーハンド。

ノードを編集

アンカーを動かし、角を曲線に変え、ベジェハンドルを調整し、ノードを追加・削除。

変形

精密なハンドルで、どの要素も移動・辺や角からの拡縮・回転。

選択とグループ

Shiftや範囲選択で複数を選択。グループ化/解除、複合パスの分割も。

</>

リアルタイムSVGコード

SVGコードを編集すると即座に反映、双方向で同期。

書き出し

ベクターのSVG、または高解像度のPNG画像としてダウンロード。

元に戻す / やり直す

Ctrl+Z と Ctrl+Shift+Z の完全な履歴。失敗を恐れず作業。

svgdeskの使い方

4ステップで最初のベクター画像を。

  1. キャンバスを作成/読み込み「新規」でサイズを選ぶか、既存の.svgを作業領域にドラッグ。
  2. 描いて選択左のツールバーから選んで描画。矢印で選択・移動・変形。Shiftや範囲選択で複数を一度に。
  3. 細部を調整パネルで塗り・線・不透明度・回転を変更。グループ化、パス分割、ノード編集で曲線を調整。
  4. 書き出しファイル名を付けてSVGまたはPNGでダウンロード。

今すぐ試す

アイコン + エディタ

カスタマイズできる1500点以上のアイコン

ゼロから始めなくてOK。カタログのアイコンを取り込んで必要な形に編集。

アイコンを選ぶ

1500点以上の無料アイコン(Phosphor)を3スタイル(bulk・outline・solid)で検索。

エディタで開く

「svgdeskで編集」をクリックすると、編集できる状態で読み込まれます。

自分仕様に

色・サイズ・ノード・曲線を変更。完成したらSVGやPNGに書き出し。

アイコンを見る エディタを開く

よくある質問

エディタについて多い質問。

svgdeskは無料ですか?

はい。ブラウザからすべての機能を無料で、登録不要で使えます。

インストールは必要ですか?

いいえ。ブラウザ内で動作します。インストールやプラグインは不要です。

ファイルはサーバーに送られますか?

いいえ。すべての処理はブラウザ内で行われます。開いたり作成したファイルがサーバーに送られることはありません。

どの形式で書き出せますか?

SVG(ベクター)またはPNG(高解像度のラスター画像)として書き出せます。

SVGコードを直接編集できますか?

はい。コードパネルは編集可能で、キャンバスと双方向にリアルタイム同期します。

モバイルで使えますか?

デスクトップ向けに作られており、マウスでノードを精密に編集できます。モバイルでは機能が限られます。