SVG viewBox エディター
SVGコードを貼り付けてviewBoxや幅・高さをリアルタイムに編集
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
SVGコードを貼り付けるだけで、viewBoxのminX・minY・幅・高さやwidth・height属性を数値入力で調整でき、結果をリアルタイムのプレビューで確認できるツールです。アイコンの切り抜きや余白調整、viewBoxの設定ミスによる表示崩れを目で見ながら修正したい開発者やデザイナーに便利です。解析や変換はすべてブラウザ内で行われ、サーバーには送信されません。
使い方
- SVGコード入力欄に元のSVGマークアップを貼り付けます。
- 入力されたSVGのviewBox値がMin X・Min Y・幅・高さの欄に自動で反映されます。
- 数値を調整しながら右側のプレビューで結果をすぐに確認します。
- 必要に応じてwidth・height属性を設定し、完成したSVGコードをコピーします。
よくある質問
- viewBoxがないSVGを入力するとどうなりますか?
- viewBox属性がない場合、width・height属性の値をもとに初期viewBoxを推定して入力欄に反映します。
- 入力したSVGはサーバーに送信されますか?
- いいえ。DOMParserとXMLSerializerを使ってブラウザ内だけで処理され、外部には送信されません。
- 不正なSVGコードを入力するとどうなりますか?
- 解析に失敗したりsvg要素が見つからない場合、プレビュー欄にエラーメッセージが表示されます。