SVGパスエディタ
パスデータを入力するだけ — 形状を確認しながら整形・ミニファイ
パスデータ（d属性の値）を入力
コピー済み
プレビュー
コマンド一覧
コマンドがありません
サンプル
SVGパスエディタで出来る事 About SVG Path Editor
SVGパスエディタは、SVG画像の輪郭を定義する「パスデータ（d属性）」を効率よく編集・確認するためのツールです。FigmaやAdobe IllustratorなどのデザインツールからエクスポートしたSVGは、パスデータが改行なしの圧縮文字列として出力されることがよくあります。
`M10 20L30 40C50 60 70 80 90 100Z` のような文字列は人間には読みにくく、手動でデバッグするのは困難です。このツールでは、入力したパスデータをリアルタイムでプレビューしながら整形・ミニファイができます。整形モードでは各コマンド（M:移動、L:直線、H/V:水平/垂直線、C:三次ベジェ曲線、S:スムース三次ベジェ、Q:二次ベジェ曲線、T:スムース二次ベジェ、A:円弧、Z:閉じる）を1行ずつ展開し、座標値を明確に整理します。
ミニファイモードでは余分なスペースを除去してSVGファイルサイズを最小化し、小数点精度調整機能（0〜8桁）で数値の丸め込みが可能です。コマンド一覧ではカーブ数・座標数などの詳細統計も表示され、複雑なパスの構造を一目で把握できます。相対座標コマンド（小文字）と絶対座標コマンド（大文字）の自動判定・表示により、パスの意図を正確に理解することも容易です。
用意されたサンプル（三角形・四角形・円・S字カーブ・星形）で即座に使い方を習得でき、コピーボタンで結果を素早くクリップボードに転送できます。Webデザイナー、フロントエンドエンジニア、SVGアニメーション制作者など、SVGを日常的に扱う全ての制作者のデバッグ効率と品質を大幅に向上させます。ブラウザのみで処理完結し、データは一切外部に送信されません。
SVG Path Editor helps you work with the d attribute — the string that defines the shape of an SVG path. When you export SVGs from Figma, Illustrator, or Inkscape, the path data often arrives as a dense, unreadable block like `M10 20L30 40C50 60 70 80 90 100Z`. Manually debugging or editing these strings is tedious and error-prone.
This tool solves that with a live preview that renders the shape as you type, so you can immediately see whether a path looks right. The format mode expands every command onto its own line — M (Move To), L (Line To), C (Cubic Bézier), Q (Quadratic Bézier), A (Arc), Z (Close Path) — with coordinates clearly separated.
Minify mode strips unnecessary whitespace for production-ready output, and the precision adjustment feature lets you round decimal places to reduce file size. The command breakdown panel shows detailed statistics including curve count and coordinate totals, making complex path structures instantly comprehensible. Built for front-end developers debugging SVG icons, designers tweaking exported paths, and anyone working with SVG animations who needs to understand path structure at a glance.
SVGパスエディタの使い方 How to use SVG Path Editor
- 「パスデータ（d属性）」欄にSVGのd属性の値を貼り付けます（例：M 0 0 L 100 0 L 100 100 Z）
- 右のプレビューエリアにパスの形状がリアルタイムで表示されます
- 「整形」ボタンでコマンドごとに改行・整理した読みやすい形式に変換します
- 「ミニファイ」ボタンで余分なスペースを除去して最小化した形式に変換します
- 「コピー」ボタンで結果をクリップボードにコピーして完了です
- Paste your SVG path data (the value of the d attribute) into the input area
- The preview panel renders the path shape in real time as you type
- Click 'Format' to expand the path into one command per line with clear spacing
- Click 'Minify' to strip all extra whitespace for compact, production-ready output
- Click 'Copy' to copy the result to your clipboard
SVGパスエディタを使うメリット Benefits of SVG Path Editor
- リアルタイムプレビューでパスの形状を即座に確認できる
- 整形機能でデザインツールエクスポートの圧縮パスを読みやすくデバッグできる
- ミニファイ機能でSVGファイルの本番用サイズを削減できる
- コマンド別整形でM・L・C・Q・A・Zの役割と座標を構造的に把握できる
- ブラウザのみで動作し、データを外部に送信しないため安全
- Live preview shows path shape immediately without switching tools
- Format mode makes compressed, tool-exported paths readable and debuggable
- Minify mode reduces SVG file size for production web projects
- Per-command breakdown clarifies the role and coordinates of each M, L, C, Q, A, Z segment
- Runs entirely in the browser — no uploads, no external requests, fully private
他のカテゴリ Other Categories
デザイン の人気ツール TOP 10 Popular Design Tools Tools TOP 10
デザイン のすべてのツール (15件) All Design Tools Tools (15)
該当するツールが見つかりませんでした No matching tools found