人が読める出力
座標は小数第 3 位までに丸め、<rect> や <circle> は path に変換せずそのまま書き出します。レイヤー名は id 属性になるので、CSS や JavaScript から迷わず参照できます。
無料のオンライン SVG エディタ ・ 登録なし
描いた図形が、そのまま読める SVG コードになる
TidySVG は、図形、ペン、パスファインダー、グラデーションまで使えるオンラインの SVG エディタです。書き出すと長方形は <rect> のまま、座標は丸められ、レイヤー名は id になります。コードベースにそのまま置けるファイルが手に入ります。
描いたものはブラウザの中だけに保存されます。どこにもアップロードしません。
SVG を「成果物」として使う人のために
コピーすると SVG コードになる
図形をコピーすると、クリップボードには SVG のマークアップが入ります。コードエディタや JSX に直接貼れますし、他のアプリでコピーした SVG をキャンバスに貼り付けることもできます。
インストールもアップロードもなし
すべてブラウザ内で動き、作業中のドキュメントは自動でローカルに保存されます。アカウント登録も不要です。
同じ図形でも、ファイルの中身はこれだけ違う
角丸の長方形と円を書き出した例です。左はデザインツールでよく見かける書き出し、右がこのエディタの実際の出力です。
<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-340.000000, -212.000000)">
<path d="M364,224 L436,224 C442.627417,224 448,229.372583 448,236 L448,308 C448,314.627417 442.627417,320 436,320 L364,320 C357.372583,320 352,314.627417 352,308 L352,236 C352,229.372583 357.372583,224 364,224 Z" id="Rectangle" fill="#1F6FEB"></path>
<circle id="Oval" fill="#FFFFFF" cx="400" cy="272" r="16"></circle>
</g>
</g>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<rect x="12" y="12" width="96" height="96" rx="12" id="card" fill="#1f6feb"/>
<ellipse cx="60" cy="60" rx="16" ry="16" id="dot" fill="#ffffff"/>
</svg>SVG の編集に必要な機能はひと通りそろっている
Illustrator のような多機能さを、SVG に関係するものだけに絞りました。初めて触っても迷わないよう、操作はキャンバス上で完結します。
ペンと鉛筆
クリックで角、ドラッグで曲線。鉛筆で描いた線は自動でなめらかなベジェ曲線に変わります。
アンカー編集
図形をダブルクリックするとアンカー編集に入ります。長方形や楕円も自動でパスに変換されます。
パスファインダー
合体、型抜き、交差、中マドと複合パス。塗りのルール（nonzero / evenodd）も切り替えられます。
塗りと線
単色と線形・円形グラデーション、スポイト、線端や角の形状、矢印まで細かく設定できます。
レイヤーとスマートガイド
ドラッグで重ね順を変え、表示やロックを切り替えます。移動中は他の図形の端や中央に吸着します。
読み込みと書き出し
transform、viewBox、<use>、CSS クラスを含む SVG を開けます。書き出しは SVG と PNG（1x / 2x / 4x）に対応しています。
よくある質問
本当に無料ですか？
はい。今ある機能はすべて無料で、アカウント登録もいりません。
手元の SVG ファイルをオンラインで編集するには？
エディタを開いて、SVG ファイルをキャンバスにドラッグするか「ファイル → 開く」で読み込みます。編集が終わったら「ファイル → SVG で保存」でダウンロードできます。ファイルはどこにもアップロードされません。
描いたデータはどこに保存されますか？
お使いのブラウザのローカルストレージです。サーバーには送信しません。別の端末で続きを作業するときは、SVG で保存したファイルを開いてください。
Illustrator や Figma の SVG を開けますか？
開けます。transform、viewBox、<use> / <symbol>、CSS クラス、グラデーション、複合パス、埋め込み画像に対応しています。一部のフィルターなど、対応していない要素は読み込まれないことがあります。
どの環境で使えますか？
パソコンの最新ブラウザ（Chrome、Edge、Safari、Firefox）向けに作っています。マウスかトラックパッドでの操作を想定しています。
機能の要望や不具合はどこに送ればいいですか？
support@tidysvg.yocto-works.com までメールでお送りください。いただいた要望は今後の改善の参考にします。
まずは 1 つ描いてみてください
ページを開けばすぐに使えます。気に入らなければ閉じるだけです。
エディタを開く