SVGパスエディタ
SVGパスエディタを使用して結果を確認し、出力が正しく検査されるまで元のファイルを保持しましょう。
Path Data
Commands
Shape Library
Export Options
SVGパスエディタとは？
SVGパスエディタは、SVGパスデータの編集に特化したオンラインツールで、リアルタイムで正確かつユーザーフレンドリーなSVGパスの編集と作成を提供します。このコンセプトは、複雑なSVGパスコマンドに直面した場合の問題を解決するために生まれ、ベクターグラフィックパスを描画および編集するための完全なビジュアルインターフェースを提供しています。現在、ユーザーはすべての標準SVGパスコマンド（M - 移動先、L - 線分先、C - キュービックベジエ、Q - 二次ベジエ、A - 楕円アーク、Z - パスを閉じる）を使用して、美しく複雑な形状のベクターを構築およびスケッチできます。
SVGパスエディタは、コードに深く入り、純粋にパスデータを操作できるパネルと、最新のフィードバックを提供する隣接するパネルを備えたハイブリッドタブインターフェースを使用します。ビジュアルエディタタブには、インタラクティブなパス操作とアニメーションプレビューや、フルライブラリの既製形状が含まれています。すべての処理はクライアント側のブラウザで行われるため、プライバシーとセキュリティが完全に確保され、SVGファイルはデバイスに残り、インターネットを通じては決して移動しません。
SVGパスエディタツールの使い方？
-
パスデータの作成または読み込み: 既存のSVGパスをパスデータテキストエリアに貼り付けたり、形状ライブラリから形状を選択したりして開始できます。または、ツールバーのボタンを通じて手動でパスを作成することもできます。
-
パスコマンドの使用: コマンドボタンをクリックして、パスに異なるコマンドを適用します。各コマンドは、ベクターデザインの形状を異なる方法で定義します。
-
ビジュアルパス編集: 「ビジュアルエディタ」タブに移動して、キャンバス内で自由にパスポイントとハンドルを操作します。ポイントをドラッグしてパスの形状を変更します！
-
パスのスタイリング: フィルカラーやストロークカラー、ストローク幅などのスタイルコントロールを使用して、見た目を変更します。
-
パスのアニメーション: 「アニメーション」タブに移動して、パスのアニメーションプレビューを行います。スピードを調整し、再生、一時停止、リセットを押してアニメーションを楽しむことができます。
-
作業のエクスポート: 必要に応じて、SVG、PNG、Base64、またはCSSに作業をエクスポートして、さまざまなシナリオでパスグラフィックスを実装します。
SVGパスエディタ よくある質問
SVGパスエディタは何ができますか？
無料で利用可能なオンラインツールで、SVGパスを直感的に編集・操作・可視化します。パスコマンドをリアルタイムで変更し、ベクターグラフィックスを磨き上げます。
SVGパスエディタで扱えるファイル形式は？
このカテゴリでは、一般的にSVGおよびエクスポートされたPNGをサポートしています。ブラウザやツールの中核エンジンによって対応状況が変わるため、アップローダーに表示されている対応形式を確認してください。
このツールで変更できる項目は？
このページの操作機能で定義されています。形式自体はサポートしていても、ツール側で公開されていない項目は、読み込まれた状態のまま維持されます。
元のファイルは変更されますか？
いいえ。作業はこのタブ内でブラウザのSVGドキュメントモデルがコピーに対して行われ、結果は別物のダウンロードとして届くため、必要に応じて元のファイルは残ったまま利用できます。
ファイルはどう処理されますか？
アップロードされません。ブラウザのSVGドキュメントモデルがローカルで処理するため、実質的な上限はデバイスのメモリと、アップローダー横に表示されている制限事項のみです。サーバーへの蓄積やキュー、アカウント登録は不要です。
SVGパスエディタでサポートされているSVGパスコマンドは何ですか？
SVGパスエディタは、完全なベクターエディットを可能にするすべての一般的なSVGパスコマンドをサポートしています。これには、M/m（移動先、開始点を設定）、L/l（線分先、直線）、H/h（水平線）、V/v（垂直線）、C/c（キュービックベジエ）、S/s（スムーズなキュービックベジエ）、Q/q（二次ベジエ）、T/t（スムーズな二次ベジエ）、A/a（楕円アーク）、およびZ/z（パスを閉じる、開始点に接続する線）が含まれます。各コマンドには専用のボタンがあるため、複雑なパスを作成するために正確な構文を覚える必要はなくなりました。このサポートにより、標準SVGパスデータを使用して、ユーザーはどのような形状やデザインも表現できます。