図形・星形・多角形
長方形、円、直線、フリーハンドの線。星形や多角形、図形ライブラリの記号もすぐに置けて、線の端には矢印も付けられます。
無料の SVG エディタ
ベクターエディタ オンライン
SVG 編集は、このページだけで済みます。ファイルを開いてロゴの色を変えたり、アイコンの形を直したりしたら、そのまま SVG でダウンロード。ブラウザで動くので、インストールは要りません。
無料・登録不要ファイルは端末内で処理透かしなし
ベクター編集ワークスペース
ファイルはお使いの端末内に留まります
細かい編集には大きな画面がおすすめです。この画面ではワークスペースを横にスクロールできます。
ワークスペースを準備しています…
SVG-Edit メニューからファイルを開いたり保存したりできます。ツールを選んで描き始めましょう。
SVG-Edit を使用使い方
オンラインで SVG を編集する方法
3つの手順は、どれもこのページの中で終わります。アカウントは要りません。
01
SVG を開く
メインメニューからファイルを開き、手元の SVG を指定します。ファイルがまだなければ、サンプルを読み込むか、800 × 600 の白紙から始められます。
02
編集する
オブジェクトをクリックすると選択されます。塗りや線の色を変える、ノードをドラッグして曲線の形を変える、テキストをクリックして打ち直す。どれもその場でできます。間違えたら Ctrl+Z（Mac は Cmd+Z）で元に戻ります。
03
SVG をダウンロード
同じメニューから保存を選ぶと、ファイルがダウンロードされます。図形もパスもテキストも編集できる状態のまま。どこまで拡大しても輪郭はくっきりです。
できること
無料で使える SVG エディタの主な機能
ロゴやアイコン、図解づくりにも、手元のファイルのちょっとした修正にも使えます。
パスとノードの編集
パスツールで曲線を描いたあと、ノードやハンドルを1つずつ動かせます。ノードの追加や削除もでき、どの図形もパスに変換できます。
塗り・線・グラデーション
塗りと線の色、グラデーション、線の太さ、破線、不透明度の設定。スポイトを使えば、あるオブジェクトのスタイルを別のオブジェクトにコピーできます。
あとから直せるテキスト
文字を入れて、サイズ、太字・斜体、揃え、文字間隔を変えられます。フォントは端末に入っているものを使うため、別のパソコンでは見え方が変わることがあります。
レイヤー・グループ・整列
パーツごとにレイヤーを分けておけば、あとから探しやすくなります。グループ化、整列、等間隔の配置、前面・背面への移動もここで。
移動・拡大縮小・回転・反転
ハンドルをドラッグして変形するか、X・Y・幅・角度を数値で指定。元に戻す・やり直しがあるので、思いついた案を気軽に試せます。
SVG コードを直接書き換え
ソース表示を開くと、SVG のコードを読んだり手で書き換えたりできます。ID や viewBox のように、描画ツールでは触れない部分もここなら直せます。
グリッド・ズーム・コネクタ
グリッドを出すと間隔をそろえやすく、ズームすれば細かい部分まで確認できます。コネクタ線は2つの図形をつなぎ、図形を動かしても外れません。
ほかのファイルを取り込む
ほかのデザインアプリで保存した SVG も開けます。フィルターや効果の見え方は、保存前に確認してください。読み込み機能を使うと、別の SVG や PNG・JPG 画像を、いま編集中の作品の中に配置できます。
SVG ファイルとは？ベクター画像のまま編集するメリット
SVG は Scalable Vector Graphics の略です。ピクセルを並べて保存するのではなく、図形や線、曲線、文字を「描き方の指示」として記録していて、ブラウザが必要なサイズで描き直します。
だから SVG で保存したロゴは、名刺に刷っても駅貼りのポスターにしても、輪郭がぼやけません。あとから色を1つ、曲線を1本だけ変えることもできます。JPG だと、ピクセルの上から塗り直すしかありません。
ベクター用の無料ソフトを探してインストールしなくても、このオンラインのベクターエディタならブラウザだけで直せます。ファイルを開き、直したいところを直して、もう一度 SVG で保存してください。
拡大しても鮮明
16px のアイコンを横断幕の大きさまで広げても、ぼやけません。
中身はテキスト
SVG はコードなので、メモ帳などのテキストエディタでも開けます。
あとから直せる
図形も色も文字も、それぞれ独立したオブジェクトのまま残ります。
こんな人に
このオンラインエディタが役立つ場面
アイコンやロゴを直すデザイナー
暗い背景に合わせてロゴの色を変える、細すぎる線を太くする、アイコンに紛れ込んだ余計な図形を消す。納品前の細かな修正に向いています。
Web 用に SVG を整える開発者
viewBox を確認し、ID の名前を変え、非表示のレイヤーを消してから保存できます。
カッティングマシン用のデータを作る人
色ごとにレイヤーを分け、刃では切れないほど細かい部分を消し、サイズを合わせる。マシンの専用ソフトに読み込む前の下ごしらえに使えます。趣味のクラフトにも。
学生と教員
授業のスライドやプリントに使う図解、ラベル、簡単なイラストを描けます。アプリを入れられない学校のパソコンでも、ブラウザがあれば大丈夫です。
このオンライン SVG エディタでできること・できないこと
使い始める前に、対応していることとしていないことを確認してください。
できること
- SVG ファイルを開く・編集する・保存する
- アイコン、ロゴ、バッジ、図解、シンプルなイラスト
- SVG の色変更や、線、テキスト、パスの形の調整
- SVG のソースコードを手で編集
できないこと
- PNG・JPG・PDF での保存。このページで保存できるのは SVG だけです。
- Illustrator の .ai、EPS、PDF ファイルを直接開くこと。先に SVG に書き出してください。
- 写真をベクター図形に変換すること。それには「画像のベクター化」を使ってください。
- 自動保存。タブを閉じる前に SVG をダウンロードしてください。
まだ SVG がない場合は
画像やテキストのプロンプトから、ほかのツールで SVG を作れます。できたファイルをここで開けば、続けて編集できます。