SVGパスビューア＆エディター

SVGのコード、またはパスのデータ（d）

例：

小数の桁

プレビュー

表示の大きさ 80%

貼り付けたコードはブラウザの中だけで処理され、外部のサーバーには送信されません。

使い方

説明

アイコンや図形のSVGコードを、その場で見た目として確かめられるツールです。

読みにくいコードの整形や、Webに載せる前の軽量化（Minify）、CSSに埋め込むためのデータURIの作成もできます。

軽量化では、コメント・<metadata>・Inkscape などの編集ソフトが付ける情報を消し、パスのデータの数値を指定した小数の桁に丸めて、区切りの空白を最小限にします
プレビューは、SVGを画像として読み込んで表示します。そのため、SVGの中のスクリプトやクリック時の動きは実行されません

豆知識・背景知識

SVG（Scalable Vector Graphics）は、図形を点の集まりではなく「線や曲線の式」で表す画像形式です。どれだけ拡大しても粗くならないため、ロゴやアイコンに広く使われています。中身はテキスト（XML）なので、コードを直接書き換えて色や形を変えられます。

<path> の d の中の英字は「命令」です。M（移動）・L（直線）・C（3次ベジェ曲線）・A（円弧）・Z（閉じる）などがあり、大文字は絶対位置、小文字は直前の位置からの相対位置を表します。

デザインソフトから書き出したSVGには、編集用の情報や必要以上に細かい数値が多く含まれ、半分以上が不要なこともあります。数値を小数2桁ほどに丸めるだけでも、見た目をほとんど変えずに大きく軽くできます。

「SVGパスビューア＆エディター」について、感想・使いにくいところ・欲しい機能などを気軽に教えてください。

まだ投稿がありません。最初の一言をお待ちしています！

お名前（任意）

評価（任意）

コメント必須

投稿された内容はこのページに公開されます。個人情報や連絡先は書かないでください。宣伝・URLを含む投稿は自動的に非表示になります。

利用にお金はかかりますか？会員登録は必要ですか？

すべて無料でお使いいただけます。会員登録やログインも必要ありません。

入力した内容はサーバーに送られていますか？

計算やツールの処理は、お使いのブラウザの中だけで行っています。入力された数値や画像がサーバーへ送られることはありません。
コメント欄に投稿された内容だけは、他の方にも読んでいただくためにサーバーへ保存されます。

スマホやタブレットでも使えますか？

iPhone・iPad・Android のブラウザに対応しています。画面の幅に合わせて表示が切り替わります。

要望やバグを見つけたときはどこへ伝えればよいですか？

「投稿する」タブからお知らせください。いただいた内容は運営で確認し、改善の参考にさせていただきます。