SVG viewBox エディター
SVG コードを貼り付けて viewBox・width・height をリアルタイムに調整
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 要素が見つからない場合は、プレビュー領域にエラーメッセージが表示されます。