コマンド
M10,10 L90,90
描画
グリッド上に表示された対角線
デザインツール
SVGパス可視化 - d コマンドのデバッグ
長い path d="M10 20 L... Z" 文字列や完全な path tag を貼り付けて、グリッド上で可視化しつつ、length と command 数を確認できます。アイコン崩れのデバッグに便利です。
DesignSVGPathFrontend
クイック切替:SVGからCSS背景へ変換
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
SVGパス可視化
Path 'd' Data
等待路径输入。
-
利用シーン
- 壊れたアイコンの path d 値を取り出してグリッド上で確認する
使い方
- d の座標だけ、または完全な path tag を貼り付け、shape が見つかるように viewBox controls を調整する
入出力サンプル
FAQ
d 以外の属性も編集できますか？
いいえ。このツールは path d="..." 構文の確認とプレビューに特化しています。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
SVGからCSS背景へ変換
SVG to CSS Background - Data URL / Base64
SVG を URI encoding または Base64 で CSS background-image: url(...) 文字列へインライン化できます。小さなアイコンを別 asset file にせず CSS 内に保持したいときに便利です。
Design CSS SVG